Published
Edited
Dec 6, 2021
Insert cell
Insert cell
Insert cell
Insert cell
mapchoro = vl.markGeoshape({stroke: '#888', strokeWidth: 0.25})
.data(bairros.features)
.transform(
vl.lookup('properties.NOME').from(vl.data(homicides).key('Bairro').fields('Bairro', 'Homicidios'))
)
.encode(
vl.color().fieldQ('Homicidios').scale({domain: [0, 70], type: 'quantize', clamp: true, scheme: {name: 'blues', count: 7}}),
vl.tooltip(['Bairro', 'Homicidios'])
)
.project(vl.projection('mercator'))
.width(850).height(500)
.render()
Insert cell
homicides = d3.csv("https://gist.githubusercontent.com/emanueles/bae10fc42b13886b5a00b79737f2b50d/raw/ffb35abe6d9ba0c4ce4866b827f1916748ab65ef/homicidios_2012.csv", d3.autoType)
Insert cell
bairros = d3.json("https://gist.githubusercontent.com/emanueles/f43681762385f250d533eabb35da6dac/raw/4d4541e92fb9ce69e692a7a3c291a4a538ae6b6a/FortalezaBairros.geojson")
Insert cell
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