25:["$","title",null,{"children":"Hierarchies Zhang | Spring 2020 Info Vis | Observable"}] 4b:T56a,// Draw the visualization chart2 = { const svg = d3 .create("svg") .attr("width", width) .attr("height", height); svg.node().update = current_metric => { make_treemap_layout(hierarchy_Tree); svg .selectAll("g") .data(hierarchy_Tree.leaves()) .join(enter => { const gs = enter .append("g") .attr("transform", d => `translate(${width / 2}, ${height / 2})`); gs.append("text") .text(d => { if (d.data.bedroom > 4) { return d.data.bedroom; } }) .style("font-size", "10px") .attr("y", 10); gs.append("rect") .style("stroke", "white") .style("fill", d => color(d.parent.data.key)) .style("fill-opacity", .5); return gs; }) .transition() .ease(d3.easeBounceOut) //uncomment for a bouncing transition .duration(30) .delay((d, i) => i * 2) .attr("transform", d => `translate(${d.x0}, ${d.y0})`) .selectAll("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); svg .append("g") .attr("transform", "translate(150, 30)") .append(() => legend({ color: color, width: 700, title: "# of bedroom by property type" }) ); }; return svg.node(); }4c:T8e1,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }4d:[{"id":"2fb5f524c597fd3793fba1d7e61c513aca8b39d60b677629d470037f0db323d08dc52497ec4e3af4ed95120a27ef789edfdcd1eb364b2034ff2fb768af9ece0a","href":"https://static.observableusercontent.com/files/2fb5f524c597fd3793fba1d7e61c513aca8b39d60b677629d470037f0db323d08dc52497ec4e3af4ed95120a27ef789edfdcd1eb364b2034ff2fb768af9ece0a","name":"Airbnb_Cleaned.csv","type":"text/csv","lastModified":1588476095172.412,"size":1432106}] 47:{"id":"62abd0696cb0fb87","slug":"hierarchies-zhang","title":"Hierarchies Zhang","thumbnail":"40255d68bc65aa475c19219e7d459655cfbb89a44534e7821251a867b69a13d7","access_level":"public","create_time":"$D2020-05-03T01:44:08.166Z","update_time":"$D2020-05-16T00:30:40.816Z","view_time":null,"first_public_time":"$D2020-05-03T22:02:02.835Z","has_unpublished_edits":null,"fork":{"id":"ac8d85c2345665ab","slug":"hierarchies","title":"Hierarchies","owner":{"id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","bio":"UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues. ","followed_by_you":false,"follows_you":false},"version":641,"publish_version":641,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a4a4722db9871c6","login":"yuanruizhang","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3ffdbf4492f5e30dff74629747a0f4ab9829141a8385d9ade1767bcc050e2c5e","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hierarchies Zhang","cells":[{"id":0,"value":"md`# Hierarchies Zhang`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"summary = md`In this notebook, you will create **four different representations** of the same hierarchical data through the following steps: \n1. Read through the brief descriptions of each visualization type on the [datavizcatalogue](https://datavizcatalogue.com/search/hierarchy.html)\n2. Using a dataset of your choice:\n - Create all four layouts mentioned in the reading\n - Reflect on the relative advantages // disadvantages in the layout, noting the **encodings** that the chart type uses, and their impact on **perceptual accuracy**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"setup = md`## Set up`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"displayCaution(\n \"Make sure you fork and rename this notebook before continuing!\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`To create a notebook for your assignment, please do the following (see [this notebook](https://observablehq.com/@info474/creating-assignments?collection=@info474/teaching-process) for more details on each step):\n

**Fork Assignment**: You should fork this assignment (make sure to fork it _within_ the Team). _Do not_ edit this notebook before forking it

**Rename Assignment**: Add your last name to the assignment name by changing the header cell value (e.g., to _Hierarchies Freeman_)

**Add Assignment to Collection**: add the assignment to the [appropriate collection](https://observablehq.com/collection/@info474/hierarchies-assignment)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"loading_data = md`## Loading Data\nAs in previous notebooks, you'll choose the dataset to work with in this assignment. The only real requirement is that the dataset has a natural hierarchy to it (in other words, each observation belongs to a _group_). Many datasets contain implicit hierarchies, such as countries that belong to _regions_, songs that appear on _albums_, courses that are taught by different _departments_, etc. \n\nIn the cells below, please do the following:\n- Load your data (either directly from the web, or by uploading it as [File Attachment](https://observablehq.com/@observablehq/file-attachments))\n- Display a subset of the data (e.g., the first ~10 rows) using the \\`render_data_table()\\` function, which I've already imported below (see how we did that [here](https://observablehq.com/@info474/javascript-data-wrangling?collection=@info474/tutorials#loading_data))\n- Tell us a little bit about the data (just enough so we understand where the data came from, and what we're looking at).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`Because Javascript is not friendly at wrangling data, I decide to clean up some part of origional data in python before importing. I filtered down the city, and drop all the NAs. Here in Javascript I changed address to only the city name`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"render_data_table(data.slice(0, 10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"md`Data is from Airbnb open source. This data contains Airbnb information in Greater Seattle area. I'm intended to group these by city e.g. Kirkland, Bellevue, and then group by types e.g. Apartment, shared rooms`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"formatting_data = md`## Formatting Data\nIn order to visualize the hierarchies in your data, you'll need to organize your data into different groups. To do so, I suggest you use the \\`d3.nest()\\` method, as described in this [tutorial](https://observablehq.com/@info474/javascript-data-wrangling?collection=@info474/tutorials#aggregating_data).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"// Nest your data by type 1, then type 2\nnested_data = d3\n .nest()\n .key(d => d['address'])\n .key(a => a['room_type'])\n .entries(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"visualizations = md`## Visualizations\nIn this section, you'll create **all four** representations of hierarchical data discussed on [this page](https://datavizcatalogue.com/search/hierarchy.html). Following each visualization, please make note of the **encodings** in the chart, and the relative advantages / disadvantages in terms of **perception**. \n\nIf you want, you may **import** three out of the four charts (the other one, you must write the code here). As you do so, make sure you import the charts _with_ your data as the data to visualize!\n\nFeel free to organize this section as you see fit (e.g., create sub-sections for each visualzation, put all of your reflections at the end in a table) however you want to organize your work is fine!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"viewof priceSlider = slider({\n min: d3.min(raw_data, d => +d.price),\n max: d3.max(raw_data, d => +d.price),\n step: 10,\n value: 50,\n title: \"Maximum Airbnb Price\",\n description: \"Select Maximum price for Airbnb selection\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"viewof reviewSlider = slider({\n min: d3.min(raw_data, d => +d.overall_satisfaction),\n max: d3.max(raw_data, d => +d.overall_satisfaction),\n step: 0.5,\n value: 4.5,\n title: \"Minimum Airbnb satisfaction\",\n description: \"filter Airbnb Satisfaction\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md`## Sunburt map\nThis map indicates: within each city of Greater Seattle area, how many rooms are in Airbnb categorized by property type.\nIt has a really good visual representation of data we want. Buy since Seattle has overwhelmingly high data volume, other cities are shrinked and hard to see.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"// Structure your data as a hierarchy -- pass in an *object* whose *values* are your nested data\n// To show each pokemon the same size, specify a `.sum` where each value is 1\nhierarchy_Sunburst = d3\n .hierarchy(\n { key: \"Greater Seattle Area\", values: nested_data },\n d => d.values\n )\n .sum(d => +d.bedrooms)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"// Create your own partition function: it can be the same as the one in the other notebook,\n// But doesn't include the `d3.hierarchy` function (as we've already done that step)\nmy_partition = data => d3.partition().size([2 * Math.PI, 500])(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"import { chart } with {\n hierarchy_Sunburst as data,\n my_partition as partition\n} from '@d3/sunburst'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"md`Displaying result with price under ${priceSlider} and satisfaction above ${reviewSlider}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"md`## Tree Map\nI ended up only selecting one key for nesting in Treemap because or else all the category will be too small to visualize. \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"// Write a function that can compute treemap layout\nmake_treemap_layout = d3\n .treemap()\n .round(true)\n .tile(d3.treemapResquarify)\n .size([width, height])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"// Nest by region\nnested_Tree = d3\n .nest()\n //.key(d => d['room_type'])\n .key(a => a['address'])\n .entries(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"// Transform into a hierarchy (but don't yet specify the sum() function)\nhierarchy_Tree = d3\n .hierarchy(\n { key: \"Greater Seattle Area\", values: nested_Tree },\n d => d.values\n )\n .sum(d => +d.bedrooms)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"// Make a color scale for the regions\ncolor = d3\n .scaleOrdinal()\n .domain(nested_Tree.map(d => d.key))\n .range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"md`Displaying result with price under ${priceSlider} and satisfaction above ${reviewSlider}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"chart2.update()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`## Circle Packing\nThis graph is the best one displaying information so far, as it doesn't emphasize too much on the quantity of Seattle. The down side is because this is a huge dataset, So when you zoom into each city & property type, text become messy`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"my_pack = data =>\n d3\n .pack()\n .size([width, height])\n .padding(3)(\n d3\n .hierarchy(\n { key: \"Greater Seattle Area\", values: nested_data },\n d => d.values\n )\n .sum(d => +d.bedrooms)\n .sort((a, b) => b.value - a.value)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"import { chart as circlePacking } with {\n nested_data as data,\n my_pack as pack\n} from '@d3/zoomable-circle-packing'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"md`Displaying result with price under ${priceSlider} and satisfaction above ${reviewSlider}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"circlePacking","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`## Tree Diagram\nApparently my data set is not good for using tree diagram. If I list every unique value, about 6000 rows, my browser will not respond and recommend me to go into safe mode. So the best I could do is to display proerty options\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"tree_nested_data = d3\n .nest()\n .key(d => d['address'])\n .key(a => a['room_type'])\n .entries(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"// This is a little annoying, but each piece of data needs a property called \"name\"\n// To use the functions in the notebooks we're importing\ntree_nd = nested_data.map(d => {\n d.name = d.key;\n d.children = d.values.map(dd => {\n dd.name = dd.key;\n return dd;\n });\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"tree_formatted_Data = ({\n name: 'Greater Seattle Area',\n children: tree_nd\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"import { chart as chart4 } with {\n tree_formatted_Data as data\n} from '@d3/tidy-tree'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"md`Displaying result with price under ${priceSlider} and satisfaction above ${reviewSlider}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"chart4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"feedback = md`## Feedback\nIn the cell below, please let us know which pieces of the assignment you found particularly challenging, and if you had any issues specific to working with the Observable platform.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"raw_data = d3.csvParse(await FileAttachment(\"Airbnb_Cleaned.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"data = raw_data.filter(\n d => d.overall_satisfaction >= reviewSlider && d.price <= priceSlider\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"data.forEach(d => (d.address = d.address.split(\",\")[0]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"import {\n displayCaution,\n render_data_table,\n table_styles\n} from \"@info474/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"table_styles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"width = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"import { swatches, legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"function slider(config = {}) {\n let {\n min = 0,\n max = 1,\n value = (max + min) / 2,\n step = \"any\",\n precision = 2,\n title,\n description,\n disabled,\n getValue,\n format,\n display,\n submit\n } = typeof config === \"number\" ? { value: config } : config;\n precision = Math.pow(10, precision);\n if (!getValue)\n getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\",\n title,\n description,\n submit,\n format,\n display,\n attributes: { min, max, step, disabled, value },\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null