📷 instagram.com/nestor2509
md`# Dibujar una ruta con D3`
canvas = {
const svg = d3.create("svg").attr("viewBox", `0 0 ${width} ${width}`);
projection.fitSize([width / 3, width / 3], mundo.features[24].geometry);
const ruta_path = svg.selectAll("g").data([mundo.features]).join("g");
mundo.features.forEach((d, i) => {
console.log(d.properties.brk_name, i);
const mapPath = d3.geoPath(projection);
console.log(mapPath(d));
ruta_path
.append("path")
.attr("d", mapPath(d))
.attr("stroke", "#000")
.attr("fill", "none");
});
return svg.node();
}
projection = d3.geoMercator()
.translate([width/2, width/2])
ruta = d3.json('https://gist.githubusercontent.com/nestorandrespe/919d0f780d80dfd35b049e5146e62bab/raw/47e14e1341ce8ff49ced3077557470822e21332e/ruta_test.json')
d3 = require('d3@6')
mundo = d3.json(
"https://gist.githubusercontent.com/nestorandrespe/ac4c33022872c39d55da9b645527de2b/raw/7d848fb5faa553e9b8f6dfcf0279c3852c3dc0d4/World%2520contours%2520low.json"
)
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.
