31:T41c,chart = { // const encodingsOptions = ["x", "y", "r", "fill", "fx", "opacity"]; const encodingsObj = Object.fromEntries([ ["key", { field: "id", type: "quantitative" }], ...selectedAttributes.map((a, i) => [ encodings[i], { field: a, type: isNaN(data[0][a]) ? "nominal" : "quantitative", [encodings[i] === "column" && !isNaN(data[0][a]) ? "bin" : null]: true } ]) ]); let chart = vl .markCircle({ color: "grey", tooltip: { data: true } }) .encode(vl.order().fieldQ("id")) .data(data) .config({ axis: { grid: false }, scale: { zero: false } }) .title(`Visualizing ${selectedAttributes.length} attributes`) .width((width - 150) / (selectedAttributes.length <= 4 ? 1 : 6)) .height(400 / (selectedAttributes.length <= 6 ? 1 : 5)); if (selectedAttributes.length > 0) chart = chart.encode(encodingsObj); const render = await chart.render({ renderer: "svg" }); return animateSVG(this, render, {delay : (_, i) => i/10}); // return render; }32:T6d4,viewof attribsCount = { selectedAttributes; function getNewAttr(allAttrs, currentAttribs) { const remainingAttrs = allAttrs.filter((a) => !currentAttribs.includes(a)); return remainingAttrs.at(Math.floor(Math.random() * remainingAttrs.length)); } const addAttrib = html``; const removeAttrib = html``; const spanCount = html`${ viewof selectedAttributes.value.length }`; const target = ReactiveWidget(html` ${removeAttrib}

${spanCount} attributes

${addAttrib} `); function update(stopAnimation = false) { spanCount.textContent = viewof selectedAttributes.value.length; viewof selectedAttributes.dispatchEvent(new Event("input")); if (stopAnimation) { viewof animate.value = false; viewof animate.dispatchEvent(new Event("input")); } } target.incr = (evt) => { evt && evt.preventDefault(); evt && evt.stopPropagation(); viewof selectedAttributes.value = [ ...viewof selectedAttributes.value, getNewAttr(attrs, viewof selectedAttributes.value) ]; update(!!evt); }; target.decr = (evt) => { evt && evt.preventDefault(); evt && evt.stopPropagation(); viewof selectedAttributes.value = viewof selectedAttributes.value.slice( 0, viewof selectedAttributes.value.length - 1 ); update(!!evt); }; addAttrib.addEventListener("click", target.incr); removeAttrib.addEventListener("click", target.decr); return target; }33:[{"id":"c2dc76cfa5cefbd22db519ac20667bd71f2e892937732881a94632978b55680e957c081a0271ec7661c9968b3b943329fe941d779edcefe00111237eaea1d9f4","href":"https://static.observableusercontent.com/files/c2dc76cfa5cefbd22db519ac20667bd71f2e892937732881a94632978b55680e957c081a0271ec7661c9968b3b943329fe941d779edcefe00111237eaea1d9f4","name":"nutrients.csv","type":"text/csv","lastModified":1739994373823.129,"size":1146289},{"id":"0e3d52236c195bb921c1e10059c16bac8361433457ccab5d57c5b0c9b25b89c4e022383ffa985b8fdc97303585100ec665e04670bf4086da4346754470029b18","href":"https://static.observableusercontent.com/files/0e3d52236c195bb921c1e10059c16bac8361433457ccab5d57c5b0c9b25b89c4e022383ffa985b8fdc97303585100ec665e04670bf4086da4346754470029b18","name":"airbnb_sf_listings.csv","type":"text/csv","lastModified":1740518323766.96,"size":1399940}] 2f:{"title":"How many attributes can I visualize at once?","cells":[{"id":0,"value":"# How many attributes can I visualize at once?\n\nThe following chart will try to visualize ${viewof attribsCount} using\n${defaultDataset>1 ? \" your own data\" : \"the [FDA nutrients dataset](https://www.kaggle.com/datasets/demomaster/usda-national-nutrient-database)\"} (${data.length} rows, and ${attrs.length} attributes)\n\n${selectedAttributes.length>encodings.length ? `**Want more than ${encodings.length}? You should try [navio.dev](https://navio.dev)**` : \"\"}\n","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"viewof selectedAttributes = PersistInput(\n \"attrs\",\n multiAutoSelect(attrs, {\n label: \"What attributes you want to use?\",\n value: [\"fiber (g)\", \"saturated (g)\", \"carbohydrate (g)\", \"calories\"],\n format: (a, i) => html`${a} [${encodings[i] || \"🤷🏽‍♂️\"}]`\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"viewof animate = PersistInput(\n \"animate\",\n Inputs.toggle({ label: \"Continue animation demo\", value: this?.value })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"cs = conditionalShow(await navio(data, { attribs: selectedAttributes }), {\n label: \"Try with Navio\",\n showValueSummary: false,\n checked: this ? this.checked : false // keep previous value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"Inputs.table(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"encodings = [\"x\", \"y\", \"size\", \"fill\", \"column\", \"opacity\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"## Load your own data","pinned":false,"hidden":false,"mode":"md"},{"id":548,"value":"viewof data = dataInput({value: nutrients});","pinned":true,"hidden":false,"mode":"ojs"},{"id":533,"value":"viewof showInPlot = Inputs.toggle({label: \"Show using Plot\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":559,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":560,"value":"### Observable Plot?","pinned":false,"hidden":false,"mode":"md"},{"id":313,"value":"{\n if (!showInPlot) return html``;\n\n const encodings = [\"x\", \"y\", \"r\", \"fill\", \"fx\", \"opacity\"];\n return animateSVG(\n this,\n\n Plot.plot({\n fx: { tickFormat: null },\n // r: { range: [0, 15] },\n color: { legend: true },\n width: width,\n marks: [\n Plot.circle(\n data,\n Object.fromEntries(\n encodings.map((e, i) => [e, selectedAttributes[i]])\n )\n )\n ]\n }),\n {\n cssSelector: \"circle\",\n attributesToAnimate: [\"cx\", \"cy\", ...encodings],\n delay: (_, i) => i / 5\n }\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":566,"value":"mutable defaultDataset = 0;","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"{\n // Clear the selected attributes when changing the dataset\n data;\n viewof selectedAttributes.value = [];\n viewof selectedAttributes.dispatchEvent(new Event(\"input\"));\n mutable defaultDataset += 1;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":749,"value":"A widget for the + -","pinned":false,"hidden":false,"mode":"md"},{"id":437,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":611,"value":"{\n // Animation demo code\n // const root = viewof selection.value;\n // let currentChildrenI = 0,\n // newI = 0;\n\n const interval = setInterval(async () => {\n if (!animate) {\n return;\n }\n if (selectedAttributes.length >= 5) {\n clearInterval(interval);\n viewof animate.value = false;\n viewof animate.dispatchEvent(new Event(\"input\"));\n return;\n }\n\n viewof attribsCount.incr();\n viewof attribsCount.dispatchEvent(new Event(\"input\"));\n }, 2500);\n\n invalidation.then(() => {\n clearInterval(interval);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"attrs = Object.keys(data[0]).filter((a) => mutable defaultDataset > 1 || a !== \"name\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"nutrients = FileAttachment(\"nutrients.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":711,"value":"import {conditionalShow} from \"@john-guerra/conditional-show\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":677,"value":"import {navio} from \"@john-guerra/navio\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"ReactiveWidget = require(\"reactive-widget-helper\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"import {animateSVG} from \"@john-guerra/animate-svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"import {vl} from \"@vega/vega-lite-api-v5\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"import {dataInput} from \"@john-guerra/data-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"import {multiAutoSelect} from \"@john-guerra/multi-auto-select\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"import {PersistInput} from \"@john-guerra/persist-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":601,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}