thomaxyu001 · October 27, 2017 05:45
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Data Summary</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <style>
      path {
        fill: #a5a5a5;
        stroke: #ffdbdb;
        stroke-width: 0.08736px;
      }

      circle {
        fill: #fec3c1;
        fill-opacity: 0.274215769052412;
        stroke: #feadad;
      }

      path.active {
        fill: #600000;
      }
        circle.active {
          fill: #ffcfb2;
        }
    </style>
  </head>

  
 <div id="sliderContainer">
    <input id="timeslide" type="range" min="0" max="16" value="0" step="1"/><br>
    <span id="range">2000</span>
 </div>
  <body>
    <script>
    
  // years we can select
 var inputValue = null;
 var year = [2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016];
      
      
      
    var width = 960,
        height = 500;

    var projection = d3.geoMercator();

    var path = d3.geoPath()
      .projection(projection)

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

      
    var url = "http://enjalot.github.io/wwsd/data/world/world-110m.geojson";
    var url2 = "http://enjalot.github.io/wwsd/data/world/ne_50m_populated_places_simple.geojson"
    d3.json(url, function(error, countries) {
    d3.json(url2, function(error, places) {
      if (error) throw error;

      console.log("geojson", countries, places);

      svg.selectAll("path")
        .data(countries.features)
      .enter().append("path")
        .attr("d", path)
       
      
      d3.csv("m.csv", function(d){
  
 	for(i = 0; i < d.length; i ++){
         
 		svg.append("circle")
 			.attr("cx", projection([d[i].longitude,d[i].latitude])[0])
 			.attr("cy", projection([d[i].longitude,d[i].latitude])[1])
 			.attr("r", Math.sqrt(d[i].dead))
 			.style("fill", "red")
 					
 	}
 })



    });
    });


    </script>
  </body>
 </html>
diff --git a/m.csv b/m.csv
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Data Summary</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<style>
	path {
	fill: #a5a5a5;
	stroke: #ffdbdb;
	stroke-width: 0.08736px;
	}

	circle {
	fill: #fec3c1;
	fill-opacity: 0.274215769052412;
	stroke: #feadad;
	}

	path.active {
	fill: #600000;
	}
	circle.active {
	fill: #ffcfb2;
	}
	</style>
	</head>


	<div id="sliderContainer">
	<input id="timeslide" type="range" min="0" max="16" value="0" step="1"/><br>
	<span id="range">2000</span>
	</div>
	<body>
	<script>

	// years we can select
	var inputValue = null;
	var year = [2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016];



	var width = 960,
	height = 500;

	var projection = d3.geoMercator();

	var path = d3.geoPath()
	.projection(projection)


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


	var url = "http://enjalot.github.io/wwsd/data/world/world-110m.geojson";
	var url2 = "http://enjalot.github.io/wwsd/data/world/ne_50m_populated_places_simple.geojson"
	d3.json(url, function(error, countries) {
	d3.json(url2, function(error, places) {
	if (error) throw error;

	console.log("geojson", countries, places);

	svg.selectAll("path")
	.data(countries.features)
	.enter().append("path")
	.attr("d", path)


	d3.csv("m.csv", function(d){

	for(i = 0; i < d.length; i ++){

	svg.append("circle")
	.attr("cx", projection([d[i].longitude,d[i].latitude])[0])
	.attr("cy", projection([d[i].longitude,d[i].latitude])[1])
	.attr("r", Math.sqrt(d[i].dead))
	.style("fill", "red")

	}
	})



	});
	});


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