adamfknapp/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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

  
## data.csv

          
            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

## 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: 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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	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>