Public
Edited
May 14
countries = d3.json("https://gist.githubusercontent.com/emanueles/591172235e5c05c814752b7536155617/raw/8acfbc3b59204a9b7495a9a779012fadca811dce/countries2000.json")
countries
Type Table, then Shift-Enter. Ctrl-space for more options.
barras = {
const margin = { top: 30, right: 100, bottom: 20, left: 120 };
const width = 600 - margin.left - margin.right;
const barHeight = 20;
const height = countries.length * barHeight;
const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom));
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Adicionar título ao gráfico
svg.append("text")
.attr("x", (width + margin.left + margin.right) / 2) // Centralizado horizontalmente
.attr("y", margin.top / 2) // Posicionado no topo da marrgem
.attr("text-anchor", "middle") // Alinhamento centralizado
.style("font-size", "16px")
.style("font-weight", "bold")
.text("Expectativa de Vida por País"); // Texto do título
// Ordenar os dados
countries.sort((a, b) => d3.ascending(a.life_expect, b.life_expect));
// Escalas
const xScale = d3.scaleLinear()
.domain([0, d3.max(countries, d => d.life_expect)])
.range([0, width]);
const yScale = d3.scaleBand()
.domain(countries.map(d => d.country)) // nomes dos paísess
.range([0, height])
.padding(0.1);
// Barras
g.selectAll("rect")
.data(countries)
.enter()
.append("rect")
.attr("y", d => yScale(d.country))
.attr("height", yScale.bandwidth())
.attr("width", d => xScale(d.life_expect))
.attr("fill", d => {if(d.country === 'Brazil') return 'green';
if(d.country === 'Japan') return 'orange';
if(d.country === 'Rwanda') return '#8B0000';
return 'skyblue';
});
// Textos (valores + país)
g.selectAll("text")
.data(countries)
.enter()
.append("text")
.attr("x", d => xScale(d.life_expect) + 5)
.attr("y", d => yScale(d.country) + yScale.bandwidth() / 2 + 5)
.text(d => d.life_expect.toFixed(2) + " years")
.style("font", "12px sans-serif");
// Eixo Y com nomes dos países
g.append("g")
.call(d3.axisLeft(yScale).tickSize(0))
.selectAll("text")
.style("font", "12px sans-serif");
return svg.node();
}
scatterplot = {
const margin = { top: 100, right: 100, bottom: 50, left: 100 };
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
const svg = d3.select(DOM.svg(width + margin.left + margin.right, 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", margin.top / 2)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("font-weight", "bold")
.text("ScatterPlot: Fertilidade vs Expectativa de Vida");
// Escalas
const xScale = d3.scaleLinear()
.domain([0, d3.max(countries, d => d.fertility) + 1])
.range([0, width]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(countries, d => d.life_expect) + 10])
.range([height, 0]);
// Tooltip
const tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "#f9f9f9")
.style("padding", "6px")
.style("border", "1px solid #d3d3d3")
.style("border-radius", "4px")
.style("pointer-events", "none")
.style("font-size", "12px")
.style("display", "none");
// Pontos
g.selectAll("circle")
.data(countries)
.enter()
.append("circle")
.attr("cx", d => xScale(d.fertility))
.attr("cy", d => yScale(d.life_expect))
.attr("r", 4)
.attr("fill", d => {if(d.country === "Afghanistan") return "#8B0000";
return "green";})
.on("mouseover", function(event, d) {
tooltip
.style("display", "block")
.html(`
<strong>${d.country}</strong><br/>
Fertilidade: ${d.fertility}<br/>
Expectativa de vida: ${d.life_expect}
`);
})
.on("mousemove", function(event) {
tooltip
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY - 20) + "px");
})
.on("mouseout", function() {
tooltip.style("display", "none");
});
// Eixo X
g.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(xScale))
.append("text")
.attr("x", width / 2)
.attr("y", 40)
.attr("fill", "black")
.style("font-size", "12px")
.style("text-anchor", "middle")
.text("Taxa de Fertilidade");
// Eixo Y
g.append("g")
.call(d3.axisLeft(yScale))
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("y", -margin.left + 70)
.attr("fill", "black")
.style("font-size", "12px")
.style("text-anchor", "middle")
.text("Expectativa de Vida");
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.
