Public
Edited
May 14
Insert cell
Insert cell
Insert cell
countries1 = d3.json("https://gist.githubusercontent.com/emanueles/591172235e5c05c814752b7536155617/raw/8acfbc3b59204a9b7495a9a779012fadca811dce/countries2000.json")
Insert cell
Insert cell
function1 = (a,b) => a.fertility - b.fertility
Insert cell
grafico = {
const width = 600
const height = 1890

const svg = d3.select(DOM.svg(width, height))

countries1.sort(function1)
svg.selectAll('rect')
.data(countries1)
.enter()
.append('rect')
.attr('x', 10)
.attr('y', (d, i) => i * 30 + 20)
.attr('height', 20)
.attr('width', a => a.fertility*40)
.attr('fill', "DarkCyan")

svg.selectAll('text')
.data(countries1)
.enter()
.append('text')
.attr('x', a => a.fertility*40 + 15)
.attr('y', (a, i) => i * 30 + 20 + 15)
.text((a) => `${a.fertility}: ${a.country}`)
.style("font-family", "Arial")
.style("font-size", "14px")

return svg.node()
}
Insert cell
Insert cell
margin = {
//Definimos o objeto margin
let margin = {top: 40, right: 40, bottom: 40, left: 40};
return margin;
}
Insert cell
largura = 800 - margin.left - margin.right
Insert cell
altura = 800 - margin.top - margin.bottom
Insert cell
yScale = d3.scaleLinear()
.domain([d3.min(countries1, b => b.fertility), d3.max(countries1, a => a.fertility)])
.range([altura, 0])
Insert cell
yAxis = d3.axisLeft().scale(yScale).ticks(5)
Insert cell
xScale = d3.scaleLinear()
.domain([40, d3.max(countries1, a => a.life_expect)])
.range([0, largura])
Insert cell
xAxis = d3.axisBottom().scale(xScale).ticks(5)
Insert cell
scatter = {
const outersvg = d3.select(DOM.svg(largura + margin.left + margin.right,
altura + margin.top + margin.bottom))
const svg = outersvg.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
svg.selectAll('circle')
.data(countries1)
.enter()
.append('circle')
.attr('cx', a => xScale(a.life_expect))
.attr('cy', a => yScale(a.fertility))
.attr('r', 3)
.attr('fill', 'blue')

svg.selectAll('text')
.data(countries1)
.enter()
.append('text')
.attr('x', a => xScale(a.life_expect)+6)
.attr('y', a => yScale(a.fertility)-6)
.attr('font-size', '11px')
.attr('font-family', 'sans-serif',)
.attr('fill', 'black')
.attr('font-weight', 'bold')
.text(a => a.country)

svg.append("g")
.attr("transform", "translate(0, " + altura + ")")
.call(xAxis)

svg.append("g")
.call(yAxis)

svg.append("text")
.attr("transform", "translate(" + (largura/2) + "," + (altura +
margin.bottom) + ")")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "14px")
.attr('font-weight', 'bold')
.text("Expectativa de Vida");

svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (altura / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "14px")
.attr('font-weight', 'bold')
.text("Taxa de Fertilidade");
return outersvg.node()
}
Insert cell
É possível perceber uma relação entre os valores ao notarmos que quanto menor a taxa de fertilidade de um país maior tende a ser a expectativa de vida da população.
Insert cell
d3 = require('d3')
Insert cell

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.
Learn more