Old school D3 from simpler times

All examples By author By category About

jasondavies

Full window Github gist

Geographic projections

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.geo.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.layout.min.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.2.min.js"></script>
        <style type="text/css">
text {
  font: 10px sans;
  fill: #222;
  shape-rendering: crispEdges;
  text-rendering: optimizeLegibility;
}

rect {
  stroke: #222;
  shape-rendering: crispEdges;
}

path {
  stroke: #222;
  fill: none;
}

line {
  stroke: #aaa;
  shape-rendering: crispEdges;
}
        </style>
    </head>

<body>
        <script type="text/javascript">

var proj = d3.geo.mercator().scale(1).translate([0, 0]),
    path = d3.geo.path().projection(proj);

var margin = 30,
    width = window.innerWidth - margin,
    height = window.innerHeight - margin;

var svg = d3.select("body")
        .append("svg:svg")
        .attr("height", height)
        .attr("width", width);
var map = svg.append("svg:g");

d3.json("mesoamerica.geojson", function(err, json) {
    var bounds0 = d3.geo.bounds(json),
        bounds = bounds0.map(proj),
        xscale = width/Math.abs(bounds[1][0] - bounds[0][0]),
        yscale = height/Math.abs(bounds[1][1] - bounds[0][1]),
        scale = Math.min(xscale, yscale);

proj.scale(scale);
    proj.translate(proj([-bounds0[0][0], -bounds0[1][1]]));

map.selectAll("path")
        .data(json.features)
        .enter().append("svg:path")
        .attr("d", path);
});
        </script>
    </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.geo.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.layout.min.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.2.min.js"></script>
        <style type="text/css">
text {
  font: 10px sans;
  fill: #222;
  shape-rendering: crispEdges;
  text-rendering: optimizeLegibility;
}
​
rect {
  stroke: #222;
  shape-rendering: crispEdges;
}
​
path {
  stroke: #222;
  fill: none;
}
​
line {
  stroke: #aaa;
  shape-rendering: crispEdges;
}
        </style>
    </head>
​
    <body>
        <script type="text/javascript">
​
var proj = d3.geo.mercator().scale(1).translate([0, 0]),
    path = d3.geo.path().projection(proj);
​
var margin = 30,
    width = window.innerWidth - margin,
    height = window.innerHeight - margin;
​
var svg = d3.select("body")
        .append("svg:svg")
        .attr("height", height)
        .attr("width", width);
var map = svg.append("svg:g");
​
d3.json("mesoamerica.geojson", function(err, json) {
    var bounds0 = d3.geo.bounds(json),
        bounds = bounds0.map(proj),
        xscale = width/Math.abs(bounds[1][0] - bounds[0][0]),
        yscale = height/Math.abs(bounds[1][1] - bounds[0][1]),
        scale = Math.min(xscale, yscale);
​
    proj.scale(scale);
    proj.translate(proj([-bounds0[0][0], -bounds0[1][1]]));
​
    map.selectAll("path")
        .data(json.features)
        .enter().append("svg:path")
        .attr("d", path);
});
        </script>
    </body>
</html>
​
    

Updated missing url https://raw.github.com/mbostock/d3/master/d3.min.js to https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.min.js

Updated missing url https://raw.github.com/mbostock/d3/master/d3.geo.min.js to https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.geo.min.js

Updated missing url https://raw.github.com/mbostock/d3/master/d3.layout.min.js to https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.layout.min.js

Modified http://code.jquery.com/jquery-1.6.2.min.js to a secure url

https://raw.github.com/mbostock/d3/master/d3.min.js

https://raw.github.com/mbostock/d3/master/d3.geo.min.js

https://raw.github.com/mbostock/d3/master/d3.layout.min.js

https://code.jquery.com/jquery-1.6.2.min.js