This data shows the firearm purchases during August of 2017 normalized by state population.
Built with blockbuilder.org
Forked from Curran Kelleher’s Block e842c1b64974666c60fc3e437f8c8cf9
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v4.min.js"></script>
<title>Fire Arms Purchased per 100,000 residence</title>
<style>
body {
margin: 0px;
}
.domain {
display: none;
}
.tick line {
stroke: #C0C0BB;
}
.tick text {
fill: #8E8883;
font-size: 10pt;
font-family: sans-serif;
}
.axis-label {
fill: #635F5D;
font-size: 16pt;
font-family: sans-serif;
}
</style>
</head>
<body>
<svg width="800" height="1000"></svg>
<script>
const xValue = d => d.PurchPer100th;
const xLabel = 'Fire Arms purchased per 100k people';
const yValue = d => d.State;
const yLabel = 'State';
const margin = { left: 150, right: 30, top: 5, bottom: 75 };
const svg = d3.select('svg');
const width = svg.attr('width');
const height = svg.attr('height');
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const g = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
const xAxisG = g.append('g')
.attr('transform', `translate(0, ${innerHeight})`);
const yAxisG = g.append('g');
xAxisG.append('text')
.attr('class', 'axis-label')
.attr('x', 0)
.attr('y', 20)
.text(xLabel);
const xScale = d3.scaleLinear();
const yScale = d3.scaleBand()
.paddingInner(0.3)
.paddingOuter(20);
const xTicks = 50;
const xAxis = d3.axisBottom()
.scale(xScale)
.ticks(xTicks)
.tickPadding(5)
.tickFormat(d3.format('.0s'))
.tickSize(-innerHeight);
const yAxis = d3.axisLeft()
.scale(yScale)
.tickPadding(5)
.tickSize(-innerWidth);
const row = d => {
const Purch = d['PurchPer100th'];
return {
State: d['State'],
PurchPer100th: +d['PurchPer100th']
};
};
d3.csv('data.csv', row, data => {
yScale
.domain(data.map(yValue))
.range([innerHeight, 0]);
xScale
.domain([0, d3.max(data, xValue)])
.range([0, innerWidth])
.nice(xTicks);
g.selectAll('rect').data(data)
.enter().append('rect')
.attr('x', 0)
.attr('y', d => yScale(yValue(d)))
.attr('width', d => xScale(xValue(d)))
.attr('height', d => yScale.bandwidth())
.attr('fill', 'steelblue');
// Trying to add values to cars with no success....
// g.append("text")
// .attr("y", 28 )
// .attr("x", Y(d))
// .text('foo');
// xAxisG.call(xAxis);
yAxisG.call(yAxis);
yAxisG.selectAll('.tick line').remove();
});
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js