D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
abelande
Full window
Github gist
Test SUPviz
Built with
blockbuilder.org
<!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>
https://d3js.org/d3.v4.min.js