Skip to content

Instantly share code, notes, and snippets.

@adamfknapp
Last active September 27, 2017 22:04
Show Gist options
  • Save adamfknapp/02ccc6cca829d3f9cf8cdbd7eb38c3c6 to your computer and use it in GitHub Desktop.
Save adamfknapp/02ccc6cca829d3f9cf8cdbd7eb38c3c6 to your computer and use it in GitHub Desktop.
firearms per capita rev 01
license: mit

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

State PurchPer100th
Hawaii 0
District of Columbia 9
Iowa 69
New Jersey 83
Nebraska 95
Massachusetts 116
New York 118
North Carolina 139
Maryland 144
Rhode Island 161
California 180
Georgia 200
Utah 205
Michigan 206
Connecticut 211
Nevada 234
Illinois 248
Alabama 265
Texas 279
Arizona 294
South Carolina 316
Minnesota 318
Delaware 325
Ohio 329
Kentucky 346
Kansas 357
Arkansas 358
Washington 359
Florida 362
Pennsylvania 421
Vermont 426
Louisiana 432
Virginia 440
New Mexico 454
Idaho 458
Indiana 467
Maine 477
Wisconsin 481
Oregon 515
Oklahoma 524
Tennessee 536
New Hampshire 539
Missouri 551
West Virginia 552
North Dakota 558
Wyoming 567
Colorado 579
Mississippi 589
South Dakota 653
Montana 676
Alaska 832
<!DOCTYPE html>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment