Old school D3 from simpler times

All examples By author By category About

EssohanamKouyou

Full window Github gist

map_test

Built with blockbuilder.org

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>D3 World Map</title>
    <style>
      path {
        stroke: white;
        stroke-width: 0.5px;
        fill: black;
      }
    </style>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/topojson.v0.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      var width = 900;
      var height = 600;

var projection = d3.geoMercator();
      
      var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height);
      var path = d3.geoPath()
          .projection(projection);
      var g = svg.append("g");
      
      /*d3.json("world-110m2.json", function(error, topology) {
          g.selectAll("path")
            .data(topojson.object(topology, topology.objects.countries).geometries)
          .enter()
            .append("path")
            .attr("d", path)
      });*/
      
      d3.csv("sensor.csv", function(sensor) {
          g.selectAll("path")
            .data(topojson.object(sensor.Geometry) )
            .enter()
            .append("path")
            .attr("d", path)
      });
    </script>
  </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>D3 World Map</title>
    <style>
      path {
        stroke: white;
        stroke-width: 0.5px;
        fill: black;
      }
    </style>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/topojson.v0.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      var width = 900;
      var height = 600;
​
      var projection = d3.geoMercator();
      
      var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height);
      var path = d3.geoPath()
          .projection(projection);
      var g = svg.append("g");
      
      /*d3.json("world-110m2.json", function(error, topology) {
          g.selectAll("path")
            .data(topojson.object(topology, topology.objects.countries).geometries)
          .enter()
            .append("path")
            .attr("d", path)
      });*/
      
      d3.csv("sensor.csv", function(sensor) {
          g.selectAll("path")
            .data(topojson.object(sensor.Geometry) )
            .enter()
            .append("path")
            .attr("d", path)
      });
    </script>
  </body>
</html>
​
    

Modified http://d3js.org/d3.v4.min.js to a secure url

Modified http://d3js.org/topojson.v0.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v0.min.js