2f:T632,# Sketching your Design ## The Data The first question we should consider is the following: what aspects of the visualization are a function of the data? If we look at the above image, we find the following: * We are using position to visually encode category: each column encodes a given category, and this corresponds to the _predicted_ category. * We are using position to visually encode prediction scores, where the prediction scores are _binned_ into a user-specified number of bins. * We are using position, color, and glyph to visually encode a specific data item. Namely, we are using a **unit visualization** to pack a set of squares into a given region of space, specifically, a region of space that corresponds to a particular category and binned prediction score. Each square's color encodes the _ground truth_ category, and the glyph distinguishes between true and false positives. ## Sketch out how your visualization should be organized The main challenge in creating this visualization is the following: _For a given data instance, how do we position its corresponding square?_ There are 2 key elements to addressing this challenge: * Ensuring good **spatial organization**. * Expressing your spatial organization in SVG. So, rather than going straight-to-code, it is helpful to first _sketch_ the design, thinking about what elements need to be created along the way. **Step 1**: we will arrange categories along the x axis, and partition instances into their predicted categories. So first, we should create **group** elements with appropriate translations. 30:T4de,# Interactions All of the static pieces of our visualization are in place. We can now turn to interactions. In D3, a selection has a function called `on`. By calling `on`, we associate an **event** with each element in the selection. There are two arguments you are required to pass to this function: * **Event type**: a string indicating the user's interaction that will prompt the event. For mouse interactions, this ranges from "mouseover", "mouseout", "mousemove", "wheel", etc.. see [the docs](https://developer.mozilla.org/en-US/docs/Web/Events) for a full list of events. * **Function**: the function will have two arguments, datum and index (like \`attr\`). D3 will populate these for us, as D3 calls this very function when it is discovered that an event occurred for one of the elements in our selection. So you should think about this function as: what to do in response to a user event, for _any_ element in the selection. So the first interaction we will implement is the user hovering over a square. We would like to see **details on demand**: the prediction scores across all categories. We will realize this by _adding a line mark_ when the user hovers ("mouseover"), and _removing the mark_ when the user leaves ("mouseout").31:T475,# UI Elements for Visualization Design A very nice feature of Observable notebooks is the ability to define user interface elements that work seamlessly with your D3 code. By specifying the `viewof` keyword when creating a UI element, you may then assign the UI element's output to a variable, and use that variable in _any_ cell of your notebook. When the user changes the UI element, any cell that references the variable will automatically be reevaluated. This is extremely useful for exploring different design variations. There are a bunch of variables that we set above: * margins * number of bins * number of squares per row It is not entirely clear what these values should be! This is a function of the data, ultimately, and can be quite tricky to optimize. By allowing these variables to be adjusted, we can explore different combinations of layouts, and make some trade-offs between clutter/occlusion and readability. Small note: adjusting the sliders below is not super responsive, but this is because we've created a whole lot of plots above, and they are all reevaluated. It would be much faster were there a single plot.32:[{"id":"58da33c20c63624f9eee0932efea365bbd1a62c4e46a8760e5bc19ccc98a0e9559047f775800ffe24686e5e2b5088768cb1824cec80c0166c4f560fcd8f65631","href":"https://static.observableusercontent.com/files/58da33c20c63624f9eee0932efea365bbd1a62c4e46a8760e5bc19ccc98a0e9559047f775800ffe24686e5e2b5088768cb1824cec80c0166c4f560fcd8f65631","name":"cifar10_acc.csv","type":"text/csv","lastModified":1744132759411.758,"size":188991},{"id":"461b18f8bc7d0fb98d512b309d443e3333b8f543d282dd8d89105cd46016f5877fb1f3b746cf90b74c957f6d294bb47efa586c70437f948f336ea8dcdaf805fc","href":"https://static.observableusercontent.com/files/461b18f8bc7d0fb98d512b309d443e3333b8f543d282dd8d89105cd46016f5877fb1f3b746cf90b74c957f6d294bb47efa586c70437f948f336ea8dcdaf805fc","name":"cifar10_scores.csv","type":"text/csv","lastModified":1744132759411.758,"size":2097895},{"id":"367f3d6cf8eb868799765f85b62a009812ee44cdc1454df10d5f09b27cb9eb25e6849cd2a952ebf4a95466393af28dad4074e8943a0892e0a2a37a857269a697","href":"https://static.observableusercontent.com/files/367f3d6cf8eb868799765f85b62a009812ee44cdc1454df10d5f09b27cb9eb25e6849cd2a952ebf4a95466393af28dad4074e8943a0892e0a2a37a857269a697","name":"sketch_1.jpg","type":"image/jpeg","lastModified":1744132759411.758,"size":2455431},{"id":"9a42b1f177353b0a3c9c2c7a52053204f2b6dce5b9709ca8e1035c2eabfaa68f9c7dc12fb35c6cd2d314f83a05de82d94774ef879c833d39154283036b21ae18","href":"https://static.observableusercontent.com/files/9a42b1f177353b0a3c9c2c7a52053204f2b6dce5b9709ca8e1035c2eabfaa68f9c7dc12fb35c6cd2d314f83a05de82d94774ef879c833d39154283036b21ae18","name":"sketch_2.jpg","type":"image/jpeg","lastModified":1744132759411.758,"size":2565412},{"id":"27df8c2b988873b13ddb1b6bf7ab06c8b21452f0908f147682c955b0cd6bfa538a31283013da1bf040fd7aba6e4c9761c2f94d514f2c3b01ff4664a9e6e1bc88","href":"https://static.observableusercontent.com/files/27df8c2b988873b13ddb1b6bf7ab06c8b21452f0908f147682c955b0cd6bfa538a31283013da1bf040fd7aba6e4c9761c2f94d514f2c3b01ff4664a9e6e1bc88","name":"sketch_3.jpg","type":"image/jpeg","lastModified":1744132759411.758,"size":2589966},{"id":"eb49b7ce82b61ebae335a3976df9ddc3cafe5d2034fd327db0cc708cf4f8baeef32ccce0d4f84acab52d61dec07285e32acc8ac83a49b8a591ae6f97bcec9f73","href":"https://static.observableusercontent.com/files/eb49b7ce82b61ebae335a3976df9ddc3cafe5d2034fd327db0cc708cf4f8baeef32ccce0d4f84acab52d61dec07285e32acc8ac83a49b8a591ae6f97bcec9f73","name":"sketch_4.jpg","type":"image/jpeg","lastModified":1744132759411.758,"size":2802382},{"id":"b7cfbb2fa4888f415868bfd5d0115b60104f4a7b9765a5f5e0b8f9f66d5b806f639068a59b4568ab17b45415af344786bcc150b11921982449c674c052b84629","href":"https://static.observableusercontent.com/files/b7cfbb2fa4888f415868bfd5d0115b60104f4a7b9765a5f5e0b8f9f66d5b806f639068a59b4568ab17b45415af344786bcc150b11921982449c674c052b84629","name":"squares.jpg","type":"image/jpeg","lastModified":1744132759411.758,"size":999193}] 2d:{"title":"Lab4 - Squares","cells":[{"id":0,"value":"# Lab4 - Squares","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"Here we will go over the design of a specific visualization, namely from the paper [Squares](https://donghaoren.org/publications/vast16-squares.pdf). The focus of this paper is the visual analysis of a multi-class classification model, as evaluated on some hold-out set (e.g. test, validation, etc..). A data item consists of the following attributes:\n\n* **predicted category**\n* **ground-truth category**\n* **probability scores**\n\nWe will focus on one particular aspect of the paper: showing individual predictions (rather than different levels of aggregations), showing true positives, and showing false positives.\n\n

\n\nSo, to begin, let's inspect the data.","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"cats = ['frog', 'cat', 'dog', 'horse', 'deer', 'bird', 'plane', 'ship', 'truck', 'car']","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"random_inds = {\n let all_inds = d3.range(10000)\n d3.shuffle(all_inds)\n return all_inds.filter((_,i) => i < 1000)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"scores_data = {\n let temp_data = d3.csvParse(await FileAttachment('cifar10_scores.csv').text())\n temp_data.forEach(data_obj => {\n for(let key in data_obj)\n data_obj[key] = +data_obj[key]\n })\n return temp_data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"predictions_data = {\n let temp_data = d3.csvParse(await FileAttachment('cifar10_acc.csv').text())\n temp_data.forEach((data_obj,i) => {\n data_obj.score = +data_obj.score\n data_obj.index = i\n })\n return random_inds.map((_,i) => temp_data[i])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"**Step 2**: for each category, we will spatially arrange instances based on their binned predictions, along the y axis. We, again, will create **group** elements, leading to a hierarchical structure.\n\n

","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"**Step 3**: for a given category, and prediction interval, we may then begin to position squares that encode our data instances. The particular way that we position these squares is through a simple **space-fillng curve**, a function of the instance's _ordering_.\n\n

","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"**Step 4**: we need to determine an ordering! Namely, instances that were incorrectly predicted come first, and then correct predictions.\n\n

","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"# Data Processing\n\nSo first and foremost, we do not yet have bins! However, we can easily compute these from `predictions_data`, so let's derive a new data array:","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"binned_predictions = predictions_data.map(d => {\n let new_datum = {score:d.score, index:d.index, gt:d.gt, pred:d.pred}\n new_datum.bin = Math.min(n_bins-1,Math.floor(n_bins*d.score))\n return new_datum\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"Next, since we are going to be partitioning data along different discrete attributes (category, bin), it is natural to _nest our data_. We **group-by** prediction, and then **group-by** bin. For all predictions within a given category and bin, we will then **sort** so that we have a consistent ordering of squares in our layout:\n\n* false positives come first, ordered based on our category array (\\`cats\\`)\n* true positives come last","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"nested_data = d3.nest()\n\t\t.key(d => d.pred)\n\t\t.key(d => d.bin)\n\t\t.sortValues((a,b) => {\n\t\t\tlet a_gt_ind = a.gt==a.pred ? cats.length+1 : cats.indexOf(a.gt)\n\t\t\tlet b_gt_ind = b.gt==b.pred ? cats.length+1 : cats.indexOf(b.gt)\n\t\t\treturn a_gt_ind - b_gt_ind;\n\t\t})\n\t\t.entries(binned_predictions)","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"# Scales\n\nSo now that we have our data all set up, let's create our scales. Let's start off simple. We will create a scale for color, mapping each category to a unique color. For this purpose, we will cycle over all hues, and vary the chroma and luminance as we cycle:","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"cat_scale_color = {\n let hue_scale = d3.scalePoint().domain(cats).range([0,360]).padding(0.05)\n let the_scale = {}\n cats.forEach((cat,i) => {\n let chroma_val = (i%2)==0 ? 70 : 40\n let lightness_val = (i%2)==0 ? 35 : 70\n the_scale[cat] = d3.hcl(hue_scale(cat), chroma_val, lightness_val)\n })\n return the_scale\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"Next, we will create **band scales** for `category`, `bin` and `square`.","pinned":false,"hidden":false,"mode":"md"},{"id":114,"value":"cat_scale_x = d3.scaleBand()\n .domain(cats)\n .range([0,width-(left_margin+right_margin)])\n .padding(0.05)","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"bin_scale_y = ","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"square_scale_y = ","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"score_scale_y = ","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"Note that the scale for squares is dependent on the **bandwidth** of the scale for bins, as we will be positioning squares within a spatial region of a bin.","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"# Spatial Layout\n\nLet's first setup the spatial layout of our plot, just with respect to category and bin.\n\nOur nested data structure is first grouped-by category, and so we will first perform a data join on category. Our data join will be focused on the following:\n\n* create a **group** element for each category, with an appropriate transformation (based on `cat_scale_x`).\n* _append_ a line element to the group, to demarcate the individual categories.\n* _append_ a text element to the group, so that the top of each category shows the category name. Note: you could use `d3.axis` here instead, properly formatting the resulting axis elements as need be.","pinned":false,"hidden":false,"mode":"md"},{"id":127,"value":"category_plot = {\n let svg = d3.create('svg').attr('width', width).attr('height', height)\n let main_plot = svg.append('g').attr('transform', `translate(${left_margin},${top_margin})`)\n \n category_guides(main_plot)\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"function category_guides(main_plot) {\n main_plot.selectAll('g')\n .data(nested_data) // first level of our nest -> the categories\n .enter()\n .append('g')\n .classed('category', true) // allow for fine-grained selections\n .attr('transform', d => `translate(${cat_scale_x(d.key)},0)`)\n \n let category_g = main_plot.selectAll('.category')\n \n category_g.append('line')\n .attr('x1',0).attr('x2',0)\n .attr('y1',0).attr('y2',height-(top_margin+bottom_margin))\n\t\t.attr('stroke', d => cat_scale_color[d.key])\n\t\t.attr('stroke-width', 3)\n \n category_g.append('text')\n\t\t.text(d => d.key)\n .classed('catname', true)\n\t\t.attr('x', 0).attr('y', -3)\n\t\t.attr('text-anchor', 'middle')\n .attr('font-size', '14px').attr('font-family', 'serif').attr('font-weight', 'bold')\n\t\t.attr('fill', d => cat_scale_color[d.key])\n \n // draw our scale! (give us an axis)\n main_plot\n .append('g')\n .attr('transform', 'translate(-5,0)')\n .call(d3.axisLeft(score_scale_y))\n \n return category_g\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"What have we created?\n\nWe can use the `drawdom` function for inspection.","pinned":false,"hidden":false,"mode":"md"},{"id":136,"value":"viewof category_plot_view = drawdom(category_plot)","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"Next, we perform a nested data join, using the hierarchical structure produced by \\`d3.nest\\`. This will correspond to the different bins. At this stage, we will only create group elements, and appropriate transformations (using \\`bin_scale_y\\`), nothing else. For illustration, however, we can append rectangles to the groups to see what is being created: ","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"bin_plot = {\n let svg = d3.create('svg').attr('width', width).attr('height', height)\n let main_plot = svg.append('g').attr('transform', `translate(${left_margin},${top_margin})`)\n \n let prediction_groups = category_guides(main_plot)\n \n let bin_data_groups = bin_rows(prediction_groups)\n \n bin_data_groups.lower().append('rect')\n .attr('width', cat_scale_x.bandwidth()).attr('height', bin_scale_y.bandwidth())\n .attr('fill', d3.hcl(0,0,87))\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"function bin_rows(prediction_groups) {\n prediction_groups.selectAll('g') // empty selection!\n .data(d => d.values) // data bound to _parent_ elements are populated, giving category-specific data\n .enter()\n .append('g')\n .classed('bin', true) // distinguish these group elements as our binned prediction intervals\n .attr('transform', d => `translate(0,${bin_scale_y(d.key)})`)\n \n return prediction_groups.selectAll('.bin')\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"viewof bin_plot_view = drawdom(bin_plot,5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"bin_plot_view","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"# Creating the Squares\n\nNext, we will populate each region (category and bin) with the squares. This corresponds to the last part of our nest, and is yet another nested data join.","pinned":false,"hidden":false,"mode":"md"},{"id":155,"value":"squares_plot = {\n let svg = d3.create('svg').attr('width', width).attr('height', height)\n let main_plot = svg.append('g').attr('transform', `translate(${left_margin},${top_margin})`)\n \n let prediction_groups = category_guides(main_plot)\n \n let bin_data_groups = bin_rows(prediction_groups)\n \n square_creation(bin_data_groups)\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"function square_creation(bin_groups) {\n bin_groups.selectAll('g') // empty!\n .data(d => d.values) // pass along per-category, and per-bin, data instances\n .enter()\n .append('g')\n .classed('square', true)\n \n let square_g = bin_groups.selectAll('.square') // assign selection to variable\n \n // our space-filling curve for positioning squares\n square_g.attr('transform', (d,i) => {\n var y_off = i % squares_per_row\n var square_offset_y = square_scale_y(y_off)\n var x_off = Math.floor(i/squares_per_row)\n var square_offset_x = 3+x_off*square_scale_y.step()\n return `translate(${square_offset_x},${square_offset_y})`\n\t})\n \n // distinguish true positives from false positives\n\n \n // and FINALLY, create our square shapes (rects)\n\n \n return square_g\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"viewof squares_plot_view = drawdom(squares_plot,5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"squares_plot_view","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"Last, we will modify the squares that correspond to false positives. We will add two diagonal lines, in order to give them a different appearance from the true positive squares.\n\nHere, note that we have assigned the \"fp\" class to all squares that are false positives. Hence, we can simply issue a selection for all elements that have this class name, and then work with this selection as needed - in this case, passing the selection as an argument to another function.","pinned":false,"hidden":false,"mode":"md"},{"id":167,"value":"full_squares_plot = {\n let svg = DOM.svg(width+left_margin+right_margin, height+top_margin+bottom_margin)\n let svg_elem = d3.select(svg)\n \n let main_plot = svg_elem.append('g').attr('transform', 'translate('+left_margin+','+top_margin+')')\n \n let prediction_groups = category_guides(main_plot)\n \n let bin_data_groups = bin_rows(prediction_groups)\n \n\n \n return svg\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"function false_positive_annotations(fp_selection) {\n let rel_stripe_position_1 = 7*square_scale_y.bandwidth()/10;\n\tlet rel_stripe_position_2 = 3*square_scale_y.bandwidth()/10;\n\n\tfp_selection.append('line')\n\t\t.attr('stroke', 'white').attr('stroke-width', .7)\n\t\t.attr('x1', 0).attr('x2', rel_stripe_position_1)\n\t\t.attr('y1', rel_stripe_position_1).attr('y2', 0)\n\tfp_selection.append('line')\n\t\t.attr('stroke', 'white').attr('stroke-width', .7)\n\t\t.attr('x1', rel_stripe_position_2).attr('x2', square_scale_y.bandwidth())\n\t\t.attr('y1', square_scale_y.bandwidth()).attr('y2', rel_stripe_position_2)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":176,"value":"detailed_interaction_plot = {\n let svg = DOM.svg(width+left_margin+right_margin, height+top_margin+bottom_margin)\n let svg_elem = d3.select(svg)\n \n let main_plot = svg_elem.append('g').attr('transform', 'translate('+left_margin+','+top_margin+')')\n \n let prediction_groups = category_guides(main_plot)\n \n let bin_data_groups = bin_rows(prediction_groups)\n \n \n return svg\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"function setup_square_interactions(main_plot) {\n let squares_selection = main_plot.selectAll('.square')\n \n squares_selection.on('mouseover', function(square_datum) {\n\t\tlet scores = scores_data[square_datum.index];\n\t\tvar line_datum = cats.map(cat => [cat,scores[cat]])\n\n\t\tlet line_shape = d3.line()\n\t\t\t.x(d => cat_scale_x(d[0]))\n\t\t\t.y(d => score_scale_y(d[1]))\n\n\t\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"For our last interaction, we will enable an **overview** of prediction scores, at the level of a category, rather than individual data instances. Here, we will associate events with the text labels of each category, so that when a user hovers a category name, we show its set of scores as a collection of line marks.","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"full_interaction_plot = {\n let svg = DOM.svg(width+left_margin+right_margin, height+top_margin+bottom_margin)\n let svg_elem = d3.select(svg)\n \n let main_plot = svg_elem.append('g').attr('transform', 'translate('+left_margin+','+top_margin+')')\n \n let prediction_groups = category_guides(main_plot)\n \n let bin_data_groups = bin_rows(prediction_groups)\n \n square_creation(bin_data_groups)\n false_positive_annotations(bin_data_groups.selectAll('.fp'))\n \n setup_square_interactions(main_plot)\n setup_category_interactions(main_plot)\n \n return svg\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"function setup_category_interactions(main_plot) {\n main_plot.selectAll('.catname').on('mouseover', function(cat_d,i) {\n let selected_score_inds = predictions_data.filter(d => d.pred==cat_d.key)\n let selected_scores = selected_score_inds.map(d => scores_data[d.index])\n\n\t\tlet line_shape = d3.line()\n\t\t\t.x(d => cat_scale_x(d[0]))\n\t\t\t.y(d => score_scale_y(d[1]))\n\n\t\tmain_plot.selectAll('nolines').data(selected_scores).enter().append('path')\n\t\t\t.attr('class', 'scoreline')\n\t\t\t.attr('d', d => {\n\t\t\t\tlet score_line = cats.map(cat => [cat, d[cat]])\n\t\t\t\treturn line_shape(score_line)\n\t\t\t})\n \t.attr('fill', 'none').attr('stroke', cat_scale_color[cat_d.key]).attr('stroke-width', '.4')\n\t\t\t.attr('stroke-opacity', '0.7')\n\t})\n \n\tmain_plot.selectAll('.catname').on('mouseout', function(d,i) {\n\t\tmain_plot.selectAll('.scoreline').remove()\n\t})\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"viewof left_margin = slider({\n min: 0,\n max: 40,\n step: 0.1,\n value: 30,\n title: \"Left Margin\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"viewof right_margin = slider({\n min: 0,\n max: 60,\n step: 0.1,\n value: 5,\n title: \"Right Margin\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"viewof top_margin = slider({\n min: 0,\n max: 40,\n step: 0.1,\n value: 30,\n title: \"Top Margin\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"viewof bottom_margin = slider({\n min: 0,\n max: 40,\n step: 0.1,\n value: 5,\n title: \"Bottom Margin\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"viewof n_bins = slider({\n min: 5,\n max: 20,\n step: 1,\n value: 10,\n title: \"Number of Bins\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"viewof squares_per_row = slider({\n min: 4,\n max: 20,\n step: 1,\n value: 5,\n title: \"Squares per Row\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"Try adding in a slider for the number of data samples we use (currently default to 1000 way up top), or treating the height (defined right below) as a variable we can adjust.","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"height = 570","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"# Imports","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"import {drawdom} from '91007ee9d5fd152b'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}