D3 Examples - fresh block1

xxxxxxxxxx
 
<!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>
  <body>
    <script>
      
    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 = "https://enjalot.github.io/wwsd/data/world/world-110m.geojson";
    var url2 = "https://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>
​
    