{
const svg = d3.create('svg')
.attr('width', size.width)
.attr('height', size.height);
// create one path for each zip code
svg.selectAll("path")
.data(processed)
.join("path")
// use the geographic path generator to set the shape of the path
.attr("d", path)
// use the color scale to set the color of the path
.attr("fill", d =>color(d.properties.interest))
.attr("stroke", "none");
svg.selectAll("path_regions")
.data(regiones.features)
.join("path")
// use the geographic path generator to set the shape of the path
.attr("d", path_regiones)
// use the color scale to set the color of the path
.attr("fill", 'red')
.attr("fill-opacity",0.2)
.attr("stroke", "white");
return svg.node();
}
margin = ({ left: 20, right: 20, top: 20, bottom: 20 })
size = ({ height: 600, width: 500 })
shapes = FileAttachment("map_010_peru.json").json()
distritos = topojson.feature(shapes, shapes.objects.distritos)
distritos.features[0]
path = d3.geoPath().projection(projection)
path_regiones = d3.geoPath().projection(projection)
provincias = topojson.feature(shapes, shapes.objects.provincias)
regiones = topojson.feature(shapes, shapes.objects.regiones)
regionmesh = topojson.mesh(shapes, shapes.objects.regiones, (a, b) => a !== b)
provinciamesh = topojson.mesh(
shapes,
shapes.objects.provincias,
(a, b) => a !== b
)
projectionRegiones = d3.geoMercator().fitExtent(
[
[margin.left, margin.top],
[size.width - margin.right, size.height - margin.bottom]
],
regiones
)
data = await FileAttachment("CPV17_sspp.csv").csv()
processed = {
const distritos = topojson.feature(shapes, shapes.objects.distritos);
const mapX = new Map(data.map((d) => [d.geo_id, d[servicio] / d.total]));
distritos.features.forEach((g) => {
g.properties.interest = mapX.get(g.properties.geo_id);
});
return distritos.features;
}
color = d3.scaleSequential()
.domain([0, 1])
.interpolator(d3.interpolateRdBu)
.unknown('#d3d3d3')
import {legend} from "@d3/color-legend"
csv = FileAttachment("IDH_wider-1.csv")
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.
