adamfknapp · September 27, 2017 03:05
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!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: 24pt;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <svg width="500" height="1000"></svg>
    <script>

      const xValue = d => d.PurchPer100th;
      const xLabel = 'Fire Arms purchased';
      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', innerWidth / 2)
          .attr('y', 55)
          .text(xLabel);

      const xScale = d3.scaleLinear();
      const yScale = d3.scaleBand()
        .paddingInner(0.3)
        .paddingOuter(0);

      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');

        xAxisG.call(xAxis);

        yAxisG.call(yAxis);
        yAxisG.selectAll('.tick line').remove();
      });
    </script>
  </body>
 </html>
	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: 24pt;
	font-family: sans-serif;
	}
	</style>
	</head>
	<body>
	<svg width="500" height="1000"></svg>
	<script>

	const xValue = d => d.PurchPer100th;
	const xLabel = 'Fire Arms purchased';
	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', innerWidth / 2)
	.attr('y', 55)
	.text(xLabel);

	const xScale = d3.scaleLinear();
	const yScale = d3.scaleBand()
	.paddingInner(0.3)
	.paddingOuter(0);

	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');

	xAxisG.call(xAxis);

	yAxisG.call(yAxis);
	yAxisG.selectAll('.tick line').remove();
	});
	</script>
	</body>
	</html>