Public
Edited
May 9
countries = d3.json("https://gist.githubusercontent.com/emanueles/591172235e5c05c814752b7536155617/raw/8acfbc3b59204a9b7495a9a779012fadca811dce/countries2000.json")
comparePorLife = (a, b) => a.life_expect - b.life_expect
barras = {
const width = 600
const height = 1900
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const svg = d3.select(DOM.svg(width, height))
let colorScale = d3.scaleLinear()
.domain([50, 82])
.range(["Crimson", "Gold"]); // Escala de cor
countries.sort(comparePorLife) //aqui os dados são ordenados
svg.selectAll('rect') // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia)
.data(countries) // Vincula arrayOfNumbers com DOM elementos <rect/>, produzindo seleções .enter(),.exit()
.enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM
.append('rect') // Para cada item de dado, adiciona um <rect /> ao svg selecionado
.attr('x', 10) // Configura a posição x de acordo com o índice do vetor
.attr('y', (d, i) => i * 30 + 20) // Configura a posição y de cada barra de acordo com o índice do vetor
.attr('height', 20) //Configura a largura de cada barra
.attr('width', (d) => d.life_expect*5) // Configura a altura de cada barra
//.attr('fill', "DarkCyan") // Configura a cor de preenchimento de cada barra
.attr('fill', d => colorScale(d.life_expect)) // Configura a cor de preenchimento de cada barra
svg.selectAll('text') // Seleciona todos os retângulos filhos de svg (nesse caso, uma seleção vazia)
.data(countries) // Vincula arrayOfNumbers com DOM elementos <rect/>, produzindo seleções .enter(),.exit()
.enter()// Retorna a parte dos dados que é nova ("entering") e ainda não está vinculada aos elementos DOM
.append('text')
.attr('x', (d) => d.life_expect*5 + 15) // Configura a posição x de acordo com o índice do vetor
.attr('y', (d, i) => i * 30 + 20 + 15) // Configura a posição y de cada barra de acordo com o índice do vetor
.text(d => `${d.country} : ${d.life_expect} `)
.style("font-family", "Arial")
.style("font-size", "14")
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return svg.node()
}
sttwidth = 800 - margin.left - margin.right
sttheight = 200 - margin.top - margin.bottom
xScale = d3.scaleLinear()
.domain([50, 85])
.range([0,sttwidth])
yScale = d3.scaleLinear()
.domain([0, 9])
.range([sttheight, 0])
margin = {
let margin = {top: 40, right: 40, bottom: 40, left: 40};
return margin;
}
xAxis = d3.axisBottom()
.scale(xScale)
.ticks(10)
yAxis = d3.axisLeft()
.scale(yScale);
scatter = {
// DOM.svg() é um método específico do Observable para criar um elemento DOM SVG.
const outersvg = d3.select(DOM.svg(sttwidth + margin.left + margin.right,
sttheight + margin.top + margin.bottom))
// Depois adicionamos um elemento g no svg que vai transladar a origem
// do gráfico como sendo a origem da área útil do gráfico
const svg = outersvg.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
svg.selectAll('circle')
.data(countries)
.enter()
.append ('circle' )
.attr('cx', d => xScale(d.life_expect))
.attr('cy', d => yScale(d.fertility))
.attr('r', 5)
svg.append("g")
.attr("transform", "translate(0," + sttheight + ")")
.call(xAxis)
svg.append("g")
.call(yAxis)
svg.append("text")
.attr("transform", "translate(" + (sttwidth/2) + "," + (sttheight +
margin.bottom) + ")")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.text("Expectativa de Vida");
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (sttheight / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.text("Taxa de fertilidade");
// Once we append the vis elments to it, we return the DOM element for Observable to display above.
return outersvg.node()
}
Analisando o gráfico é notável que, em geral, uma maior expectativa de vida vem acompanhada de uma menor taxa de fertilidade, com a grande maioria dos países acumulados na região de expectativa de vida maior que 70 e taxa de fertilidade menor que 3. Quanto aos outliers, acho que seriam justamente esses países com uma menor expectativa de vida e não tão alta taxa de fertilidade, que se encontram mais à esquerda no gráfico, pois acredito que sejam os que mais se distanciariam de um possível padrão encontrado, já que olhando para o gráfico conseguimos ver como são dispersos entre si. Um exemplo seria o Afeganistão e a África do Sul, que possuem expectativa de vida parecidas, mas taxa de fertilidade muito diferentes (7.53 e 2.41), fazendo com que ao menos um desses tenha grande chance de ser um outlier.
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.
