D3 Examples - Test SUPviz

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    // Width and Height of the whole visualization
var width = 700;
var height = 580;
​
// Create SVG
var svg = d3.select( "body" )
    .append( "svg" )
    .attr( "width", width )
    .attr( "height", height );
​
// Append empty placeholder g element to the SVG
// g will contain geometry elements
        var g = svg.append( "g" );
    
    // Width and Height of the whole visualization
// Set Projection Parameters
        var projection = d3.geoConicConformal()
                .translate([width/2, height/2])
                .center([45.7531152, 4.827906])
                .scale([2800]);
    
    var path = d3.geoPath()
                 .projection(projection);
    
    d3.json("stations.json", function(collection){
      console.log([collection])
    })
    // Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes
/* g.selectAll( "path" )
    .data(data.json.features)
    .enter()
    .append( "path" )
    .attr( "fill", "#ccc" )
    .attr( "stroke", "#333")
    .attr( "d", geoPath );*/
​
  </script>
</body>
​
    