Old school D3 from simpler times

All examples By author By category About

jwarburg

Full window Github gist

D3 Australia Conformal Conic

D3 map of Australia using Natural Earth, topojson and a lambert conformal conic projection.

Parameters from Geo Repository.

Some help from Mike Bostock's Mexican Municipalities.

forked from RandomEtc's block: D3 Australia Conformal Conic

forked from anonymous's block: D3 Australia Conformal Conic

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <style>
  
  .states {
    fill: #222;
  }
  
  .states :hover {
    fill: orange;
  }
  
  </style>  
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
  </head>
  <body>
    <script>
      var width = 960,
          height = 628;
    
      var projection = d3.geo.conicConformal()
        .rotate([-132, 0])
        .center([0, -27])
        .parallels([-18, -36])
        .scale(Math.min(height * 1.2, width * 0.8))
        .translate([width / 2, height / 2])
        .precision(0.1);

var path = d3.geo.path()
        .projection(projection);
      
      var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height);
      
      d3.json("australia.json", function(error, australia) {
        if (error) throw error;
      
        svg.append("g")
            .attr("class", "states")
          .selectAll("path")
            .data(topojson.feature(australia, australia.objects.states).features)
          .enter().append("path")
            .attr("d", path)
      });
      
      d3.select(self.frameElement).style("height", height + "px");
      
    </script>
  </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <style>
  
  .states {
    fill: #222;
  }
  
  .states :hover {
    fill: orange;
  }
  
  </style>  
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
  </head>
  <body>
    <script>
      var width = 960,
          height = 628;
    
      var projection = d3.geo.conicConformal()
        .rotate([-132, 0])
        .center([0, -27])
        .parallels([-18, -36])
        .scale(Math.min(height * 1.2, width * 0.8))
        .translate([width / 2, height / 2])
        .precision(0.1);
​
      var path = d3.geo.path()
        .projection(projection);
      
      var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height);
      
      d3.json("australia.json", function(error, australia) {
        if (error) throw error;
      
        svg.append("g")
            .attr("class", "states")
          .selectAll("path")
            .data(topojson.feature(australia, australia.objects.states).features)
          .enter().append("path")
            .attr("d", path)
      });
      
      d3.select(self.frameElement).style("height", height + "px");
      
    </script>
  </body>
</html>
​
    

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js