mapaPop = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// as áreas das UFs
svg.append("g")
.selectAll("path")
.data(topojson.feature(br, br.objects.uf).features)
.join("path")
.attr("stroke", "none")
.attr("fill", d => fill_scale_pop(data_map.get(d.id).expectativa_vida))
.attr("d", path)
.append("title")
.text(d => `${d.properties.name}: ${format(data_map.get(d.id).expectativa_vida)} %`);
// as fronteiras
svg.append("path")
.datum(topojson.mesh(br, br.objects.uf, (a,b) => a !== b))
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1.2)
.attr("fill", "none")
.attr("d", path);
// legenda
svg.append("g")
.attr("transform", "translate(410,20)")
.append(() => legend({color: fill_scale_pop,
title: "Percentagem de mulheres entre os empregados",
width: 250,
tickFormat: ".1f"}));
return svg.node();
}
mapaBR2020 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// fundo0
svg
.append("path")
.datum(topojson.feature(br2, br2.objects.Munic))
.attr("fill", "#ededed")
.attr("d", path2);
// pontos
svg
.append("g")
.attr("fill-opacity", 0.75)
.attr("stroke", "#fff")
.attr("stroke-width", 0.5)
.selectAll("circle")
.data(
dadosPontosBR.sort((a, b) => d3.descending(a.mortalidade_5, b.mortalidade_5))
)
.join("circle")
.attr("fill", d => fillPointsScale(d.mortalidade_5))
.attr("transform", d => `translate(${d.posicao})`)
.attr("r", d => radiusScaleBR(d.mortalidade_5))
.append("title")
.text(d => textoTooltip(d));
// legenda
svg
.append("g")
.attr("transform", "translate(410,20)")
.append(() =>
legend({
color: fillPointsScale,
title: "Mortalidade infantil",
width: 250,
tickFormat: ""
})
);
return svg.node();
}
fillPointsScale = d3.scaleSequentialSqrt([60, 0], d3.interpolateInferno).nice()
radiusScaleBR = d3.scaleLinear(
[0, d3.max(dadosPontosBR, d => d.mortalidade_5)],
[0,8]
)
d3.max(dadosPontosBR, d => d.mortalidade_5 * 100)
textoTooltip = d => `${d.municipio}, ${d.uf}
${d.mortalidade_5} a cada 1000 crianças deve morrer antes dos 5 anos`
width = 1000
data = d3.csv("https://gist.githubusercontent.com/MatheusHALeal/30232a8fe5bbce484994cf7f23e5bc82/raw/46e0ab5a4129738b3a42e8661242a0733de0c1ac/estados.csv")
data_mun = d3.csv("https://gist.githubusercontent.com/MatheusHALeal/91da2a27aef8411cb09552936e6c6a81/raw/144baf0734427181598890dc3e76b726537de221/municipios.csv")
municipios = data_mun.map(d => ({'id_municipio': +d.id_municipio, 'municipio':d.municipio, 'uf':d.uf, 'mortalidade_5':+d.mortalidade_5, 'id':d.id}))
dadosPontosBR = {
const gjFeatureMap = new Map(
topojson.feature(br2, br2.objects.Munic).features.map(d => [d.id, d])
);
const dados = municipios.map(
({
id_municipio,
municipio,
uf,
mortalidade_5,
id
}) => {
const feature = gjFeatureMap.get(id_municipio);
return {
id_municipio,
municipio,
uf,
mortalidade_5,
id,
posicao: feature && path2.centroid(feature) // <-- Repare aqui
};
}
);
return dados.filter(d => d.posicao);
}
data_map = new Map(data.map(d => [d.id, d]))
br2 = fetch(
"https://raw.githubusercontent.com/fititnt/gis-dataset-brasil/master/municipio/topojson/municipio.min-sn-q250.json"
).then(d => d.json())
fill_scale_pop = {
const values = [... data_map.values()].map(d => d.expectativa_vida);
return d3.scaleSequential(d3.extent(values), d3.interpolateBlues).nice();
// outra opção:
// return d3.scaleQuantize(d3.extent(values), d3.schemeBlues[6]).nice();
}
path2= {
const proj = d3.geoMercator().fitExtent([[0, 0], [width/2, height]], topojson.feature(br2, br2.objects.Munic));
return d3.geoPath(proj);
}
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.
