31:Td3c,chart = { const container = html`

`; ciudades.forEach((c) => { // c.x = xScale(c[xAttrib]); // c.y = yScale(c[groupBy]) + yScale.bandwidth()/2; c.r = rScale(c.total_votantes); }); const canvas = d3 .select(container) .select("canvas") .attr("width", width + "px") .attr("height", height + "px") .node(); const svg = d3 .select(container) .select("svg") .attr("width", width + "px") .attr("height", height + "px") .style("position", "absolute") .style("top", "0px") .style("left", "0px") .style("pointer-events", "none"); svg .append("g") .call(d3.axisLeft(yScale)) .attr("transform", `translate(${xScale.range()[0] - 50}, 0)`) .selectAll(".domain") .remove(); svg .append("text") .attr("fill", "black") .attr("x", 20) .attr("y", margin.top) .style("font-size", 14 + "pt") .style("text-anchor", "start") .text(groupBy.charAt(0).toUpperCase() + groupBy.slice(1)); const xAxisG = svg .append("g") .call( d3 .axisTop(xScale) .tickValues(d3.range(0, 0.1, 0.005)) .tickFormat(d3.format(".2%")) .tickSize(-height) ) .attr("transform", `translate(0, ${yScale.range()[0]})`); xAxisG.selectAll(".domain").remove(); xAxisG .append("text") .attr("fill", "black") .attr("x", width - margin.right) .attr("y", -40) .style("font-size", 14 + "pt") .style("text-anchor", "end") .text("Casos por votantes"); const ctx = canvas.getContext("2d"); scaleCanvas(canvas, ctx, width, height); let anim; let needRedrawing = true; function redraw() { if (needRedrawing) { needRedrawing = false; ctx.fillStyle = "#eee"; ctx.fillRect(0, 0, width, height); // console.log("draw nodes", data[0].x, data[0].y); drawNodes(ciudades, ctx); } else { // console.log("not redrawing"); } window.cancelAnimationFrame(anim); anim = window.requestAnimationFrame(redraw); } function ticked() { needRedrawing = true; } // yield container; console.log("Start simulation"); const simulation = d3 .forceSimulation(ciudades) .velocityDecay(0.7) .force("collision", d3.forceCollide((d) => d.r + 0.1).iterations(4)) .force("x", d3.forceX((d) => xScale(d[xAttrib])).strength(0.3)) // .force("y", d3.forceY(height/2)) .force( "y", d3.forceY((d) => yScale(d[groupBy])) ); // .force("y", d3.forceY(d => yScale(d[groupBy]) + yScale.bandwidth()/2)); simulation.on("tick", ticked); //warm up // for (let i=0; i<100; i++) simulation.tick(); // simulation.restart(); // simulation.alphaTarget(0.3).restart(); window.cancelAnimationFrame(anim); anim = window.requestAnimationFrame(redraw); invalidation.then(() => { console.log("cleaning up"); simulation.stop(); window.cancelAnimationFrame(anim); }); d3.select(canvas).on("mousemove", () => onMouseMove(canvas, d3.select(container).select("#tooltip"), simulation) ); container.canvas = canvas; container.simulation = simulation; simulation.tick(); ticked(); daysSelected; redraw(); yield container; }32:T4e6,// https://gist.github.com/callumlocke/cc258a193839691f60dd function scaleCanvas(canvas, context, width, height) { // assume the device pixel ratio is 1 if the browser doesn't specify it const devicePixelRatio = window.devicePixelRatio || 1; // determine the 'backing store ratio' of the canvas context const backingStoreRatio = ( context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1 ); // determine the actual ratio we want to draw at const ratio = devicePixelRatio / backingStoreRatio; if (devicePixelRatio !== backingStoreRatio) { // set the 'real' canvas size to the higher width/height canvas.width = width * ratio; canvas.height = height * ratio; // ...then scale it back down with CSS canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; } else { // this is a normal 1:1 device; just scale it simply canvas.width = width; canvas.height = height; canvas.style.width = ''; canvas.style.height = ''; } // scale the drawing context so everything will work at the higher ratio context.scale(ratio, ratio); }33:[{"id":"542bdda0f5627d2b99c3f1170ac1de2f053a179780de86dc455a1126deabeeafbb587dbeaf0e4c73578eb5aee700841a3cb7009fc28ee0dcee04618e265b3f27","href":"https://static.observableusercontent.com/files/542bdda0f5627d2b99c3f1170ac1de2f053a179780de86dc455a1126deabeeafbb587dbeaf0e4c73578eb5aee700841a3cb7009fc28ee0dcee04618e265b3f27","name":"segunda_vuelta_presidencial.csv","type":"text/csv","lastModified":1596721174298.069,"size":85686}] 2f:{"title":"Coronavirus Colombia por ciudades (WIP)","cells":[{"id":0,"value":"md`# Coronavirus Colombia por ciudades (WIP)\n\nCómo están las ciudades Colombianas con el Coronavirus?\n\nArrastre la barra de tiempo para analizar un periodo diferente\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"viewof maxDate = slider({\n min: +countsByDate[1].key,\n max: d3.max(countsByDate, d => +d.key),\n step:24*3600*1000\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"new Date(maxDate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"viewof daysSelected = vegaSelected(daysChartSpec);","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1039,"value":"ciudades.map(d => d[xAttrib])","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"viewof r = slider({\n min:1,\n max:50,\n value:2,\n step:1,\n title: \"Radio\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"viewof groupBy = select({\n options:Object.keys(ciudades[0]),\n title: \"Agrupar por\",\n value: \"departamento\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"viewof colorBy = select({\n options:[\"casos_por_votantes\", \"casos\"],\n value: \"casos_por_votantes\",\n title: \"Color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"viewof xAttrib = select({\n options:[\"casos_por_votantes\", \"total_casos\"],\n value: \"casos_por_votantes\",\n title: \"x\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"viewof maxX = slider({\n min: 0.0001,\n max: 0.1,\n step: 0.0001,\n value: 0.01\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"// swatches({color: colorScale})\nlegend({color: colorScale})","pinned":true,"hidden":false,"mode":"ojs"},{"id":796,"value":"colorScale.domain()","pinned":true,"hidden":false,"mode":"ojs"},{"id":591,"value":"aWeek = 7*24*3600*1000;","pinned":true,"hidden":false,"mode":"ojs"},{"id":598,"value":"aWeekAgo = new Date()- aWeek","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"twoWeeksAgo = aWeekAgo - aWeek","pinned":true,"hidden":false,"mode":"ojs"},{"id":552,"value":"daysChartSpec = {\n console.log(\"vega\");\n const brush = vl\n .selectInterval(\"date\")\n .encodings(\"x\")\n .init({ x: [twoWeeksAgo, aWeekAgo] });\n\n return vl\n .markBar({ tooltip: true })\n .select(brush)\n .data(countsByDate.filter(d => d.key <= maxDate))\n .encode(\n vl.x().fieldT(\"key\"),\n vl.y().fieldQ(\"value\"),\n vl.opacity().fieldQ(\"Confiabilidad\")\n )\n .width(width - 200)\n .toSpec();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"onMouseMove = (canvas, selection, simulation) => {\n console.log(\"mouse move\");\n\n // if (!d3.event.active) simulation.alphaTarget(0);\n\n const mousePos = getMousePos(canvas, d3.event);\n\n console.log(\"mouse pos\", mousePos);\n\n var node = simulation.find(mousePos.x, mousePos.y);\n console.log(\"node\", node);\n \n if (node) highlightNode(node, selection);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"//https://stackoverflow.com/questions/17130395/real-mouse-position-in-canvas\nfunction getMousePos(canvas, evt) {\n var rect = canvas.getBoundingClientRect();\n return {\n x: evt.clientX - rect.left,\n y: evt.clientY - rect.top\n };\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"highlightNode = function(node, svg) {\n if (!node) return;\n svg\n // .attr(\"dy\", chart.rAttr(node) * 2 + 15 + \"px\")\n // .attr(\"dx\", (chart.rAttr(node) * 2) + \"px\")\n .style(\"left\", node.x + \"px\")\n .style(\"top\", node.y + \"px\") \n // .attr(\"transform\", \"translate(\" + node.x + \",\" + node.y + \")\")\n .text( node.municipio);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"drawNodes = (nodes, ctx) => { \n const xd = xScale.domain();\n for(let n of nodes) {\n ctx.beginPath();\n ctx.fillStyle= colorScale(n[colorBy]); \n ctx.moveTo(n.x, n.y);\n ctx.arc(n.x, n.y, n.r, 0, 2*Math.PI); \n ctx.fill();\n \n }\n\n ctx.fillStyle=\"black\";\n ctx.textAlign=\"center\";\n ctx.beginPath(); \n for(let n of nodes) {\n if (n.total_votantes>300000 || n.casos_por_votantes > (xd[1]-xd[0])/4) {\n ctx.moveTo(n.x, n.y);\n ctx.fillText(n.municipio, n.x, n.y);\n // ctx.stroke();\n }\n }\n\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"margin = ({\n left: 140,\n right: 20,\n top: 40,\n bottom: 10\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"xScale = {\n // daysSelected;\n return (\n d3\n .scalePow()\n .exponent(0.2)\n // .domain(d3.extent(ciudades, d => d[xAttrib]))\n .domain([0, maxX])\n .range([margin.left, width - margin.right])\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"// yScale = {\n// // daysSelected;\n// // return d3.scaleLinear()\n// return d3.scaleBand()\n// .domain(d3.set(ciudades.map(d => d[groupBy])).values())\n// // .domain(d3.extent(ciudades, d => d[groupBy] ))\n// .range([margin.top, height-margin.bottom]);\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":918,"value":"yScale = {\n const deptos = d3.rollups(ciudades, v => d3.sum(v, e => e.total_votantes), d => d.departamento)\n .sort((a,b) => b[1]-a[1]);\n let sum = 0;\n const deptosStacked = deptos.map(dep => { \n const res = [\n dep[0],\n sum + dep[1]/2\n ];\n sum+=dep[1];\n return res;\n });\n\n const y = d3.scaleLinear().domain([0, sum]).range([margin.top, height-margin.bottom]);\n return d3.scaleOrdinal()\n .domain(deptosStacked.map(d=> d[0]))\n .range(deptosStacked.map(d=> y(d[1])));\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"rScale = {\n return d3.scalePow()\n .exponent(0.5)\n .domain([0, 5*10**6])\n .range([r, 30]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"// colorScale = d3.scaleOrdinal(d3.schemeCategory10)\n// .domain(d3.set(data.map(d => d[colorBy])).values())\ncolorScale = d3.scaleSequential(d3.interpolateOrRd).domain([0, maxX / 3])\n// .domain([0 , d3.max(ciudades.map(d => d[colorBy]))/2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"md`# Casos por ciudad`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"countsByCity = {\n console.log(\"compute data\", daysSelected);\n if (daysSelected && daysSelected.date) { \n cs.fis.filter(daysSelected.date.key);\n } else {\n cs.fis.filter([twoWeeksAgo, aWeekAgo]);\n }\n\n return cs.cityGroup.all()\n .filter(d => d.key)\n // .map(d => {\n // const ciudad = dCiudades.get(+d.key);\n // if (ciudad)\n // return {\n // key: d.key,\n // casos: d.value,\n // ciudad: ciudad.municipio,\n // depto: ciudad.departamento,\n // total_votantes: ciudad.total_votantes,\n // casos_por_votantes: d.value/ciudad.total_votantes,\n // r: rScale(ciudad.total_votantes),\n // c: ciudad\n // };\n // else \n // console.log(\"ciudad no encontrada\", d[0])\n // })\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":536,"value":"countsByDate = cs.fisGroup.all()\n .filter(d => d.key!==\"Asintomático\")\n .map(d => ({...d, \"Confiabilidad\": d.key < aWeekAgo ? 1 : (new Date()-d.key)/aWeekAgo }))\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"cs = {\n const cs = crossfilter(rawData);\n cs.city = cs.dimension((d) => d.ciudad_municipio);\n cs.fis = cs.dimension((d) => dateParse(d.fis));\n cs.cityGroup = cs.city.group();\n cs.fisGroup = cs.fis.group();\n return cs;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":513,"value":"crossfilter = require(\"crossfilter2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"// rawData = loadSocrata(\"https://www.datos.gov.co/resource/gt2j-8ykr.csv\", {\n// progressive: false\n// })\nrawData = fetch(\n \"https://www.datos.gov.co/resource/gt2j-8ykr.csv?$order=id_de_caso DESC&$limit=50000\"\n)\n .then((res) => res.text())\n .then(d3.csvParse)\n .then((res) => res.map((d) => ((d.fis = d[\"fecha_inicio_sintomas\"]), d)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"dCiudades = new Map(rawCiudades.map(d => [d.dane, d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":792,"value":"rawCiudades = FileAttachment(\"segunda_vuelta_presidencial.csv\")\n .text()\n .then(res => d3.csvParse(res, d3.autoType))\n \n .then(res => res.filter(d => {\n d.alineacionPolitica = (d[\"iván duque\"]-d[\"gustavo petro\"])/d.total_votantes;\n return d.departamento!==\"Consulados\"}\n ))","pinned":true,"hidden":false,"mode":"ojs"},{"id":705,"value":"ciudades = {\n const ciudades = rawCiudades;\n \n countsByCity.forEach(d => {\n const ciudad = dCiudades.get(+d.key);\n if (!ciudad) { \n console.log(\"Ciudad not found\", d); \n return;\n }\n ciudad.casos= d.value;\n ciudad.casos_por_votantes= d.value/ciudad.total_votantes;\n\n // ciudad.y=100;\n // ciudad.r = rScale(ciudad.total_votantes);\n // ciudad.x = xScale(ciudad[xAttrib])\n // ciudad.y = yScale(ciudad[groupBy])\n });\n\n return ciudades;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"// poblacion = FileAttachment(\"Departamentos_y_municipios_de_Colombia.csv\").text().then(res => d3.csvParse(res, d3.autoType))","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"dateParse = d3.timeParse(\"%Y-%m-%d 00:00:00\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1021,"value":"rawData.map((d) => dateParse(d.fis))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1023,"value":"rawData.map((d) => d.fis)","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"import {slider, select, checkbox} from \"@jashkenas/inputs\" ","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"import {swatches, legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"import {loadSocrata} from \"@john-guerra/socrata-load-multiples-pages\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"import {vl} from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":550,"value":"import { vegaSelected } from \"@john-guerra/vega-selected\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}