trevorgerhardt · August 29, 2015 14:01
diff --git a/geojson-states.json b/geojson-states.json
diff --git a/google-trends-javascript-by-state.csv b/google-trends-javascript-by-state.csv
diff --git a/index.html b/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>