2f: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; }30: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; }31:[{"id":"1279ee3be1fbb52f2075ed27c8913d4714c1290e9d2cd53bd3a99c55a2179c7ced74a5fcd20046ab2a4eb55d938d8676fcd7ad2d21c94deb4dc1ea4a5e8f483e","href":"https://static.observableusercontent.com/files/1279ee3be1fbb52f2075ed27c8913d4714c1290e9d2cd53bd3a99c55a2179c7ced74a5fcd20046ab2a4eb55d938d8676fcd7ad2d21c94deb4dc1ea4a5e8f483e","name":"modules.json","type":"application/json","lastModified":1604688817474.4,"size":246164}] 2d:{"title":"Exploration (hierarchical)","cells":[{"id":0,"value":"md`# Exploration (hierarchical)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"md`---\n## Let's get some data!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"viewof dataFile = fileInput({\n initialValue: FileAttachment(\"modules.json\").blob(),\n accept: \".csv,.json\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":484,"value":"rawData","pinned":false,"hidden":false,"mode":"ojs"},{"id":1479,"value":"md`Does our data structure need to be changed?`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":622,"value":"md`---\n## Finding and using other charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1513,"value":"circlePack","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":1512,"value":"import {chart as circlePack} with {\n parsedData as data,\n} from \"@d3/circle-packing-monochrome\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1547,"value":"treemap","pinned":true,"hidden":false,"mode":"ojs"},{"id":1546,"value":"import {chart as treemap} with {\n parsedData as data\n} from \"@d3/treemap-by-count\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1599,"value":"// tidyTree","pinned":true,"hidden":false,"mode":"ojs"},{"id":1555,"value":"import {chart as tidyTree} with {\n parsedData as data\n} from \"@d3/tidy-tree\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1614,"value":"bubbleChart","pinned":true,"hidden":false,"mode":"ojs"},{"id":1616,"value":"bubbleChartData = parsedData[\"children\"].map(({children, ...d}) => ({...d, group: d[\"name\"]}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1581,"value":"import {chart as bubbleChart} with {\n bubbleChartData as data\n} from \"@d3/bubble-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1474,"value":"md`---\n# Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-delaunay@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"import {move, fromPairs, flatten, sum} from \"@wattenberger/chart-utility-functions\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"import { getHistogramOf } from \"@wattenberger/histograms\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1171,"value":"import {getHorizontalBarChartOf} from \"@wattenberger/horizontal-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"import {getMetricType, getMetricAccessor, getMatrix} from \"@wattenberger/matrix\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"import {checkbox, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"import {fileInput} from \"@mbostock/file-input-with-initial-value\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"import { listInput } from \"@harrislapiroff/list-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"import { getLineChart } from \"@wattenberger/line-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"import { getScatterPlot } from \"@wattenberger/scatter-plot\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}