Public
Edited
Oct 27, 2022
1 fork
mapchoro = vl.markGeoshape({stroke: '#000', strokeWidth: 1})
.data(bairros.features)
.transform(
vl.lookup('properties.NOME').from(vl.data(homicides).key('Bairro').fields('Bairro', 'Homicidios',
'perHundredThousand'))
)
.encode
(
vl.color().fieldQ('perHundredThousand').scale({type: 'quantize', clamp: true, scheme: {name: 'bluegreen', count:
8}}).title('Número de homicídios por cada 100 mil habitantes'),
vl.tooltip([
{field: 'Bairro'},
{field: 'Homicidios', title: 'Homicídios'},
{field: 'perHundredThousand', format: '.2f', title: 'Taxa de Homicídios'}
])
)
.project(vl.projection('mercator'))
.width(800).height(600)
.render()
bairros = d3.json("https://gist.githubusercontent.com/emanueles/f43681762385f250d533eabb35da6dac/raw/4d4541e92fb9ce69e692a7a3c291a4a538ae6b6a/FortalezaBairros.geojson")
homicides = d3.csv("https://gist.githubusercontent.com/emanueles/f573f50bbc3376cae35c0ea1fc1c5509/raw/7aa5c77edd48978315956430a12bb048dab2757b/fortaleza_crimes_homicidios.csv", d3.autoType)
homicides.forEach((d) => d.perHundredThousand = d.Homicidios*100000/d.Populacao)
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.
