Public
Edited
May 13
countries = d3.json("https://gist.githubusercontent.com/emanueles/591172235e5c05c814752b7536155617/raw/8acfbc3b59204a9b7495a9a779012fadca811dce/countries2000.json")
compareLifeExpectDecrescente = (b, a) => a.life_expect - b.life_expect
compareLifeExpectCrescente = (a, b) => a.life_expect - b.life_expect
barras = {
const width = 800
const height = 2000
const svg = d3.select(DOM.svg(width, height))
countries.sort(compareLifeExpectCrescente);
const xScale = d3.scaleLinear()
.domain([0, d3.max(countries, d => d.life_expect)])
.range([0, 600]);
svg.selectAll('rect')
.data(countries)
.enter()
.append('rect')
.attr('x', 10)
.attr('y', (d, i) => i * 30 + 20)
.attr('height', 20)
.attr('width', d => xScale(d.life_expect))
.attr('fill', "DarkCyan");
svg.selectAll('text')
.data(countries)
.enter()
.append('text')
.text(d => `${d.life_expect.toFixed(1)}: ${d.country}`)
.style("font-family", "Arial Black")
.style("font-size", "12px")
.attr('x', d => xScale(d.life_expect) + 15)
.attr('y', (d, i) => i * 30 + 35)
.attr('fill', 'black');
return svg.node();
}
// Fica muito ruim assim, muito espremido
// barrasHorizontal = {
// const margin = { top: 20, right: 30, bottom: 100, left: 50 };
// const width = 1200;
// const height = 500;
// const svg = d3.select(DOM.svg(width, height));
// countries.sort(compareLifeExpectCrescente);
// const xScale = d3.scaleBand()
// .domain(countries.map(d => d.country))
// .range([margin.left, width - margin.right])
// .padding(0.1);
// const yScale = d3.scaleLinear()
// .domain([0, d3.max(countries, d => d.life_expect)])
// .nice()
// .range([height - margin.bottom, margin.top]);
// svg.selectAll('rect')
// .data(countries)
// .enter()
// .append('rect')
// .attr('x', d => xScale(d.country))
// .attr('y', d => yScale(d.life_expect))
// .attr('width', xScale.bandwidth())
// .attr('height', d => yScale(0) - yScale(d.life_expect))
// .attr('fill', 'DarkCyan');
// svg.selectAll('text.value')
// .data(countries)
// .enter()
// .append('text')
// .attr('class', 'value')
// .text(d => d.life_expect.toFixed(1))
// .attr('x', d => xScale(d.country) + xScale.bandwidth() / 2)
// .attr('y', d => yScale(d.life_expect) - 5)
// .attr('text-anchor', 'middle')
// .style("font-family", "Arial Black")
// .style("font-size", "10px")
// .attr('fill', 'black');
// svg.selectAll('text.country')
// .data(countries)
// .enter()
// .append('text')
// .attr('class', 'country')
// .text(d => d.country)
// .attr('x', d => xScale(d.country) + xScale.bandwidth() / 2)
// .attr('y', height - margin.bottom + 10)
// .attr('text-anchor', 'middle')
// .attr('transform', d => `rotate(-45, ${xScale(d.country) + xScale.bandwidth() / 2}, ${height - margin.bottom + 10})`)
// .style("font-family", "Arial")
// .style("font-size", "10px");
// return svg.node();
// }
Há uma correlação negativa entre expectativa de vida e fertilidade.
E existem alguns outliers, como os ponto (2.24, 55.58) e (1.97, 63.90) - com expectqativa ed vida e fertilidades baixas,
o normal é países com auta expectativa de vida apresentarem baixa fertilidade.
scatter = {
const svgwidth = 800;
const svgheight = 500;
const margin = { top: 20, right: 20, bottom: 40, left: 50 };
const outersvg = d3.select(DOM.svg(svgwidth + margin.left + margin.right,
svgheight + margin.top + margin.bottom));
const svg = outersvg.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Dataset: pares [fertility, life_expect]
const dataset = countries.map(d => [d.fertility, d.life_expect]);
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d[0]) + 0.5])
.range([0, svgwidth]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d[1]) + 5])
.range([svgheight, 0]);
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
svg.selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr('cx', d => xScale(d[0]))
.attr('cy', d => yScale(d[1]))
.attr('r', 5)
.attr('fill', 'steelblue');
// svg.selectAll('text')
// .data(dataset)
// .enter()
// .append('text')
// .attr('x', d => xScale(d[0]) + 7)
// .attr('y', d => yScale(d[1]) - 3)
// .attr('font-family', 'sans-serif')
// .attr('font-size', '10px')
// .text(d => d[0].toFixed(2) + ',' + d[1].toFixed(2));
svg.append("g")
.attr("transform", "translate(0," + svgheight + ")")
.call(xAxis)
.append("text")
.attr("x", svgwidth / 2)
.attr("y", 35)
.attr("fill", "black")
.style("font-size", "12px")
.text("Fertility");
svg.append("g")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", (-svgheight / 2) + 30)
.attr("y", -35)
.attr("fill", "black")
.style("font-size", "12px")
.text("Life Expectancy");
return outersvg.node();
}
scatter2 = {
const svgwidth = 800;
const svgheight = 500;
const margin = { top: 20, right: 20, bottom: 40, left: 50 };
const outersvg = d3.select(DOM.svg(svgwidth + margin.left + margin.right,
svgheight + margin.top + margin.bottom));
const svg = outersvg.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Dataset: pares [fertility, life_expect]
const dataset = countries.map(d => [d.fertility, d.life_expect]);
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d[0]) + 0.5])
.range([0, svgwidth]);
const yScale = d3.scaleLinear()
.domain([40, d3.max(dataset, d => d[1]) + 5])
.range([svgheight, 0]);
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
svg.selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr('cx', d => xScale(d[0]))
.attr('cy', d => yScale(d[1]))
.attr('r', 5)
.attr('fill', 'steelblue');
// svg.selectAll('text')
// .data(dataset)
// .enter()
// .append('text')
// .attr('x', d => xScale(d[0]) + 7)
// .attr('y', d => yScale(d[1]) - 3)
// .attr('font-family', 'sans-serif')
// .attr('font-size', '10px')
// .text(d => d[0].toFixed(2) + ',' + d[1].toFixed(2));
svg.append("g")
.attr("transform", "translate(0," + svgheight + ")")
.call(xAxis)
.append("text")
.attr("x", svgwidth / 2)
.attr("y", 35)
.attr("fill", "black")
.style("font-size", "12px")
.text("Fertility");
svg.append("g")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", (-svgheight / 2) + 30)
.attr("y", -35)
.attr("fill", "black")
.style("font-size", "12px")
.text("Life Expectancy");
return outersvg.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.
