31:T604,{ const context = this?.context || DOM.context2d(width, height); const nodes = byCities.length ? land.features : landState.features; const path2D = new Path2D(); if (drawMap) { pathCanvas.context(path2D)(byCities.length ? land : landState); } nodes.forEach((d) => (d.centroid = pathCanvas.centroid(d))); // function scramble() { // nodes.forEach(n => { // n.x = Math.random() * width; // n.y = 0; // }); // } const simulation = d3 .forceSimulation(nodes) .velocityDecay(0.3) .force("x", d3.forceX((d) => d.centroid[0]).strength(forceToCentroid)) .force("y", d3.forceY((d) => d.centroid[1]).strength(forceToCentroid)) // .force("charge", d3.forceManyBody()) .force( "collide", collide.length ? d3.forceCollide(r * collisionFactor).iterations(1) : null ) .on("tick", ticked); function ticked() { context.clearRect(0, 0, width, height); for (const n of nodes) { context.strokeStyle = "#fff"; context.fillStyle = color(n.properties.dpt); context.beginPath(); context.arc(n.x, n.y, r, 0, 2 * Math.PI); context.fill(); context.stroke(); } if (drawMap.length) { context.save(); context.beginPath(); context.strokeStyle = "black"; context.globalAlpha = 0.1; context.stroke(path2D); context.restore(); } } ticked(); invalidation.then(() => simulation.stop()); // save the context for reusal context.canvas.context = context; return context.canvas; }32:[{"id":"99d0387a82f7659d5d78ad39e36b86b582375bc289aab4d97c84b6b697a7e0e61c0f6cd5e903122d75da1427b8076bd851b7aeab5bd4f2f48298bbf404154854","href":"https://static.observableusercontent.com/files/99d0387a82f7659d5d78ad39e36b86b582375bc289aab4d97c84b6b697a7e0e61c0f6cd5e903122d75da1427b8076bd851b7aeab5bd4f2f48298bbf404154854","name":"colombia-municipios.json","type":"application/json","lastModified":1600526660894.072,"size":529388}] 2f:{"title":"Colombia as a Force","cells":[{"id":0,"value":"md`# Colombia as a Force\n\nWhen visualizing cities on a country map, one can get a lot of occlusion. Using d3 force collision forces can help you solve this problem `","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"viewof r = Inputs.range([0.1, 20], { step: 0.1, label: \"Radius\", value: 3 })\n// html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"viewof collisionFactor = Inputs.range([0.1, 2], {\n step: 0.01,\n value: 1.2,\n label: \"Collision Border (pct)\"\n})\n// html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"viewof forceToCentroid = Inputs.range([0.01, 2], {\n step: 0.01,\n value: 0.05,\n label: \"Force to centroid\"\n})\n// html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"viewof drawMap = Inputs.checkbox([\"Draw Map\"], { value: [\"Draw Map\"] })\n// html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"viewof byCities = Inputs.checkbox([\"By Cities\"], { value: [\"By Cities\"] })\n// html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"viewof collide = Inputs.checkbox([\"Collide\"], { value: [\"Collide\"] })\n// html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"swatches({ color })","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"height= 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"color = d3\n .scaleOrdinal(d3.quantize(d3.interpolateTurbo, depts.size))\n .domain(depts)","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"depts = new Set(landState.features.map(d => d.properties.dpt))","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"land = topojson.feature(mapData, {\n type: \"GeometryCollection\",\n geometries: mapData.objects.mpios.geometries\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"landState = topojson.feature(mapData, {\n type: \"GeometryCollection\",\n geometries: mapData.objects.depts.geometries\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"pathCanvas = d3.geoPath()\n .projection(d3.geoTransverseMercator()\n .rotate([74 + 30 / 60, -38 - 50 / 60])\n .fitExtent([[margin.left, margin.top], [width-margin.right, height-margin.bottom]], landState))","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"margin = { return { left: 20, top: 20, right:20, bottom: 20}}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"mapData = FileAttachment(\"colombia-municipios.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"topojson = require(\"topojson@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"import { swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}