D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
alansmithy
Full window
Github gist
European map
<!DOCTYPE html> <meta charset="utf-8"> <style> body { background: #fcfcfa; font-family:sans-serif; } .fill { fill: #fff; } .graticule { fill: #A7DBD8; stroke: #777; stroke-width: 1px; stroke-opacity:0.5; } .land{ fill: #E0E4CC; } .eu{ stroke: #ACAF9F; stroke-width: 1; fill:#E0E49F; } </style> <body> <div id="mapContainer"> <h3>The Statistical Geography of Europe</h3> <p>The Nomenclature of Territorial Units for Statistics (NUTS) is a standard, hierarchical framework for referencing the subdivisions of European countries for statistical purposes. This map shows the NUTS 2 levels, broadly equivalent to UK counties. As a member of the European Free Trade Association (EFTA), Switzerland is included in the classification.</p> </div> <script src="//d3js.org/d3.v3.min.js"></script> <script> var width = 900, height = 450; var projection = d3.geo.conicConformal() .center([9,55]) .translate([width/2,height/2]) .scale([width/1.3]); var path = d3.geo.path() .projection(projection); var graticule = d3.geo.graticule(); var svg = d3.select("#mapContainer").append("svg") .attr("width", width) .attr("height", height); svg.append("defs").append("path") .datum({type: "Sphere"}) .attr("id", "sphere") .attr("d", path); svg.append("use") .attr("class", "stroke") .attr("xlink:href", "#sphere"); svg.append("use") .attr("class", "fill") .attr("xlink:href", "#sphere"); svg.append("path") .datum(graticule) .attr("class", "graticule") .attr("d", path); d3.json("world.json", function(error, data) { if (error) throw error; svg.append("g").selectAll("path") .data(data.features) .enter() .append("path") .attr("d", path) .attr("class","land"); d3.json("nuts2.json", function(error, data) { if (error) throw error; svg.append("g").selectAll("path") .data(data.features) .enter() .append("path") .attr("d", path) .attr("class","eu"); }); }); </script> </body> </html>
https://d3js.org/d3.v3.min.js