2c:null 2d:["$","title",null,{"children":"Testing a reusable bar chart | ggojedap | Observable"}] 32:T45c,config_obj = ({ etnia: { x: "value", y: "key", container: "#chart-3", ratio: 1, type: RowChart, data: cs.groups.get("etnia").top(cs.groups.get("etnia").size()), config: { yTicksMaxLen: 12, marginLeft: 90 } }, tipo: { x: "key", y: "value", container: "#chart-1", ratio: 1.5, type: BarChart, data: cs.groups.get("tipo").all(), config: { marginLeft: 36, color: "#7BB2B1" } }, localidad: { x: "value", y: "key", container: "#chart-4", ratio: 1, type: RowChart, data: cs.groups.get("localidad").top(cs.groups.get("localidad").size()), config: { yTicksMaxLen: 24, marginLeft: 90, color: "#A971C9", xIsTime: true, dataTime: cs.groups.get("fecha").all() } }, mes: { x: "key", y: "value", container: "#chart-2", ratio: 2.5, type: BarChart, data: cs.groups.get("mes").all(), config: { marginLeft: 36, marginBottom: 64, color: "#FFC34A", xIsTime: true, dataTime: cs.groups.get("fecha").all() } } })33:Taa8,dashBuilder = { // a new map to store the chart functions const charts = new Map(); // configure and create a chart for each variable for (let v of variables) { let current = config_obj[v] // skip if this var is not present in the config_object if(current == undefined) continue; // apply the same event to all charts // use clicked item as filter for all charts current.config.onClick = function (e, data) { 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) cs.dims.get(v).filter(keys.length === 0 ? null : d => keys.includes(d)); // and update all charts update(); } // create the chart using info from config_obj const chart = current.type(width) .width(innerWidth(current.container)) .height(innerWidth(current.container) / current.ratio) .x(current.x) .y(current.y) .config(current.config); charts.set(v, chart); // store in map } // update (run) functions for all charts function update() { for (const el of variables) { let v = config_obj[el]; if(v == undefined) continue; d3.select(v.container) .datum(v.data) .call(charts.get(el)); } } // run first time update(); // return a function to be called from other cells return update; }34:[{"id":"df991533a1a3ed95480cc754af3f1a5b65a6b07b059779b1ab94169beb3a9f2bde0ba6c1e6bc2f86cbe62e07d6721a1ab138321d000c028d7574e40c885dcb5d","href":"https://static.observableusercontent.com/files/df991533a1a3ed95480cc754af3f1a5b65a6b07b059779b1ab94169beb3a9f2bde0ba6c1e6bc2f86cbe62e07d6721a1ab138321d000c028d7574e40c885dcb5d","name":"violencia-sample-file.csv","type":"text/csv","lastModified":1649271698403.403,"size":144493}] 30:{"id":"d922675e17b11702","slug":"testing-reusable-bar-chart","title":"Testing a reusable bar chart","thumbnail":"942aa30f8615a6eac923f45704e026f7874eb9ccd32f9c02601100d2a3a19ffd","access_level":"public","create_time":"$D2022-03-24T15:12:40.099Z","update_time":"$D2022-04-16T20:50:37.399Z","view_time":null,"first_public_time":"$D2022-03-24T21:39:26.363Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"9248b272e1331053","login":"ggojedap","name":"ggojedap","avatar_url":"https://avatars-next.observableusercontent.com/b10c02becc9dd1f565b151a6cd5265a75cddf92155f5a3f65c9dc8ba8482cd24","tier":"starter_2024","bio":""},"version":860,"publish_version":860,"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":"Testing a reusable bar chart","cells":[{"id":0,"value":"# Testing a reusable bar chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":416,"value":"Using bootstrap to generate columns, here is a resizable, responsive dashboard, with interactive filters provided by [crossfilter](https://crossfilter.github.io/crossfilter/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"dashboard = html`

Tipo

Fecha

Etnia

\n\n

Localidad

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"## Configuration Object","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":421,"value":"The charts included in the \"dashboard\" are generated automatically, using a configuration object, with custom features for each one:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"## Dashboard builder","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":426,"value":"The dashbuilder is generated iterating the `config_obj` in the next function, where some common features are declared, as the behavior for click on each bar, the same for all charts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"If the screen size or space used by columns changes, the charts are updated, using the `innerWidth` of each container, to calculate the new dimensions of each chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":855,"value":"cs.groups.get(\"localidad\").top(5);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"cs = {\n const cs = crossfilter(data);\n\n cs.dims = new Map();\n cs.groups = new Map();\n \n for (let a of variables) {\n \n const dim = cs.dimension(d => d[a]);\n \n cs.dims.set(a, dim);\n cs.groups.set(a, dim.group());\n }\n \n return cs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"variables = Object.keys(data[0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":258,"value":"css = html``;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"style=html`css`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"crossfilter = require(\"crossfilter2\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"data = {\n const data = await FileAttachment(\"violencia-sample-file.csv\").tsv();\n\n data.forEach(function (d) {\n d.mes = d.fecha.substring(0, 7);\n d.fecha = parseTime(d.fecha);\n });\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"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":452,"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":818,"value":"import {parseTime, innerWidth} from \"@ggojedap/utilities\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"