improve defaults

Signed-off-by: Vanessa Sochat <vsochat@stanford.edu>

Author: vsoch

codeart/graphics.py

@@ -23,7 +23,7 @@
 
 
 def generate_interactive_colormap(
-    vectors, counts, color_width=20, width=6000, row_height=20, outdir=None
+    vectors, counts, color_width=20, width=1000, row_height=20, outdir=None
 ):
     """Based on a set of vectors, generate an interactive colormap.
        with d3. This function should take output from get_vectors and
@@ -56,8 +56,8 @@ def generate_interactive_colormap(
             names = coords.index[color_index:].tolist()
         else:
             names = coords.index[color_index : color_index + colors_per_row].tolist()
-        coords.loc[names, "x_center"] = [row_height * row + 1] * len(names)
-        coords.loc[names, "y_center"] = list(
+        coords.loc[names, "y_center"] = [row_height * row + 1] * len(names)
+        coords.loc[names, "x_center"] = list(
             range(0, color_width * len(names), color_width)
         )
         color_index += colors_per_row
@@ -77,6 +77,7 @@ def generate_interactive_colormap(
         savedata = {
             "records": vectors.to_dict(orient="records"),
             "groups": groups,
+            "rows": rows,
             "width": width,
             "color_width": color_width,
             "row_height": row_height,

codeart/static/interactive-grid.html

@@ -42,8 +42,8 @@
     .attr("class", "tooltip")				
     .style("opacity", 0);
 
-var w = data['width'],
-    h = data["row_height"] * data["records"].length,
+var w = "100%",
+    h = data["row_height"] * data["rows"],
     z = data["width"] / data["colors_per_row"]
 
 var svg = d3.select("body").append("svg")
@@ -77,6 +77,9 @@
 
 function redraw(group) {
     svg.selectAll("rect").remove()
+    if (group == "No extension"){
+        group = "";
+    }
     key = group + "-percent"
     console.log(key);
 
@@ -99,7 +102,7 @@
         .attr("x", 120)
         .attr("y", function(d,i){ return 100 + i*35}) // 100 is where the first dot appears. 25 is the distance between dots
         .style("fill", function(d){ if (d == group) { return "black"}; return "#CCC"})
-        .text(function(d){ return d})
+        .text(function(d){ if (d==""){ return "No extension"; }; return d})
         .attr("text-anchor", "left")
         .style("cursor", "pointer")
         .style("font", "32px sans-serif")
@@ -119,7 +122,7 @@
     .attr("x", 120)
     .attr("y", function(d,i){ return 100 + i*35}) // 100 is where the first dot appears. 25 is the distance between dots
     .style("fill", "white")
-    .text(function(d){ return d})
+    .text(function(d){ if (d==""){ return "No extension"; }; return d})
     .attr("text-anchor", "left")
     .style("cursor", "pointer")
     .style("font", "32px sans-serif")