Published
Edited
Apr 21, 2020
Insert cell
Insert cell
Insert cell
Insert cell
basicMap = {
const canvas = DOM.canvas(width, height);
const ctx = canvas.getContext('2d');
pathCanvas.context(ctx);
if(porMunis){
mapData.features.forEach((municipio) => {
ctx.fillStyle = filteredColors[Math.floor(Math.random() * Math.floor(6))];
ctx.beginPath();
pathCanvas(municipio);
ctx.fill();
});
}
ctx.strokeStyle = '#000';
ctx.beginPath();
if(porMunis) mapData.features.forEach((municipio) => { pathCanvas(municipio); });
else {
pathCanvas(landState)
ctx.fillStyle = "#5c5e67";
ctx.fill()
}
ctx.stroke();
return canvas;
}
Insert cell
filteredColors = [
"#f8be53",
"#d44f4a",
"#97cb70",
"#da8ff3",
"#4aa8a4",
"#5190f2",
"#ee883b"
]
Insert cell
porMunis
Insert cell
Insert cell
Insert cell
municipios = mapData
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
prevMapData = d3.json("https://gist.githubusercontent.com/john-guerra/95074aef40181d2b3b697c5624bec2b8/raw/c4631751a01d5ed9e95eca680b93232327284a54/colombia-municipios.json")
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more