jeromegn/index.html

## readme.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              readme.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.
      
    
## index.html
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="http://mbostock.github.com/d3/d3.js"></script>
  <style type="text/css">

    svg {
      background: #222;
      width: 960px;
      height: 500px;
    }

    #states path {
      fill: none;
      stroke: #eee;
      stroke-width: 1px;
    }

    .point {
      fill: #fff;
    }

  </style>
</head>
<body>
  <div id="chart"></div>
  <script type="text/javascript">

var centroids = [[-86.766233,33.001471],[-148.716968,61.288254],[-111.828711,33.373506],[-92.576816,35.080251],[-119.355165,35.458606],[-105.203628,39.500656],[-72.874365,41.494852],[-75.561908,39.397164],[-77.014001,38.910092],[-81.634622,27.79585],[-83.868887,33.332208],[-157.524452,21.146768],[-115.133222,44.242605],[-88.380238,41.278216],[-86.261515,40.163935],[-93.049161,41.960392],[-96.536052,38.454303],[-85.241819,37.808159],[-91.457133,30.69927],[-69.719931,44.313614],[-76.797396,39.145653],[-71.363628,42.271831],[-84.170753,42.866412],[-93.583003,45.210782],[-89.593164,32.56642],[-92.15377,38.437715],[-111.209708,46.813302],[-97.403875,41.183753],[-116.304648,37.165965],[-71.463342,43.153046],[-74.428055,40.438458],[-106.342108,34.623012],[-74.645228,41.507548],[-79.667654,35.553334],[-99.334736,47.375168],[-82.749366,40.480854],[-96.834653,35.59794],[-122.579524,44.732273],[-77.075925,40.463528],[-71.448902,41.753318],[-81.032387,34.034551],[-99.043799,44.047502],[-86.397772,35.795862],[-97.388631,30.943149],[-111.90016,40.438987],[-72.814309,44.081127],[-77.835857,37.750345],[-121.624501,47.341728],[-80.820221,38.767195],[-89.001006,43.728544],[-107.008835,42.675762],[-66.58765,18.19958]];

var xy = d3.geo.albersUsa(),
    path = d3.geo.path().projection(xy);

var svg = d3.select("#chart")
  .append("svg");

d3.json("readme.json", function(states) {
console.log(states);
svg.append("g")
    .attr("id", "states")
    .selectAll("path")
      .data(states.features)
    .enter().append("svg:path")
      .attr("d", path);

var points = svg.append("svg:g").attr("id", "points");

var data = [];

setInterval(function(){

  data.push(centroids[Math.floor(Math.random()*52)]);

  points.selectAll("circle")
    .data(data)
    .enter().append("svg:circle")
      .attr("class", "point")
      .attr("transform", function(d){return "translate("+xy(d)+")";})
      .attr("r", 2)
    .transition()
      .duration(1000)
      .delay(400)
      .attr("r", 20)
      .style("fill-opacity", 0)

}, 500);
});


  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<script src="http://mbostock.github.com/d3/d3.js"></script>
	<style type="text/css">

	svg {
	background: #222;
	width: 960px;
	height: 500px;
	}

	#states path {
	fill: none;
	stroke: #eee;
	stroke-width: 1px;
	}

	.point {
	fill: #fff;
	}

	</style>
	</head>
	<body>
	<div id="chart"></div>
	<script type="text/javascript">

	var centroids = [[-86.766233,33.001471],[-148.716968,61.288254],[-111.828711,33.373506],[-92.576816,35.080251],[-119.355165,35.458606],[-105.203628,39.500656],[-72.874365,41.494852],[-75.561908,39.397164],[-77.014001,38.910092],[-81.634622,27.79585],[-83.868887,33.332208],[-157.524452,21.146768],[-115.133222,44.242605],[-88.380238,41.278216],[-86.261515,40.163935],[-93.049161,41.960392],[-96.536052,38.454303],[-85.241819,37.808159],[-91.457133,30.69927],[-69.719931,44.313614],[-76.797396,39.145653],[-71.363628,42.271831],[-84.170753,42.866412],[-93.583003,45.210782],[-89.593164,32.56642],[-92.15377,38.437715],[-111.209708,46.813302],[-97.403875,41.183753],[-116.304648,37.165965],[-71.463342,43.153046],[-74.428055,40.438458],[-106.342108,34.623012],[-74.645228,41.507548],[-79.667654,35.553334],[-99.334736,47.375168],[-82.749366,40.480854],[-96.834653,35.59794],[-122.579524,44.732273],[-77.075925,40.463528],[-71.448902,41.753318],[-81.032387,34.034551],[-99.043799,44.047502],[-86.397772,35.795862],[-97.388631,30.943149],[-111.90016,40.438987],[-72.814309,44.081127],[-77.835857,37.750345],[-121.624501,47.341728],[-80.820221,38.767195],[-89.001006,43.728544],[-107.008835,42.675762],[-66.58765,18.19958]];

	var xy = d3.geo.albersUsa(),
	path = d3.geo.path().projection(xy);

	var svg = d3.select("#chart")
	.append("svg");

	d3.json("readme.json", function(states) {
	console.log(states);
	svg.append("g")
	.attr("id", "states")
	.selectAll("path")
	.data(states.features)
	.enter().append("svg:path")
	.attr("d", path);

	var points = svg.append("svg:g").attr("id", "points");

	var data = [];

	setInterval(function(){

	data.push(centroids[Math.floor(Math.random()*52)]);

	points.selectAll("circle")
	.data(data)
	.enter().append("svg:circle")
	.attr("class", "point")
	.attr("transform", function(d){return "translate("+xy(d)+")";})
	.attr("r", 2)
	.transition()
	.duration(1000)
	.delay(400)
	.attr("r", 20)
	.style("fill-opacity", 0)

	}, 500);
	});





	</script>
	</body>
	</html>