vulneraveis = {
const bruto = d3.csvParse(await FileAttachment("vulnerables-states.csv").text(), d3.autoType);
bruto.forEach(d => d.population2019 /= 1e6); // em milhões de habitantes
bruto.forEach(d => d.vulnerable_count /= 1e6);
return bruto;
}
dataMap = new Map(vulneraveis.map(d => [d.uf, d]))
fillScalePop = {
const values = [... dataMap.values()].map(d => d.population2019);
return d3.scaleSequential(d3.extent(values), d3.interpolateBlues).nice();
// outra opção:
// return d3.scaleQuantize(d3.extent(values), d3.schemeBlues[6]).nice();
}
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 => fillScalePop(dataMap.get(d.id).population2019))
.attr("d", path)
.append("title")
.text(d => `${d.properties.name} : ${format(dataMap.get(d.id).population2019)} M`);;
// 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: fillScalePop,
title: "População (em Milhões de habitantes)",
width: 250,
tickFormat: ".1f"}));
return svg.node();
}
fillScaleVul = {
const values = [... dataMap.values()].map(d => d.vulnerable_count);
return d3.scaleSequential(d3.extent(values), d3.interpolatePurples).nice();
}
fillScaleVulProp = {
const values = [... dataMap.values()].map(d => d.vulnerable_prop);
return d3.scaleSequential(d3.extent(values), d3.interpolateOranges).nice();
}
mapaVulProp = {
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 => fillScaleVulProp(dataMap.get(d.id).vulnerable_prop))
.attr("d", path)
.append("title")
.text(d => `${d.properties.name} : ${format2(dataMap.get(d.id).vulnerable_prop)}`);;
// 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: fillScaleVulProp,
title: "População vulnerável (em proporção)",
width: 250,
tickFormat: ".1f"}));
return svg.node();
}
format2 = d3.format(",.2f")
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.
