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":"8123d88a5e798937b42277d15eac6f4d2ab2a1ed06cb93e2cbe5462f2072e66d0c727934b2cf8754782ba7c28a780bca4404b93d38496794bdb5d8ab6861ddb3","href":"https://static.observableusercontent.com/files/8123d88a5e798937b42277d15eac6f4d2ab2a1ed06cb93e2cbe5462f2072e66d0c727934b2cf8754782ba7c28a780bca4404b93d38496794bdb5d8ab6861ddb3","name":"nyc-weather@1.csv","type":"text/csv","lastModified":1604688798729.668,"size":75368}] 2d:{"title":"Exploration (flat)","cells":[{"id":0,"value":"md`# Exploration (flat)`","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(\"nyc-weather@1.csv\").blob(),\n accept: \".csv,.json\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"rawData = !dataFile[\"name\"] || (dataFile[\"name\"] || \"\").endsWith(\".csv\") ? d3.csvParse(await Files.text(dataFile)) :\n (dataFile[\"name\"] || \"\").endsWith(\".json\") ? JSON.parse(await Files.text(dataFile)) :\n []","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"rawData[0]","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 = rawData.map(d => ({\n ...d,\n \n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1408,"value":"parsedData[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"md`---\n## Got the data! Let's look at the basic structure`","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"getMatrix(data, {dateMetrics, visibleMetrics, colorScale: matrixColorScale})","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"viewof visibleMetrics = select({\n title: \"Visible metrics\",\n options: allMetrics,\n value: allMetrics,\n multiple: true,\n height: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1039,"value":"viewof dateMetrics = {\n const title = \"Datetime metrics\"\n const wrapper = html`

${title}

`;\n\n const input = listInput({\n input: value => select({\n options: allMetrics,\n value,\n }),\n value: allMetrics.filter(d => [\"time\", \"date\", \"datetime\"].includes(d.toLowerCase())),\n })\n \n wrapper.append(input)\n wrapper.value = input.value\n \n return wrapper\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"viewof matrixColorScale = select({\n title: \"Color scale\",\n options: [\n \"interpolateRdYlBu\",\n \"interpolateRdYlGn\",\n \"interpolatePiYG\",\n \"interpolateSpectral\",\n \"interpolateBlues\",\n \"interpolateGreys\",\n \"interpolatePurples\",\n \"interpolateTurbo\",\n \"interpolateViridis\",\n \"interpolateInferno\",\n \"interpolateMagma\",\n \"interpolatePlasma\",\n \"interpolateCividis\",\n \"interpolateWarm\",\n \"interpolateCool\",\n \"interpolateCubehelixDefault\",\n \"interpolateBuGn\",\n \"interpolateBuPu\",\n \"interpolateGnBu\",\n \"interpolateOrRd\",\n \"interpolatePuBuGn\",\n \"interpolatePuBu\",\n \"interpolatePuRd\",\n \"interpolateRdPu\",\n \"interpolateYlGnBu\",\n \"interpolateYlGn\",\n \"interpolateYlOrBr\",\n \"interpolateYlOrRd\",\n \"interpolateRainbow\",\n \"interpolateSinebow\",\n ],\n value: \"interpolatePuBu\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"data = {\n let data = [...parsedData]\n allMetrics.forEach(metric => {\n const type = getMetricType(data.map(d => d[metric]), metric, dateMetrics)\n const accessor = getMetricAccessor(type)\n if (metric == \"time\") console.log(metric, type, accessor(data[0][metric]), data[0][metric])\n data = data.map(d => ({...d, [metric]: accessor(d[metric])}))\n })\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"allMetrics = Object.keys(rawData[0]).sort()","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"md`---\n## Okay, now let's focus on two metrics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1231,"value":"viewof metric1 = select({\n title: \"Metric 1\",\n options: allMetrics,\n value: allMetrics[0],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"metric1Raw = d => d[metric1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"metric1Values = data.map(metric1Raw)","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"({\n extent: d3.extent(metric1Values).join(\", \"),\n mean: d3.mean(metric1Values),\n median: d3.median(metric1Values),\n stdev: d3.deviation(metric1Values),\n uniqueValues: [...new Set(metric1Values)],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"getHistogramOf(data, metric1Raw)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1235,"value":"viewof metric2 = select({\n title: \"Metric 2\",\n options: allMetrics,\n value: allMetrics[1],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"metric2Raw = d => d[metric2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"metric2Values = data.map(metric2Raw)","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"({\n extent: d3.extent(metric2Values).join(\", \"),\n mean: d3.mean(metric2Values),\n median: d3.median(metric2Values),\n stdev: d3.deviation(metric2Values),\n uniqueValues: [...new Set(metric2Values)],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"getHistogramOf(data, metric2Raw)","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"getLineChart(data, [metric1, metric2, metric3])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1304,"value":"viewof metric3 = select({\n title: \"Metric 3\",\n options: allMetrics,\n value: allMetrics[2],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1310,"value":"metric3Raw = d => d[metric3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"viewof tooltipMetrics = select({\n title: \"Metrics in tooltip\",\n options: allMetrics,\n value: allMetrics.slice(0, 3),\n multiple: true,\n height: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1349,"value":"viewof colorScale = select({\n title: \"Color scale\",\n options: [\n \"interpolateRdYlBu\",\n \"interpolateRdYlGn\",\n \"interpolatePiYG\",\n \"interpolateSpectral\",\n \"interpolateBlues\",\n \"interpolateGreys\",\n \"interpolatePurples\",\n \"interpolateTurbo\",\n \"interpolateViridis\",\n \"interpolateInferno\",\n \"interpolateMagma\",\n \"interpolatePlasma\",\n \"interpolateCividis\",\n \"interpolateWarm\",\n \"interpolateCool\",\n \"interpolateCubehelixDefault\",\n \"interpolateBuGn\",\n \"interpolateBuPu\",\n \"interpolateGnBu\",\n \"interpolateOrRd\",\n \"interpolatePuBuGn\",\n \"interpolatePuBu\",\n \"interpolatePuRd\",\n \"interpolateRdPu\",\n \"interpolateYlGnBu\",\n \"interpolateYlGn\",\n \"interpolateYlOrBr\",\n \"interpolateYlOrRd\",\n \"interpolateRainbow\",\n \"interpolateSinebow\",\n ],\n value: \"interpolatePlasma\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"getScatterPlot(data, [metric1, metric2, metric3], {colorScale, tooltipMetrics})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1538,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1539,"value":"vl.markBar()\n .data(data)\n .encode(\n vl.x().fieldQ(metric1).bin({maxbins: xBins}),\n vl.y().fieldQ(metric2).bin({maxbins: yBins}),\n vl.color().count()\n )\n .width(500)\n .height(500)\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"viewof xBins = slider({title: \"x bins\", min: 0, max: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1546,"value":"viewof yBins = slider({title: \"y bins\", min: 0, max: 50})","pinned":false,"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} 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"}