Public
Edited
Apr 14
data = FileAttachment("country-population-1.csv").csv({ typed: true })
height = 400
width = 800
margin = ({top:20, bottom:45, left:40, right:100})
countries = data.map(d => d.country)
x = d3.scaleBand()
.domain(countries)
.range([margin.left, width - margin.right])
.padding(0.2)
y = d3.scaleLinear()
.domain([0,maxPopulation])
.range([height - margin.bottom, margin.top])
function formatMillions(d){
return `${d/100000} mill.`
}
yAxis = d3.axisLeft(y).tickFormat(format)
xAxis = d3.axisBottom(x)
x("China")
maxPopulation = d3.max(data, d => d.population)
meanPopulation = d3.mean(data, d => d.population);
y(0)
format = d3.format("~s")
{
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// barras
svg.append("g")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(d.country))
.attr("y", d => y(d.population))
.attr("width", x.bandwidth() )
.attr("height", d => y(0) - y(d.population) )
.attr("fill", "steelblue")
// eje x
svg.append('g')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(xAxis)
.call(g => g.select('.domain').remove())
// eje y
svg.append('g')
.attr('transform', `translate(${margin.left},0)`)
.call(yAxis)
//.call(g => g.select('.domain').remove()); // eliminar la línea base del eje
// agregar una etiqueta al eje x
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', width / 2)
.attr('y', height )
.text("Paises");
return svg.node()
}
{
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// barras
svg.append("g")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(d.country))
.attr("y", d => y(d.population))
.attr("width", x.bandwidth() )
.attr("height", d => y(0) - y(d.population) )
.attr("fill", "steelblue")
// linea
svg.append("line")
.attr("x1", margin.left)
.attr("x2", width - margin.right)
.attr("y1", y(meanPopulation))
.attr("y2", y(meanPopulation))
.attr("stroke", "red")
// eje x
svg.append('g')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(xAxis)
.call(g => g.select('.domain').remove())
// eje y
svg.append('g')
.attr('transform', `translate(${margin.left},0)`)
.call(yAxis)
//.call(g => g.select('.domain').remove()); // eliminar la línea base del eje
// agregar una etiqueta al eje x
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', width / 2)
.attr('y', height )
.text("Paises");
return svg.node()
}
{
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// lineas
svg.append("g")
.selectAll("line")
.data(data)
.join("line")
.attr("x1", d => x(d.country) + x.bandwidth()/2)
.attr("x2", d => x(d.country) + x.bandwidth()/2)
.attr("y1", d => y(0))
.attr("y2", d => y(d.population))
.attr("stroke", "steelblue")
.attr("fill", "steelblue")
.attr("stroke-width", 2);
// circulo
svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d.country) + x.bandwidth()/2)
.attr("cy", d => - 7 + y(d.population))
.attr("r", 5)
.attr("fill", "steelblue")
// eje x
svg.append('g')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(xAxis)
// eje y
svg.append('g')
.attr('transform', `translate(${margin.left},0)`)
.call(yAxis)
//.call(g => g.select('.domain').remove()); // eliminar la línea base del eje
// agregar una etiqueta al eje x
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', width / 2)
.attr('y', height )
.text("Paises");
return svg.node()
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
