This bar chart was forked from curran's block: Extremist Murders in the US. Data from Our World in Data "Employment in Agriculture" by Max Roser.
Built with blockbuilder.org
license: mit |
This bar chart was forked from curran's block: Extremist Murders in the US. Data from Our World in Data "Employment in Agriculture" by Max Roser.
Built with blockbuilder.org
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { | |
margin:16px; | |
} | |
.label { | |
font-size: 9pt; | |
font-family: 'sans-serif'; | |
alignment-baseline: middle; | |
fill: yellow; | |
} | |
.number, .subtitle { | |
font-size: 15pt; | |
font-family: 'sans-serif'; | |
alignment-baseline: middle; | |
fill: #001689; | |
} | |
.bar { | |
fill: #002b89; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
const width = 800; | |
const height = 575; | |
const margin = { | |
left: 20, | |
right:180, | |
top: 90, | |
bottom: 103 | |
} | |
const svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
svg.append('text') | |
.attr('class', 'subtitle') | |
.attr('x', margin.left) | |
.attr('y', 45) | |
.text('Number of People in major countries and regions employed in agriculture in 2007.'); | |
const g = svg.append('g') | |
.attr('transform', `translate(${margin.left}, ${margin.top})`) | |
const data = [ | |
{ | |
name: "Total", | |
value: 9819792 | |
}, | |
{ | |
name: "Japan", | |
value: 3250818 | |
}, | |
{ | |
name: "United States", | |
value: 1953000 | |
}, | |
{ | |
name: "South Korea", | |
value: 1726000 | |
}, | |
{ | |
name: "Spain", | |
value: 924746 | |
} | |
]; | |
const innerWidth = width - margin.left - margin.right; | |
const innerHeight = height - margin.top - margin.bottom; | |
const xValue = d => d.value; | |
const yValue = d => d.name; | |
const xScale = d3.scaleLinear() | |
.domain([0, d3.max(data, xValue)]) | |
.range([0, innerWidth]); | |
const yScale = d3.scaleBand() | |
.domain(data.map(yValue).reverse()) | |
.range([innerHeight, 0]) | |
.padding(0.42432); | |
const groups = g.selectAll('g').data(data); | |
const groupsEnter = groups | |
.enter().append('g') | |
.attr('transform', d => `translate(0, ${yScale(yValue(d))})`); | |
groupsEnter | |
.append('rect') | |
.attr('class', 'bar') | |
.attr('width', d => xScale(xValue(d))) | |
.attr('height', yScale.bandwidth()) | |
.attr('fill', 'black'); | |
groupsEnter | |
.append('text') | |
.attr('class', 'label') | |
.attr('x', 9) | |
.attr('y', yScale.bandwidth() / 2) | |
.text(yValue); | |
const percentFormat = d3.format(",.1%"); | |
const xPercent = d => percentFormat(xValue(d) / xScale.domain()[1]); | |
groupsEnter | |
.append('text') | |
.attr('class', 'number') | |
.attr('x', d => xScale(xValue(d)) + 8) | |
.attr('y', yScale.bandwidth() / 2) | |
.text(d => `${xValue(d)} (${xPercent(d)})`); | |
</script> | |
</body> |
�PNG | |