Published
Edited
Dec 9, 2020
1 fork
md`# Bar Chart Example`
{
const svg = DOM.svg(960,500);
const popChart = d3.select(svg)
const height = 500;
const width = 960;
const render = data => {
const xVal = d => d.population
const yVal = d => d.country
const margin = {top: 50,right: 40,bottom: 80, left: 180}
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const xScale = d3.scaleLinear()
.domain([0,d3.max(data,xVal)])
.range([0,innerWidth]);
const yScale = d3.scaleBand()
.domain(data.map(yVal))
.range([0,innerHeight])
.padding(0.1);
const xAxisTickFormat = number => d3.format('.3s')(number).replace('G','B');
const xAxis = d3.axisBottom(xScale).tickFormat(xAxisTickFormat).tickSize(-innerHeight)
const g = popChart.append('g')
.attr('transform',`translate(${margin.left},${margin.top})`);
g.append('g')
.call(d3.axisLeft(yScale))
.style('font-size','1.1em')
.style('font-family','sans-serif')
.selectAll('.domain, .tick line')
.remove();
const xAxisG = g.append('g').call(xAxis)
.attr('transform',`translate(0,${innerHeight})`)
.style('font-size','1.1em')
.style('font-family','sans-serif');
xAxisG.select('.domain').remove();
xAxisG.append('text').attr('y',50).attr('x', innerWidth/2).text('Population')
g.selectAll('rect').data(data)
.enter().append('rect')
.attr('y',d=>yScale(yVal(d)))
.attr('width',d=>xScale(xVal(d)))
.attr('height',yScale.bandwidth())
.attr('fill','steelblue');
g.append('text').attr('y',-10)
.style('font-size','1.5em')
.style('font-family','sans-serif')
.text('Top 10 Most Populous Countries 2018');
g.selectAll('.tick text').attr('color','#635F5D');
g.selectAll('.tick line').attr('stroke','#C0C0BB');
}
d3.csv('https://charles-carlson.static.observableusercontent.com/files/42c542d336a21fd566e0c909e52f71d4119e1b27d0ac82eb0f1d6ebc91eb44d9cfab0d57fc48c35a383357f0075b90a0063cc709b0eaf3b0ff4d33b02919ea9e?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27popcountries2019.csv&Expires=1607601600000&Key-Pair-Id=APKAJCHFJLLLU4Y2WVSQ&Signature=BPB3ucqD6cNTmAxdcJEoLCK0V0iZew8lvaifm61IGpHRwpaY6X1L5L7~6HU~XjW~4Z0BNKYqBsXuFlAnTxBvToIbBrXShNq8-yYPXHfKckJdnIhp8yOkkWkRcxkfSSVqwe7bKVLauAPa-2rXRaf6BOZNTF5rpkn6tvgTIaa-0wv8ebJIHYY2egpgc08jQ3ekkYsYx76TGgJAYzy67PxR22Ae6N90bPLSG~y796sagi~W6rIdwTmBmereKsBmAsM0IzncJ7QP5Sy-4lbWjOSkR~glav5GiZecZiaiQXMt44Jq2CGgTQZfHOtdYQg7otSd7HS2ds9RFwT8dO2QAgdhZg__')
.then(data =>{
data.forEach(d=>{d.population = +d.population * 1000});
console.log(data)
render(data)});
return svg
}
d3 = require('d3');
md`## Bar Chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in
[United Nations: World Population Prospects 2017](https://esa.un.org/unpd/wpp/Download/Standard/Population/)`
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.
