Public
Edited
May 13
Insert cell
Insert cell
Insert cell
countries = d3.json("https://gist.githubusercontent.com/emanueles/591172235e5c05c814752b7536155617/raw/8acfbc3b59204a9b7495a9a779012fadca811dce/countries2000.json")
Insert cell
Insert cell
comparePorFertilidade = (a, b) => a.fertility - b.fertility
Insert cell
exercicio1 = {
const width = 1000
const height = 2200
const svg = d3.select(DOM.svg(width, height))

let sorteddata = countries.sort(comparePorFertilidade)
svg.selectAll('rect')
.data(sorteddata)
.enter()
.append('rect')
.attr('x', 10)
.attr('y', (d, i) => i * 35 + 30)
.attr('height', 30)
.attr('width', d => d.fertility * 70)
.attr('fill', "Purple")

svg.selectAll('text.country')
.data(countries)
.enter()
.append('text')
.attr('x', d => d.fertility * 70 + 50)
.attr('y', (d, i) => i * 35 + 50)
.text(d => d.country)
.style('fill', 'black')

svg.selectAll('text.value')
.data(countries)
.enter()
.append('text')
.attr('x', d => d.fertility * 70 + 15)
.attr('y', (d, i) => i * 35 + 50)
.text(d => d.fertility)
.attr('fill', 'black')
return svg.node()
}
Insert cell
Insert cell
exercicio2 = {
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 + ")")
svg.selectAll('circle')
.data(countries)
.enter()
.append('circle')
.attr('cx', d => xScale(d.fertility))
.attr('cy', d => yScale(d.life_expect))
.attr('r', 5)

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

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

svg.append("text")
.attr("transform", "translate(" + (svgwidth/2) + "," + (svgheight + margin.bottom) + ")")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.text("Fertility");
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (svgheight / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.text("Life Expect")

// Código para inserir rótulos e identificar outliers
// svg.selectAll('text')
// .data(countries)
// .enter()
// .append('text')
// .attr('x', d => xScale(d.fertility))
// .attr('y', d => yScale(d.life_expect))
// .attr('font-family', 'sans-terif')
// .attr('font-size', '11px')
// .attr('fill', 'red')
// .text(d => d.country)

return outersvg.node()
}

Insert cell
xScale = d3.scaleLinear()
.domain([0, d3.max(countries, d => d.fertility)])
.range([0, svgwidth])
Insert cell
yScale = d3.scaleLinear()
.domain([0, d3.max(countries, d => d.life_expect)])
.range([svgheight, 0])
Insert cell
margin = {
let margin = {top: 40, right: 40, bottom: 40, left: 40};
return margin;
}
Insert cell
svgwidth = 800 - margin.left - margin.right
Insert cell
svgheight = 200 - margin.top - margin.bottom
Insert cell
xAxis = d3.axisBottom(xScale)
Insert cell
yAxis = d3.axisLeft(yScale)
Insert cell
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