The avatar for @john-guerra
John Alexis Guerra Gómez
I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Published
Edited
May 28, 2022
3 forks
3 stars
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
height= 600
Insert cell
color = d3
.scaleOrdinal(d3.quantize(d3.interpolateTurbo, depts.size))
.domain(depts)
Insert cell
depts = new Set(landState.features.map(d => d.properties.dpt))
Insert cell
land = topojson.feature(mapData, {
type: "GeometryCollection",
geometries: mapData.objects.mpios.geometries
})
Insert cell
landState = topojson.feature(mapData, {
type: "GeometryCollection",
geometries: mapData.objects.depts.geometries
})
Insert cell
pathCanvas = d3.geoPath()
.projection(d3.geoTransverseMercator()
.rotate([74 + 30 / 60, -38 - 50 / 60])
.fitExtent([[margin.left, margin.top], [width-margin.right, height-margin.bottom]], landState))
Insert cell
margin = { return { left: 20, top: 20, right:20, bottom: 20}}
Insert cell
mapData = FileAttachment("colombia-municipios.json").json()
Insert cell
d3 = require("d3@6")
Insert cell
topojson = require("topojson@3")
Insert cell
import { swatches } from "@d3/color-legend"
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