Public
Edited
Jun 11
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mapchoro = vl.markGeoshape({stroke: '#888', strokeWidth: 0.25})
.data(vl.topojson(bairros).feature('POLIGONAIS'))
.transform(
vl.lookup('properties.Name')
.from(vl.data(dadosComTaxa)
.key('Bairro')
.fields('Bairro', 'Número de Homicidios', 'taxaPor100mil'))
)
.encode(
vl.color().fieldQ('taxaPor100mil') // ← aqui mudou para a taxa
.scale({
domain: minMaxTaxa, // ajuste este intervalo conforme os dados
type: 'quantize',
clamp: true,
scheme: {name: 'blues', count: 12}
}),
vl.tooltip([
{field: 'Bairro', type: 'nominal'},
{field: 'Número de Homicidios', type: 'quantitative'},
{field: 'taxaPor100mil', type: 'quantitative', title: 'Taxa (por 100 mil)', format: '.1f'}
])
)
.project(vl.projection('mercator'))
.width(850).height(500)
.render()

Insert cell
Insert cell
Insert cell
dadosComTaxa = homicides.map(d => ({
...d,
taxaPor100mil: d["População"] > 0
? (d["Número de Homicidios"] * 100000) / d["População"]
: 0
}))

Insert cell
// Calcula os limites automaticamente
minMaxTaxa = {
const taxas = dadosComTaxa.map(d => d.taxaPor100mil).filter(t => !isNaN(t));
return [Math.min(...taxas), Math.max(...taxas)];
}

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