trevorgerhardt/geojson-states.json

## geojson-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              geojson-states.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## google-trends-javascript-by-state.csv

          
            state
            score

            
              Utah
              100

            
              California
              97

            
              Washington
              87

            
              Massachusetts
              78

            
              Colorado
              69

            
              New York
              68

            
              Virginia
              67

            
              Maryland
              67

            
              New Jersey
              65

            
              District of Columbia
              64

            
              Minnesota
              63

            
              Pennsylvania
              62

            
              Oregon
              61

            
              Illinois
              60

            
              Ohio
              60

            
              Idaho
              58

            
              Wisconsin
              58

            
              Texas
              58

            
              Arizona
              56

            
              Nebraska
              56

            
              Missouri
              56

            
              North Carolina
              55

            
              Georgia
              54

            
              New Hampshire
              53

            
              Iowa
              52

            
              Michigan
              52

            
              Indiana
              52

            
              Florida
              51

            
              Connecticut
              49

            
              Vermont
              47

            
              Rhode Island
              46

            
              Kansas
              45

            
              Tennessee
              44

            
              Delaware
              43

            
              Montana
              43

            
              New Mexico
              42

            
              Arkansas
              42

            
              Nevada
              41

            
              Alabama
              40

            
              South Carolina
              40

            
              Kentucky
              39

            
              Oklahoma
              39

            
              South Dakota
              39

            
              North Dakota
              38

            
              Maine
              38

            
              Hawaii
              35

            
              West Virginia
              30

            
              Wyoming
              29

            
              Alaska
              28

            
              Mississippi
              28

            
              Louisiana
              27

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Trends — "JavaScript" per state</title>
    <style>
      body {
        background-color: #fff;
        margin: 0;
        overflow: hidden;
      }

      .textbox {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0.5em;
        opacity: 0.75;
        font: 2em 'Helvetica';
      }

      .states {
        stroke: #2389c9;
        stroke-width: 0.5px;
        cursor: pointer;
      }
    </style>
    <script src="http://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
    <div class="textbox"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      // Simplest projection when only using U.S. data is AlbersUsa
      // Shows Hawaii & Alaska in convenient locations
      var projection = d3.geo.albersUsa()
        .scale(1000) // Default scale to show the entire United States
        .translate([width / 2, height / 2]); // Show in the middle of the window

      // Geo paths take GeoJSON features and will generate a path data string
      // suitable for the "d" attribute of an SVG path element
      var geopath = d3.geo.path()
        .projection(projection);

      // Create a bounding box that we can apply behaviors to
      var svg = d3.select('body').append('svg')
        .attr('width', width)
        .attr('height', height);

      // Create a group element to contain all states for easier scaling & translation
      var g = svg.append('g');

      // D3 Zoom behavior assists with panning and zooming
      // Supports mouse & touch events out of the box
      var zoom = d3.behavior.zoom()
        .translate([0, 0])
        .scale(1)
        .scaleExtent([1, 8]) // Limit the amount you can zoom in/out
        .on('zoom', function() {
          // On zoom: decrease stroke width,
          // translate to new position based on mouse position,
          // and scale accordingly
          g.style('stroke-width', 0.5 / d3.event.scale + 'px');
          g.attr('transform', 'translate(' + d3.event.translate + ')'
            + 'scale(' + d3.event.scale + ')');
        });

      // Apply the zoom behavior to the bounding SVG
      svg.call(zoom);

      // Create a linear color scale for trends
      var fillScale = d3.scale.linear()
        .domain([ 0, 100 ]) // Minimum, maximum input values
        .range([ '#fff', '#2389c9' ]); // Output color range, D3 is awesome...

      // Load in the CSV of Google Trends
      d3.csv('google-trends-javascript-by-state.csv', function(err, csv) {
        if (err) console.error(err), alert('Failed to load csv file.');

        // Convert the { state: '', score: # } array to a state => score JavaScript map
        // Any state,score based CSV file can replace the input
        // Just make sure the headings are the same, and state names are correct
        var trends = {};
        csv.forEach(function(d) {
          trends[d.state] = d.score;
        });

        // Load in GeoJSON state dataset
        d3.json('geojson-states.json', function(err, states) {
          if (err) console.error(err), alert('Failed to load json file.');

          // Grab the textbox
          var box = d3.select('.textbox');

          // Create the path based on the GeoJSON input data
          g.selectAll('path')
              .data(states.features) // Pass in only the features array
            .enter().append('path') // Append an SVG path to the group per feature
              .attr('d', geopath) // Calculate the path with the geographic projection provided above
              .attr('fill', function(d) {
                // Fill scale interpolates what color the state
                // should be based on it's trend value
                return fillScale(trends[d.properties.state]);
              })
              .attr('class', 'states')
              .on('mouseover', function(d) {
                // On hover, show the state name and value in the "textbox"
                box.text(d.properties.state + ': ' + trends[d.properties.state] + '/100');
              });
        });
      });
    </script>
  </body>
</html>
	state	score
	Utah	100
	California	97
	Washington	87
	Massachusetts	78
	Colorado	69
	New York	68
	Virginia	67
	Maryland	67
	New Jersey	65
	District of Columbia	64
	Minnesota	63
	Pennsylvania	62
	Oregon	61
	Illinois	60
	Ohio	60
	Idaho	58
	Wisconsin	58
	Texas	58
	Arizona	56
	Nebraska	56
	Missouri	56
	North Carolina	55
	Georgia	54
	New Hampshire	53
	Iowa	52
	Michigan	52
	Indiana	52
	Florida	51
	Connecticut	49
	Vermont	47
	Rhode Island	46
	Kansas	45
	Tennessee	44
	Delaware	43
	Montana	43
	New Mexico	42
	Arkansas	42
	Nevada	41
	Alabama	40
	South Carolina	40
	Kentucky	39
	Oklahoma	39
	South Dakota	39
	North Dakota	38
	Maine	38
	Hawaii	35
	West Virginia	30
	Wyoming	29
	Alaska	28
	Mississippi	28
	Louisiana	27
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Google Trends — "JavaScript" per state</title>
	<style>
	body {
	background-color: #fff;
	margin: 0;
	overflow: hidden;
	}

	.textbox {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0.5em;
	opacity: 0.75;
	font: 2em 'Helvetica';
	}

	.states {
	stroke: #2389c9;
	stroke-width: 0.5px;
	cursor: pointer;
	}
	</style>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<div class="textbox"></div>
	<script>
	var width = window.innerWidth;
	var height = window.innerHeight;

	// Simplest projection when only using U.S. data is AlbersUsa
	// Shows Hawaii & Alaska in convenient locations
	var projection = d3.geo.albersUsa()
	.scale(1000) // Default scale to show the entire United States
	.translate([width / 2, height / 2]); // Show in the middle of the window

	// Geo paths take GeoJSON features and will generate a path data string
	// suitable for the "d" attribute of an SVG path element
	var geopath = d3.geo.path()
	.projection(projection);

	// Create a bounding box that we can apply behaviors to
	var svg = d3.select('body').append('svg')
	.attr('width', width)
	.attr('height', height);

	// Create a group element to contain all states for easier scaling & translation
	var g = svg.append('g');

	// D3 Zoom behavior assists with panning and zooming
	// Supports mouse & touch events out of the box
	var zoom = d3.behavior.zoom()
	.translate([0, 0])
	.scale(1)
	.scaleExtent([1, 8]) // Limit the amount you can zoom in/out
	.on('zoom', function() {
	// On zoom: decrease stroke width,
	// translate to new position based on mouse position,
	// and scale accordingly
	g.style('stroke-width', 0.5 / d3.event.scale + 'px');
	g.attr('transform', 'translate(' + d3.event.translate + ')'
	+ 'scale(' + d3.event.scale + ')');
	});

	// Apply the zoom behavior to the bounding SVG
	svg.call(zoom);

	// Create a linear color scale for trends
	var fillScale = d3.scale.linear()
	.domain([ 0, 100 ]) // Minimum, maximum input values
	.range([ '#fff', '#2389c9' ]); // Output color range, D3 is awesome...

	// Load in the CSV of Google Trends
	d3.csv('google-trends-javascript-by-state.csv', function(err, csv) {
	if (err) console.error(err), alert('Failed to load csv file.');

	// Convert the { state: '', score: # } array to a state => score JavaScript map
	// Any state,score based CSV file can replace the input
	// Just make sure the headings are the same, and state names are correct
	var trends = {};
	csv.forEach(function(d) {
	trends[d.state] = d.score;
	});

	// Load in GeoJSON state dataset
	d3.json('geojson-states.json', function(err, states) {
	if (err) console.error(err), alert('Failed to load json file.');

	// Grab the textbox
	var box = d3.select('.textbox');

	// Create the path based on the GeoJSON input data
	g.selectAll('path')
	.data(states.features) // Pass in only the features array
	.enter().append('path') // Append an SVG path to the group per feature
	.attr('d', geopath) // Calculate the path with the geographic projection provided above
	.attr('fill', function(d) {
	// Fill scale interpolates what color the state
	// should be based on it's trend value
	return fillScale(trends[d.properties.state]);
	})
	.attr('class', 'states')
	.on('mouseover', function(d) {
	// On hover, show the state name and value in the "textbox"
	box.text(d.properties.state + ': ' + trends[d.properties.state] + '/100');
	});
	});
	});
	</script>
	</body>
	</html>