Public
Edited
May 13
countries = d3.json("https://gist.githubusercontent.com/emanueles/591172235e5c05c814752b7536155617/raw/8acfbc3b59204a9b7495a9a779012fadca811dce/countries2000.json")
countries
Type Table, then Shift-Enter. Ctrl-space for more options.
xScale = d3.scaleLinear()
.domain([0,d3.max(countries, d=> d.life_expect)])
.range([40,90])
yScale = d3.scaleLinear()
.domain([0,d3.max(countries, d =>d.fertility)])
.range([1900,0])
xAxis = d3.axisBottom().scale(xScale)
yAxis = d3.axisLeft().scale(yScale)
barras = {
const width = 600
const height = 1950
let colorScale = d3.scaleLinear()
.domain([40, 90])
.range(["Red","Blue"]);
countries.sort((a, b) => a.life_expect - b.life_expect);
const svg = d3.select(DOM.svg(width, height));
svg.append("text")
.attr("x", width / 2)
.attr("y", 30)
.attr("text-anchor", "middle")
.style("font-size", "24px")
.style("font-family", "Arial")
.style("font-weight", "bold")
.text("Expectativa de Vida por País");
svg.selectAll('rect')
.data(countries)
.enter()
.append('rect')
.attr('x', 10)
.attr('y', (d, i) => i * 30 + 60)
.attr('height', 20)
.attr('width', (d) => xScale(d.life_expect * 2))
.attr('fill', (d) => colorScale(d.life_expect));
svg.selectAll('text.label')
.data(countries)
.enter()
.append('text')
.attr('class', 'label')
.attr('x', (d) => d.life_expect * 2.2)
.attr('y', (d, i) => i * 30 + 60 + 15)
.text((d) => `${d.country} : ${d.life_expect}`)
.style("font-family", "Arial")
.style("font-size", "14px");
svg.append("g")
.attr("transform", "translate(0," + height + ")" )
.call(xAxis);
svg.append("g").call(yAxis);
return svg.node();
}
margin = {
let margin = {top: 40, right: 40, bottom: 40, left: 40};
return margin;
}
xScale2 = d3.scaleLinear()
.domain([0, d3.max(countries, d => d.life_expect)])
.range([margin.left, svgwidth - margin.right])
yScale2 = d3.scaleLinear()
.domain([0, d3.max(countries, d => d.fertility)])
.range([svgheight, margin.top])
xAxis2 = d3.axisBottom(xScale2).ticks(10)
yAxis2 = d3.axisLeft(yScale2).ticks(8)
svgwidth = 800 - margin.left - margin.right
svgheight = 600 - margin.top - margin.bottom
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.
