Public
Edited
Dec 1, 2022
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', 'Populacao')),
vl.calculate('(datum.Homicidios/datum.Populacao) * 100000').as('Taxa')
)
.encode(
vl.color().fieldQ('Taxa').scale({domain: [0, 250], type: 'quantize', clamp: true, scheme: {name: 'blues', count: 9}}).legend({title: 'Homicídios por 100 mil habitantes'}),
vl.tooltip([{field:'Bairro'} ,
{field:'Taxa', format: '.2f'}])
)
.project(vl.projection('mercator'))
.width(850).height(500)
.render()
Insert cell
homicides = d3.csv("https://gist.githubusercontent.com/emanueles/f573f50bbc3376cae35c0ea1fc1c5509/raw/7aa5c77edd48978315956430a12bb048dab2757b/fortaleza_crimes_homicidios.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