Old school D3 from simpler times

All examples By author By category About

bradoyler

Full window Github gist

114th Congress (AlbersUSA)

Inspired by the 113th Congress map and the Congressional map.

Data is from Atlas-make/us-congress Github repo

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
<body>
  <div id="container"/>
  <script>
    var projection = d3.geoAlbersUsa();
    var path = d3.geoPath().projection(projection);
    var svg = d3.select("#container")
    .append("svg")
    .attr("width", 960)
    .attr("height", 500);

d3.json("congress.json", function(error, us) {
      svg.selectAll(".region")
        .data(topojson.feature(us, us.objects.congress).features)
        .enter()
        .append("path")
        .attr("class", "region")
        .attr("d", path)
        .style("fill", function(d){
           if(d.properties.PARTY_AFF=="Democrat") {
              return "#295899";
           } else {
             return "#b4362b"; 
           }
         })
        .style("stroke", "#aaa")
        .style("stroke-width", ".6px");
});

</script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
<body>
  <div id="container"/>
  <script>
    var projection = d3.geoAlbersUsa();
    var path = d3.geoPath().projection(projection);
    var svg = d3.select("#container")
    .append("svg")
    .attr("width", 960)
    .attr("height", 500);
​
    d3.json("congress.json", function(error, us) {
      svg.selectAll(".region")
        .data(topojson.feature(us, us.objects.congress).features)
        .enter()
        .append("path")
        .attr("class", "region")
        .attr("d", path)
        .style("fill", function(d){
           if(d.properties.PARTY_AFF=="Democrat") {
              return "#295899";
           } else {
             return "#b4362b"; 
           }
         })
        .style("stroke", "#aaa")
        .style("stroke-width", ".6px");
});
​
  </script>
</body>
​
    

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v1.min.js