3e:null 3f:["$","title",null,{"children":"Infracciones de tráfico en Cataluña | Jose Consuegra's Workspace | Observable"}] 45:T89b,chart = { const svg = d3.create("svg") .style("cursor", "default") .attr("viewBox", [0, 0, width, height]); const g = svg.selectAll(".waffle") .data(waffles) .join("g") .attr("class", "waffle"); if (!whole) { const numPerRow = Math.floor(width / (waffleSize + padding.x)); //const numPerRow = 3; g.attr("transform", (d, i) => { const r = Math.floor(i / numPerRow); const c = i - r * numPerRow; return `translate(${c * (waffleSize + padding.x)},${r * (waffleSize + padding.y)})` }); } const cellSize = scale.bandwidth(); const half = cellSize / 2; const cells = g.append("g") .selectAll(options.shape) .data(d => d) .join(options.shape) .attr("fill", d => d.index === -1 ? "#ddd" : color(d.index)); if (isRect) { cells.attr("x", d => scale(d.x)) .attr("y", d => whole ? 0 : scale(d.y)) .attr("rx", 3).attr("ry", 3) .attr("width", cellSize).attr("height", cellSize) } else { cells.attr("cx", d => scale(d.x) + half) .attr("cy", d => whole ? 0 : scale(d.y) + half) .attr("r", half); } if (whole) { cells.append("title").text(d => { const cd = chartData[d.index]; return `${cd.tipo}\n${cd.numero} (${cd.ratio}%)`; }); cells.transition() .duration(d => d.y * 100) .ease(d3.easeBounce) .attr(isRect ? "y" : "cy", d => scale(d.y) + (isRect ? 0 : half)); svg.transition().delay(550) .on("end", () => drawLegend(svg, cells)); } else { // Portion g.append("text") .style("font-weight", "bold") .attr("dy", "1.5em") .attr("text-anchor", "middle") .attr("fill", (d, i) => color(i)) .attr("transform", `translate(${waffleSize / 2},0)`) .text((d, i) => `${chartData[i].ratio}%`); g.append("g") .attr("transform", `translate(0,${waffleSize + padding.y / 2.5})`) .call(g => g.append("text").text((d, i) => chartData[i].tipo)) .call(g => g.append("text").attr("dy", "1em").text((d, i) => chartData[i].numero)) .attr("font-size","10px") .attr("font-family","Arial"); } return svg.node(); }46:[{"id":"527cc2706dc319d786eeffecf0a9826e822be14956e488daf0887d4b145866fae1fc0278699fd9952aa7102d45dbd5f21227a12d5b464e2c6a37ad6dffe46895","href":"https://static.observableusercontent.com/files/527cc2706dc319d786eeffecf0a9826e822be14956e488daf0887d4b145866fae1fc0278699fd9952aa7102d45dbd5f21227a12d5b464e2c6a37ad6dffe46895","name":"infracciones_por_anyo_cat_transformed@1.csv","type":"text/csv","lastModified":1698882698643.946,"size":10631}] 43:{"id":"fd575cc5451bafd8","slug":null,"title":"Infracciones de tráfico en Cataluña","thumbnail":"2e732705ab9df2e76a0e45572e235871eaa8835733676b484476720212a5f20f","access_level":"public","create_time":"$D2023-11-01T22:55:26.920Z","update_time":"$D2023-11-12T21:59:56.802Z","view_time":null,"first_public_time":"$D2023-11-02T15:13:19.951Z","has_unpublished_edits":null,"fork":{"id":"2cecde5741cc5888","slug":"waffle-chart","title":"Waffle Chart","owner":{"id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ae0209d3bbb963c2","login":"jose-consuegra-ws","name":"Jose Consuegra's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/439564f103492d9c3cf46aa5cd9776ac20427d1c41cb5d0aff674e489e3f8234","tier":"starter_2024","bio":"","following":false},"version":444,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e35b3a1957abe610","login":"jose-consuegra","name":"Jose Consuegra","avatar_url":"https://avatars-next.observableusercontent.com/a546c9f21c24b455fbfa29017230cd397a21f2760afd0b499129416b663390d9","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"e35b3a1957abe610","login":"jose-consuegra","name":"Jose Consuegra","avatar_url":"https://avatars-next.observableusercontent.com/a546c9f21c24b455fbfa29017230cd397a21f2760afd0b499129416b663390d9","tier":null,"role":"editor"},{"type":"team","id":"ae0209d3bbb963c2","login":"jose-consuegra-ws","name":"Jose Consuegra's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/439564f103492d9c3cf46aa5cd9776ac20427d1c41cb5d0aff674e489e3f8234","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Infracciones de tráfico en Cataluña","cells":[{"id":0,"value":"md`# Infracciones de tráfico en Cataluña\n\nDistribución de la tipología de infracciones de tráfico en Cataluña por años\n\nFuente: https://analisi.transparenciacatalunya.cat/Seguretat/Fets-penals-relatius-al-tr-nsit-coneguts-resolts-i/8bnm-yv7t\n\nGráfico basado en \"Waffle Chart\" de Eric Lo: https://observablehq.com/@analyzer2004/waffle-chart\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"viewof options = form(html`

\n Año: \n Estilo: \n Forma: \n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"drawLegend = (svg, cells) => {\n const legend = svg.selectAll(\".legend\")\n .data(chartData.map(d => d.tipo))\n .join(\"g\") \n .attr(\"opacity\", 1)\n .attr(\"font-size\", \"12px\")\n .attr(\"font-family\",\"Arial\")\n .attr(\"transform\", (d, i) => `translate(${waffleSize + 20},${i * 30})`)\n .on(\"mouseover\", highlight)\n .on(\"mouseout\", restore);\n\n legend.append(\"rect\")\n .attr(\"rx\", 3).attr(\"ry\", 3)\n .attr(\"width\", 30).attr(\"height\", 20)\n .attr(\"fill\", (d, i) => color(i)); \n\n legend.append(\"text\")\n .attr(\"dx\", 40)\n .attr(\"alignment-baseline\", \"hanging\")\n .text((d, i) => `${d} (${chartData[i].ratio}%)`);\n \n function highlight(e, d, restore) {\n const i = legend.nodes().indexOf(e.currentTarget);\n cells.transition().duration(500)\n .attr(\"fill\", d => d.index === i ? color(d.index) : \"#ccc\"); \n }\n \n function restore() {\n cells.transition().duration(500).attr(\"fill\", d => color(d.index))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"color = d3.scaleOrdinal(d3.schemeTableau10)\n .domain(sequence(chartData.length))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"scale = d3.scaleBand()\n .domain(sequence(10))\n .range([0, waffleSize])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"sequence = (length) => Array.apply(null, {length: length}).map((d, i) => i);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"anyo_vista = options.anyo","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"whole = options.style === \"whole\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"isRect = options.shape === \"rect\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"chartData = {\n const data = await FileAttachment(\"infracciones_por_anyo_cat_transformed@1.csv\").csv();\n\n return data.map(d => ({\n anyo : d.anyo,\n tipo: d.tipo, \n numero: d.numero, \n ratio: Math.round(d.ratio * 10) / 10\n })).filter(d => d.anyo == anyo_vista); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"waffles = {\n const array = [];\n if (whole) {\n const max = chartData.length; \n let index = 0, curr = 1, \n accu = Math.round(chartData[0].ratio), waffle = [];\n \n for (let y = 9; y >= 0; y--)\n for (let x = 0; x < 10; x ++) {\n if (curr > accu && index < max) {\n let r = Math.round(chartData[++index].ratio);\n while(r === 0 && index < max) r = Math.round(chartData[++index].ratio);\n accu += r;\n }\n waffle.push({x, y, index});\n curr++;\n } \n array.push(waffle);\n }\n else {\n chartData.map((d, i) => {\n let curr = 0, waffle = [];\n for (let y = 9; y >= 0; y--)\n for(let x = 0; x < 10; x ++) {\n waffle.push(({x, y, index: curr < Math.round(d.ratio) ? i : -1}));\n curr++;\n }\n array.push(waffle);\n });\n } \n return array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"width = 1024","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"height = {\n if (whole) {\n return 600\n } else {\n return 1400\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"padding = ({x: 10, y: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"waffleSize = whole ? width < height ? width : height : 300;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"