2c:null 2d:["$","title",null,{"children":"Performance large CSV and worker | ggojedap | Observable"}] 32:T432,dashboard = html`

Periodo registrado:

${viewof year}

Tipo

Fecha

Etnia

Localidad

`;33:T674,onClickFunction = function (e, data){ console.log(e.target); let thisItem = d3.select(this); let parent = d3.select(thisItem.node().parentNode); let isSelected = thisItem.classed("selected"); let selectedItems = parent.selectAll(".item.selected"); // nothing selected yet if (selectedItems.size() == 0) { parent.selectAll(".item") .classed("unselected", true); thisItem .classed("selected", true) .classed("unselected", false); } else if (selectedItems.size() == 1) { // only one element is currently selected if (isSelected) { // is this the element clicked? parent.selectAll(".item") .classed("selected", false) .classed("unselected", false); } else { // this element was not clicked, but another thisItem .classed("selected", true) .classed("unselected", false); } } else { // multiple elements already selected thisItem .classed("selected", !isSelected) .classed("unselected", isSelected); } // check again selected elements before update filters selectedItems = parent.selectAll(".item.selected"); let keys = []; selectedItems.each(function (d) { keys.push(d.key); }); console.log(keys); // if not keys, no filters // or apply found keys as filters for this dimension (chart) worker.postMessage({chart: parent.attr("id"), keys: keys}); // and update all charts update(); }34:T477,workerCode = ` importScripts("https://unpkg.com/d3@7", "https://unpkg.com/crossfilter2"); let parseTime = d3.timeParse("%Y-%m-%d"); d3.csv("http://127.0.0.1:5500/data/${year.file}") .then(function(data){ data.forEach(function(e, i){ e.mes = e.fecha.substring(0, 7); e.fecha = parseTime(e.fecha); }); const keys = Object.keys(data[0]); const cs = crossfilter(data); cs.dims = new Map(); cs.groups = new Map(); cs.computed = new Map(); for (let k of keys) { const dim = cs.dimension(d => d[k]); cs.dims.set(k, dim); cs.groups.set(k, dim.group()); cs.computed.set(k, dim.group().all()); } onmessage = event => { console.log(event.data); cs.dims.get(event.data.chart) .filter(event.data.keys.length === 0 ? null : d => event.data.keys.includes(d)); cs.computed.set(event.data.chart, cs.dims.get(event.data.chart).group().all()); postMessage(cs.computed); } onerror = event => { console.error(event.message); } postMessage(cs.computed); })`;35:[] 30:{"id":"bba2fcdd2d712b6c","slug":"performance-large-csv-and-worker","title":"Performance large CSV and worker","thumbnail":"d0ad924c739ea7a54d67b1d206a7fc64a9bfa6dc64fa3ce642cc55f400b04a49","access_level":"public","create_time":"$D2022-04-13T15:44:56.461Z","update_time":"$D2022-04-30T21:09:37.270Z","view_time":null,"first_public_time":"$D2022-04-17T17:37:08.508Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"9248b272e1331053","login":"ggojedap","name":"ggojedap","avatar_url":"https://avatars-next.observableusercontent.com/b10c02becc9dd1f565b151a6cd5265a75cddf92155f5a3f65c9dc8ba8482cd24","tier":"starter_2024","bio":""},"version":720,"publish_version":720,"role":null,"authored":false,"authors":[{"type":"individual","id":"e00cf9378b559fc6","login":"ggojedap","name":"ggojedap","avatar_url":"https://avatars-next.observableusercontent.com/b10c02becc9dd1f565b151a6cd5265a75cddf92155f5a3f65c9dc8ba8482cd24","tier":null,"bio":""}],"members":[{"type":"individual","id":"e00cf9378b559fc6","login":"ggojedap","name":"ggojedap","avatar_url":"https://avatars-next.observableusercontent.com/b10c02becc9dd1f565b151a6cd5265a75cddf92155f5a3f65c9dc8ba8482cd24","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Performance large CSV and worker","cells":[{"id":0,"value":"# Performance large CSV and worker\n\nWith a large process (loading a big file and building up the crossfilter object) the animated gif stops and the response of the window (buttons, contextual menu, mouse clicks) decreases notably.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":655,"value":"viewof year = Inputs.select(\n index.sort((a, b) => b.year - a.year), \n {\n label: html`Año: ⏳`,\n format: x => x.year,\n value: index[0].year\n }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"config_obj = ({\n etnia: {\n x: \"value\",\n y: \"key\",\n container: \"#chart-3\",\n ratio: 1,\n type: RowChart,\n data: data.get(\"etnia\").sort((a,b) => b.value > a.value),\n config: {\n yTicksMaxLen: 12,\n marginLeft: 90\n }\n },\n tipo: {\n x: \"key\",\n y: \"value\",\n container: \"#chart-1\",\n ratio: 1,\n type: PieChart,\n data: data.get(\"tipo\"),\n config: {\n innerRadius: 36\n }\n },\n localidad: {\n x: \"value\",\n y: \"key\",\n container: \"#chart-4\",\n ratio: 1,\n type: RowChart,\n data: data.get(\"localidad\").sort((a,b) => b.value > a.value),\n config: {\n yTicksMaxLen: 24,\n marginLeft: 90,\n color: \"#A971C9\"\n }\n },\n mes: {\n x: \"key\",\n y: \"value\",\n container: \"#chart-2\",\n ratio: 2,\n type: BarChart,\n data: data.get(\"mes\"),\n config: {\n marginLeft: 36,\n color: \"#FFC34A\",\n xIsTime: true,\n dataTime: data.get(\"fecha\")\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"charts = new Map();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"dashBuilder = {\n\n // configure and create a chart for each variable\n for (let v of [\"etnia\", \"tipo\", \"localidad\", \"mes\"]) {\n \n let current = config_obj[v]\n // skip if this var is not present in the config_object\n if(current == undefined) continue;\n \n // apply the same event to all charts\n // use clicked item as filter for all charts\n if (current.config === undefined) current.config = {};\n current.config.onClick = onClickFunction;\n\n // create the chart using info from config_obj\n const chart = current.type(width)\n .chartName(v)\n .width(innerWidth(current.container))\n .height(innerWidth(current.container) / current.ratio)\n .x(current.x)\n .y(current.y)\n .config(current.config);\n charts.set(v, chart); // store in map \n }\n\n // run an update (render charts) first time\n update();\n\n // return a function to be called from other cells\n return \"the wizard's hat, create the graphs dynamically\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"// update (run) functions for all charts\nfunction update() {\n for (const el of [\"etnia\", \"tipo\", \"localidad\", \"mes\"]) {\n let v = config_obj[el];\n if(v == undefined) continue; \n d3.select(v.container)\n .datum(v.data)\n .call(charts.get(el));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"mutable data = [];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"updateDataFromWorker = worker.onmessage = e => {\n mutable data = e.data;\n d3.select(\"#loading\").classed(\"d-none\", true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"worker = {\n const blobURL = URL.createObjectURL(new Blob([workerCode], {type: 'application/javascript'}));\n const worker = new Worker(blobURL);\n URL.revokeObjectURL(blobURL);\n d3.select(\"#loading\").classed(\"d-none\", false);\n return worker;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"index = d3.json(\"http://127.0.0.1:5500/data/cio-index.json\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":578,"value":"css = html``;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"style=html`css`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"import {PieChart} from \"@ggojedap/reusable-pie-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"import {RowChart} from \"@ggojedap/reusable-row-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"import {BarChart} from \"@ggojedap/reusable-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"import {parseTime, innerWidth, palettes} from \"@ggojedap/utilities\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"