Public
Edited
Jun 10
countries = d3.json("https://gist.githubusercontent.com/emanueles/591172235e5c05c814752b7536155617/raw/8acfbc3b59204a9b7495a9a779012fadca811dce/countries2000.json")
totalwidth = width
totalheight = 500
svgwidth = totalwidth - margin.left - margin.right
svgheight = totalheight - margin.top - margin.bottom
{
const outersvg = d3.select(DOM.svg(totalwidth, totalheight))
const svg = outersvg.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
countries.sort(compareByFertility)
svg.selectAll('rect')
.data(countries)
.enter()
.append('rect')
.attr('x', (d, i) => i * 15 + 10)
.attr('y', (d) => yBarChartScale(d.fertility))
.attr('width', 10)
.attr('height', (d) => barHeightScale(d.fertility))
.attr('fill', 'DarkBlue')
svg.append('g')
.call(yBarChartAxis)
return outersvg.node()
}
nextMultipleOfTen = (x) => (Math.floor(x / 10) + 1) * 10
highestDomainValue = nextMultipleOfTen(d3.max(countries, d => d.fertility))
barHeightScale = d3.scaleLinear()
.domain([0, highestDomainValue])
.range([0, svgheight])
yBarChartScale = d3.scaleLinear()
.domain([0, highestDomainValue])
.range([svgheight, 0])
yBarChartAxis = d3.axisLeft()
.scale(yBarChartScale)
compareByFertility = (a, b) => a.fertility - b.fertility
É possível notar uma correlação negativa entre as variáveis, pois, a medida que diminui a taxa de fertilidade, a expectativa de vida aumenta.
Também é possível notar que existe um outlier no gráfico. O ponto que possui taxa de fertilidade próxima a 2 e, ainda assim, possui expectativa de vida perto de 55 anos, distante dos demais pontos com características parecidas.
scatter1 = {
const outersvg = d3.select(DOM.svg(totalwidth, totalheight))
const svg = outersvg.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
svg.selectAll("circle")
.data(countries)
.enter()
.append("circle")
.attr("cx", d => xScatterplotScale(d.life_expect))
.attr("cy", d => yScatterplotScale(d.fertility))
.attr("r", 3)
svg.append("g")
.attr("transform", "translate(0," + svgheight + ")")
.call(xScatterplotAxis)
svg.append("text")
.attr("transform", "translate(" + (svgwidth / 2) + "," + (svgheight + margin.bottom) + ")")
.text("Expectativa de Vida")
svg.append("g")
.call(yScatterplotAxis)
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - (svgheight / 2))
.attr("dy", "10")
.style("text-anchor", "middle")
.text("Fertilidade")
return outersvg.node()
}
highestLifeExpectValue = d3.max(countries, d => d.life_expect)
highestFertilityValue = d3.max(countries, d => d.fertility)
xScatterplotScale = d3.scaleLinear()
.domain([0, highestLifeExpectValue])
.range([0, svgwidth])
yScatterplotScale = d3.scaleLinear()
.domain([0, highestFertilityValue])
.range([svgheight, 0])
xScatterplotAxis = d3.axisBottom()
.scale(xScatterplotScale)
yScatterplotAxis = d3.axisLeft()
.scale(yScatterplotScale)
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.
