Public
Edited
May 9
countries = d3.json("https://gist.githubusercontent.com/emanueles/591172235e5c05c814752b7536155617/raw/8acfbc3b59204a9b7495a9a779012fadca811dce/countries2000.json")
{
const latestData = Array.from(
d3.group(countries, d => d.country),
([, values]) => values.sort((a, b) => d3.descending(a.year, b.year))[0]
);
latestData.sort((a, b) => d3.ascending(a.life_expect, b.life_expect));
const margin = { top: 80, right: 30, bottom: 40, left: 100 };
const width = 800 - margin.left - margin.right;
const height = 25 * latestData.length;
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Título
svg.append("text")
.attr("x", (width + margin.left + margin.right) / 2)
.attr("y", 30)
.attr("text-anchor", "middle")
.style("font-size", "20px")
.style("font-weight", "bold")
.text("Expectativa de Vida por País (último ano disponível)");
// Subtítulo
svg.append("text")
.attr("x", (width + margin.left + margin.right) / 2)
.attr("y", 55)
.attr("text-anchor", "middle")
.style("font-size", "13px")
.style("fill", "#555")
.text("Fonte: Dataset de países - variável 'life_expect'");
const x = d3.scaleLinear()
.domain([0, d3.max(latestData, d => d.life_expect)])
.range([0, width]);
const y = d3.scaleBand()
.domain(latestData.map(d => d.country))
.range([0, height])
.padding(0.1);
g.append("g").call(d3.axisLeft(y));
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x));
g.selectAll("rect")
.data(latestData)
.enter().append("rect")
.attr("y", d => y(d.country))
.attr("height", y.bandwidth())
.attr("x", 0)
.attr("width", d => x(d.life_expect))
.attr("fill", "steelblue");
g.selectAll("text.label")
.data(latestData)
.enter().append("text")
.attr("class", "label")
.attr("x", d => x(d.life_expect) - 5)
.attr("y", d => y(d.country) + y.bandwidth() / 2)
.attr("dy", "0.35em")
.attr("text-anchor", "end")
.style("fill", "white")
.style("font-size", "11px")
.text(d => d.life_expect.toFixed(1));
return svg.node();
}
{
const latestData = Array.from(
d3.group(countries, d => d.country),
([, values]) => values.sort((a, b) => d3.descending(a.year, b.year))[0]
);
const margin = { top: 80, right: 100, bottom: 60, left: 100 };
const width = 1200 - margin.left - margin.right;
const height = 700 - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Título
svg.append("text")
.attr("x", (width + margin.left + margin.right) / 2)
.attr("y", 40)
.attr("text-anchor", "middle")
.style("font-size", "22px")
.style("font-weight", "bold")
.text("Fertilidade vs Expectativa de Vida (último ano disponível)");
const x = d3.scaleLinear()
.domain(d3.extent(latestData, d => d.fertility)).nice()
.range([0, width]);
const y = d3.scaleLinear()
.domain(d3.extent(latestData, d => d.life_expect)).nice()
.range([height, 0]);
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x));
g.append("g").call(d3.axisLeft(y));
svg.append("text")
.attr("x", margin.left + width / 2)
.attr("y", height + margin.top + 50)
.attr("text-anchor", "middle")
.style("font-size", "14px")
.text("Taxa de Fertilidade");
svg.append("text")
.attr("transform", `rotate(-90)`)
.attr("y", 20)
.attr("x", -(margin.top + height / 2))
.attr("text-anchor", "middle")
.style("font-size", "14px")
.text("Expectativa de Vida");
g.selectAll("circle")
.data(latestData)
.enter().append("circle")
.attr("cx", d => x(d.fertility))
.attr("cy", d => y(d.life_expect))
.attr("r", 4)
.attr("fill", "steelblue")
.attr("opacity", 0.7);
// Nomes dos países (com mais espaço)
g.selectAll("text.country")
.data(latestData)
.enter().append("text")
.attr("x", d => x(d.fertility) + 6)
.attr("y", d => y(d.life_expect) + 4)
.attr("font-size", "10px")
.attr("fill", "#333")
.text(d => d.country);
return svg.node();
}
d3 = require('d3')
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.
