2e:null 2f:["$","title",null,{"children":"Exploration (hierarchical) | Amelia Wattenberger | Observable"}] 34:T4ce,function select(config = {}) { let { value: formValue, title, description, disabled, submit, multiple, size, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "object" ? o : { value: o, label: o } ); const form = input({ type: "select", title, description, submit, attributes: { disabled }, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }35:T900,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 : d3.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; }36:[{"id":"1279ee3be1fbb52f2075ed27c8913d4714c1290e9d2cd53bd3a99c55a2179c7ced74a5fcd20046ab2a4eb55d938d8676fcd7ad2d21c94deb4dc1ea4a5e8f483e","href":"https://static.observableusercontent.com/files/1279ee3be1fbb52f2075ed27c8913d4714c1290e9d2cd53bd3a99c55a2179c7ced74a5fcd20046ab2a4eb55d938d8676fcd7ad2d21c94deb4dc1ea4a5e8f483e","name":"modules.json","type":"application/json","lastModified":1598466935557.819,"size":246164}] 32:{"id":"78871a2370f7fc82","slug":"exploration-hierarchical","title":"Exploration (hierarchical)","thumbnail":"4acfd0fea456dbd1893ee2c82284c087b07b22f61d8653480e9d7b50727cf22e","access_level":"public","create_time":"$D2020-08-26T18:34:56.632Z","update_time":"$D2020-08-26T19:13:46.686Z","view_time":null,"first_public_time":"$D2020-08-27T19:12:10.235Z","has_unpublished_edits":null,"fork":{"id":"5de331f70b435e91","slug":"exploration-flat","title":"Exploration (flat)","owner":{"id":"e1b76b9b200a9fc5","login":"wattenberger","name":"Amelia Wattenberger"}},"stars":13,"starred":false,"owner":{"type":"team","id":"e1b76b9b200a9fc5","login":"wattenberger","name":"Amelia Wattenberger","avatar_url":"https://avatars-next.observableusercontent.com/9e922bd7d37d99b27d302138dedc8d2387985f52c1715f463b45ab23765fddf2","tier":"starter_2024"},"version":1639,"publish_version":1639,"role":null,"authored":false,"authors":[{"type":"individual","id":"5b3290359e44e5cc","login":"wattenberger","name":"Amelia Wattenberger","avatar_url":"https://avatars-next.observableusercontent.com/9e922bd7d37d99b27d302138dedc8d2387985f52c1715f463b45ab23765fddf2","tier":null}],"members":[{"type":"individual","id":"5b3290359e44e5cc","login":"wattenberger","name":"Amelia Wattenberger","avatar_url":"https://avatars-next.observableusercontent.com/9e922bd7d37d99b27d302138dedc8d2387985f52c1715f463b45ab23765fddf2","tier":null,"role":"editor"}],"comments":[{"id":"6d5eb7dd1e503301","reply_to_id":null,"content":"What kind of shape should the data be in? (yeah, I know I technically could reverse engineer from the code but the Friday afternoon laziness has kicked in)","create_time":"$D2020-08-28T11:58:39.055Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"10432c958d190869","reply_to_id":"6d5eb7dd1e503301","content":"If you look at the data structure of `parsedData`, you can see that it should be a nested array of objects, each with a `name`, `value`, and `children`","create_time":"$D2020-08-28T13:56:44.951Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5b3290359e44e5cc","login":"wattenberger","name":"Amelia Wattenberger","avatar_url":"https://avatars-next.observableusercontent.com/9e922bd7d37d99b27d302138dedc8d2387985f52c1715f463b45ab23765fddf2","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Exploration (hierarchical)","cells":[{"id":0,"value":"md`# Exploration (hierarchical)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"md`---\n## Let's get some data!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"viewof dataFile = fileInput({\n initialValue: FileAttachment(\"modules.json\").blob(),\n accept: \".csv,.json\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"rawData = (dataFile[\"name\"] || \"\").endsWith(\".csv\") ? d3.csvParse(await Files.text(dataFile)) :\n !dataFile[\"name\"] || (dataFile[\"name\"] || \"\").endsWith(\".json\") ? JSON.parse(await Files.text(dataFile)) :\n []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"rawData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1479,"value":"md`Does our data structure need to be changed?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1406,"value":"parsedData = ({\n name: \"root\",\n children: rawData.map(d => {\n const name = d[\"title\"]\n const processChildren = (children=[]) => {\n return children.map(d => ({\n name: (d[\"name\"] || d[\"title\"] || \"\").split(\" - \")[0],\n children: processChildren(d[\"children\"]),\n value: (d[\"children\"] || []).length,\n value: d[\"size\"] || d[\"value\"] || (d[\"children\"] ? sum(d[\"children\"].map(d => d[\"value\"])): 1),\n }))\n }\n return {name, children: processChildren(d[\"children\"]), value: d[\"size\"] || d[\"value\"]}\n })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"md`---\n## Finding and using other charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1513,"value":"circlePack","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1519,"value":"circlePackPack = data => d3.pack()\n .size([width, 975])\n .padding(3)\n (d3.hierarchy(parsedData)\n .sum(d => 1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1512,"value":"import {chart as circlePack} with {\n parsedData as data,\n} from \"@d3/circle-packing-monochrome\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1547,"value":"treemap","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1546,"value":"import {chart as treemap} with {\n parsedData as data\n} from \"@d3/treemap-by-count\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"// tidyTree","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"import {chart as tidyTree} with {\n parsedData as data\n} from \"@d3/tidy-tree\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1614,"value":"bubbleChart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1616,"value":"bubbleChartData = parsedData[\"children\"].map(({children, ...d}) => ({...d, group: d[\"name\"]}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1581,"value":"import {chart as bubbleChart} with {\n bubbleChartData as data\n} from \"@d3/bubble-chart\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1474,"value":"md`---\n# Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-delaunay@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"import {move, fromPairs, flatten, sum} from \"@wattenberger/chart-utility-functions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"import { getHistogramOf } from \"@wattenberger/histograms\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1171,"value":"import {getHorizontalBarChartOf} from \"@wattenberger/horizontal-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"import {getMetricType, getMetricAccessor, getMatrix} from \"@wattenberger/matrix\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"import {checkbox, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1019,"value":"import {fileInput} from \"@mbostock/file-input-with-initial-value\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"import { listInput } from \"@harrislapiroff/list-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"import { getLineChart } from \"@wattenberger/line-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1396,"value":"import { getScatterPlot } from \"@wattenberger/scatter-plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"