📷 instagram.com/nestor2509
Just for fun
canvas = {
const darRotacion = (coor) => {
return [-coor[0], -coor[1]];
};
let canvas = DOM.context2d(width, width).canvas;
let ctx = canvas.getContext("2d");
let rc = rough.canvas(canvas);
// const projection = d3.geoMercator()
// projection.fitSize([width,width/2], colombia)
const projection = d3.geoOrthographic().scale(200).rotate(darRotacion(0, 0));
let mapPath = d3.geoPath().projection(projection);
let rot = 0;
let timer = d3.timer(() => {
rot += 1;
ctx.rect(0, 0, width, width);
ctx.fillStyle = "#fff";
ctx.fill();
mapPath = d3.geoPath().projection(projection.rotate(darRotacion([rot, 0])));
ctx.beginPath(), mapPath(mundo), (ctx.fillStyle = "#000"), ctx.fill();
});
invalidation.then(() => timer.stop());
return canvas;
}
opciones = ({ roughness: 0, bowing: 0, simplification: 0 })
color_bw = ["#333", "#999", "#555", "#777"]
color = d3.schemePastel2
fillStyle = ['zigzag-line', 'dashed', 'hachure']
colombia = d3.json("https://gist.githubusercontent.com/nestorandrespe/2220a8f9d4095a2983f87504603d6ef1/raw/9bf7b991e80e21156cd04349df061cd2e44ef099/departamentos.json")
mundo_procesado = ({
type: "FeatureCollection",
features: mundo.features.map((d) => {
// d['fillStyle'] = fillStyle[Math.floor(Math.random() * fillStyle.length)]
// d["color"] = color_bw[Math.floor(Math.random() * color_bw.length)];
return d;
})
})
col_geojson = ({
type: "featureCollection",
features: colombia_outline
})
colombia_outline = mundo.features.filter(d=>d.properties.postal === 'CO')
mundo = d3.json("https://gist.githubusercontent.com/nestorandrespe/ac4c33022872c39d55da9b645527de2b/raw/7d848fb5faa553e9b8f6dfcf0279c3852c3dc0d4/World%2520contours%2520low.json")
rough = (await import("https://cdn.skypack.dev/roughjs")).default
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.
