Engineer & data visualization lover | Tae Bo Enthusiast
pe = d3.json("https://cdn.jsdelivr.net/npm/latam-atlas@0.0.5/files/peru-100k.json")
departments = topojson.feature(pe, pe.objects.level2)
peruProjection = {
const scale = 2000
//return d3.geoMercator().scale(scale).translate([3/2 * scale, 30])
return d3.geoIdentity().reflectY(true).fitSize([size.width, size.height], departments)
}
Plot.plot({
width: size.width,
height: size.height,
title: "Perú",
projection: peruProjection,
marks: [
Plot.geo(departmentsMesh, { strokeOpacity: 0.5, }),
Plot.geo(nation_pe,),
Plot.tip(
departments.features,
Plot.pointer(
Plot.centroid({
title: (d) =>
"Departamento: " + d.properties.name
})
)
)
],
caption: "Departamentos de Perú"
})
districts = topojson.feature(pe, pe.objects.level4)
Plot.plot({
width: 800,
height: 600,
projection: peruProjection,
marks: [
Plot.geo(districtsMesh, { strokeOpacity: 0.3 }),
Plot.geo(departmentsMesh, { strokeWidth: 0.8, }),
Plot.geo(nation_pe, ),
Plot.tip(
districts.features,
Plot.pointer(
Plot.centroid({
title: (d) =>
"Distrito: " + d.properties.name
})
)
)
],
caption: "Distritos del Perú"
})
ec = d3.json("https://cdn.jsdelivr.net/npm/latam-atlas@0.0.5/files/ecuador-transverse_mercator-50k.json")
projection = d3.geoTransverseMercator()
.rotate([50, 55])
//.scale(1000)
// .translate([900, 0])
nation_ec = topojson.merge(ec, ec.objects.level2.geometries)
provinces = topojson.feature(ec, ec.objects.level2)
provincesMesh = topojson.mesh(ec, ec.objects.level2, (a, b) => a !== b)
//parishes = topojson.merge(ec, ec.objects.level4.geometries)
parishesMesh = topojson.mesh(ec, ec.objects.level4, (a, b) => a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0))
Plot.plot({
width: 800,
height: 500,
margin: 10,
projection: {type: "reflect-y", domain: nation_ec, },
marks: [
Plot.geo(parishesMesh, { strokeOpacity: 0.3}),
Plot.geo(provincesMesh, { strokeWidth: 0.5 }),
Plot.geo(nation_ec),
Plot.tip(
parishes.features,
Plot.pointer(
Plot.centroid({
title: (d) =>
"Distrito: " + d.properties.name
})
)
)
],
caption: "Ecuador y sus parroquias"
})
location
margin = ({ left: 20, right: 20, top: 20, bottom: 20 })
size = ({ height: 600, width: 800 })
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.
