DavidChouinard/demo.js

## demo.js
// You'll generally need a local server for requests to work. Run:
//     python -m SimpleHTTPServer

var width = 700,
    height = 500;

var svg = d3.select("svg")
  .attr("width", width)
  .attr("height", height);

// The code aboves sets up the basic SVG element required for
// drawing vector graphics in the browser. Real code starts below.

// Map code

var projection = d3.geo.albersUsa()
  .scale(900)
  .translate([width / 2, height / 2]);

var map = svg.append("g").attr("id", "map")

// How us.json can be produced: http://bost.ocks.org/mike/bubble-map/
d3.json("us.json", function(data) {
	var path = d3.geo.path()
		.projection(projection);

	map.selectAll("path")
		.data(data.features)
		.enter().append("path")
		.attr("d", path)
});

// End map code


d3.json("http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson", function(raw) {

  // strips the data into a much simpler flat format and removes
  // data points outside the US (ie. outside the clipping bounds of the projection)
  var data = raw["features"].map(function(d) {
    return {"magnitude": d["properties"]["mag"], "coordinates": d["geometry"]["coordinates"].slice(0,-1)}
  }).filter(function(d) {
    return projection(d.coordinates) !== null;
  })

  var scale = d3.scale.linear()
      .domain([1,10])
      .range([0,60]);

  var circles = svg.selectAll("circle")
       .data(data)
     .enter().append("circle");

  circles
      .attr("cx", function(d,i) {
        return projection(d.coordinates)[0];
      })
      .attr("cy", function(d,i) {
        return projection(d.coordinates)[1];
      })
      .attr("r", function(d,i) {
        return scale(d.magnitude);
      })
      .style("fill", "steelblue")
      .style("fill-opacity", 0.5);

});

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Data Visualization and D3</title>
        <meta content="David Chouinard" name="author" />

        <style type="text/css">
            html, body {
                margin: 0;
                padding: 0;
            }

            #map path {
                fill: #DEDEDE;
                stroke: #FFFFFF;
                stroke-width: 0.5;
            }
        </style>
    </head>
    <body>
        <svg></svg>
    </body>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="demo.js"></script>
</html>

## us.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	// You'll generally need a local server for requests to work. Run:
	// python -m SimpleHTTPServer

	var width = 700,
	height = 500;

	var svg = d3.select("svg")
	.attr("width", width)
	.attr("height", height);

	// The code aboves sets up the basic SVG element required for
	// drawing vector graphics in the browser. Real code starts below.

	// Map code

	var projection = d3.geo.albersUsa()
	.scale(900)
	.translate([width / 2, height / 2]);

	var map = svg.append("g").attr("id", "map")

	// How us.json can be produced: http://bost.ocks.org/mike/bubble-map/
	d3.json("us.json", function(data) {
	var path = d3.geo.path()
	.projection(projection);

	map.selectAll("path")
	.data(data.features)
	.enter().append("path")
	.attr("d", path)
	});

	// End map code


	d3.json("http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson", function(raw) {

	// strips the data into a much simpler flat format and removes
	// data points outside the US (ie. outside the clipping bounds of the projection)
	var data = raw["features"].map(function(d) {
	return {"magnitude": d["properties"]["mag"], "coordinates": d["geometry"]["coordinates"].slice(0,-1)}
	}).filter(function(d) {
	return projection(d.coordinates) !== null;
	})

	var scale = d3.scale.linear()
	.domain([1,10])
	.range([0,60]);

	var circles = svg.selectAll("circle")
	.data(data)
	.enter().append("circle");

	circles
	.attr("cx", function(d,i) {
	return projection(d.coordinates)[0];
	})
	.attr("cy", function(d,i) {
	return projection(d.coordinates)[1];
	})
	.attr("r", function(d,i) {
	return scale(d.magnitude);
	})
	.style("fill", "steelblue")
	.style("fill-opacity", 0.5);

	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Data Visualization and D3</title>
	<meta content="David Chouinard" name="author" />

	<style type="text/css">
	html, body {
	margin: 0;
	padding: 0;
	}

	#map path {
	fill: #DEDEDE;
	stroke: #FFFFFF;
	stroke-width: 0.5;
	}
	</style>
	</head>
	<body>
	<svg></svg>
	</body>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="demo.js"></script>
	</html>