Add visualizing congress with D3 post

5 files changed, 273 insertions, 0 deletions

diff --git a/assets/scripts/d3/gender_terms_v0.js b/assets/scripts/d3/gender_terms_v0.js
new file mode 100644
index 0000000..32052ea
--- /dev/null
+++ b/assets/scripts/d3/gender_terms_v0.js
@@ -0,0 +1,16 @@
+(function() {
+  d3.json("/assets/data/legislators-current.json", function(data) {
+
+  d3.select("div#d3gender_terms_v0").selectAll("svg")
+    .data(data.legislators)
+    .enter()
+    .append("svg")
+      .attr("width", function(d) { return d.terms.length * 2; })
+      .attr("height", function(d) { return d.terms.length * 2; })
+    .append("circle")
+      .attr("cx", function(d) { return d.terms.length; })
+      .attr("cy", function(d) { return d.terms.length; })
+      .attr("r", function(d) { return d.terms.length; })
+      .style("fill", function(d) { return d.bio.gender === 'F'? "green" : "blue"; });
+  });
+})();
diff --git a/assets/scripts/d3/gender_terms_v1.js b/assets/scripts/d3/gender_terms_v1.js
new file mode 100644
index 0000000..ba510e0
--- /dev/null
+++ b/assets/scripts/d3/gender_terms_v1.js
@@ -0,0 +1,38 @@
+(function() {
+  var width = 960;
+  var height = 500;
+  var color = d3.scale.category10();
+
+  var pack = d3.layout.pack()
+    .sort(function(a, b) {
+      if (a.value > b.value) { return -1; }
+      if (a.value < b.value) { return 1; }
+      return 0;
+    })
+    .size([width, height])
+    .padding(4);
+
+  var container = d3.select("div#d3gender_terms_v1")
+    .append("svg")
+      .attr("width", width)
+      .attr("height", height);
+
+  d3.json("/assets/data/legislators-current.json", function(data) {
+
+    container.selectAll("circle")
+      .data(pack({
+        children: data.legislators.map(function(x) {
+          return {
+            value: x.terms.length,
+            gender: x.bio.gender
+          }
+        }
+      )}))
+      .enter()
+      .append("circle")
+        .attr("cx", function(d) { return d.x; })
+        .attr("cy", function(d) { return d.y; })
+        .attr("r", function(d) { return d.depth === 1? d.r : 0; })
+        .style("fill", function(d) { return color(d.gender); });
+  });
+})();
diff --git a/assets/scripts/d3/party_affiliation_v0.js b/assets/scripts/d3/party_affiliation_v0.js
new file mode 100644
index 0000000..ed7b576
--- /dev/null
+++ b/assets/scripts/d3/party_affiliation_v0.js
@@ -0,0 +1,62 @@
+(function() {
+
+  var width = 960;
+  var height = 700;
+  var radius = Math.min(width, height) / 2;
+
+  var transform = function(data) {
+    return {
+      "children": d3.shuffle(data.map(function(d0) {
+        return {
+          value: d0.terms.length,
+          gender: d0.bio.gender,
+          children: d0.terms.map(function(d1) {
+            return {
+              value: 1,
+              party: d1.party
+            }
+          })
+        };
+      }).filter(function(d) {
+        return Math.random() > 0.90;
+      }))
+    };
+  };
+
+  d3.json("/assets/data/legislators-current.json", function(data) {
+
+    var partition = d3.layout.partition()
+      .size([2 * Math.PI, radius * radius])
+      .sort(null);
+
+    var container = d3.select("div#d3party_affiliation_v0").append("svg")
+        .attr("width", width)
+        .attr("height", height)
+      .append("g")
+        .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
+
+    var arc = d3.svg.arc()
+      .startAngle(function(d) { return d.x; })
+      .endAngle(function(d) { return d.x + d.dx; })
+      .innerRadius(function(d) { return Math.sqrt(d.y); })
+      .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
+
+    container.datum(transform(data.legislators)).selectAll("path")
+        .data(partition.nodes)
+      .enter().append("path")
+        .attr("display", function(d) { return d.depth ? null : "none"; })
+        .attr("d", arc)
+        .style("stroke", "#fff")
+        .style("fill", function(d) {
+          if (d.depth === 1) {
+            return "lightslategray ";
+          }
+          if (d.depth === 2) {
+            if (d.party === "Democrat") return "blue";
+            if (d.party === "Republican") return "red";
+            if (d.party === "Independent") return "purple";
+          }
+        })
+        .style("fill-rule", "evenodd");
+  });
+})();
diff --git a/assets/scripts/d3/religion_v0.js b/assets/scripts/d3/religion_v0.js
new file mode 100644
index 0000000..6391195
--- /dev/null
+++ b/assets/scripts/d3/religion_v0.js
@@ -0,0 +1,97 @@
+(function() {
+
+  var transform = function(data) {
+    // Set up an object and an array to use
+    var religion_data = { "Unknown": 0 };
+    var religion_array = [];
+
+    // For each legislator, increment the key associated with their religion
+    for (var i = 0; i < data.length; i++) {
+      var d = data[i];
+
+      // Make sure they have a religion listed
+      if (d.bio.religion) {
+
+        // If the key already exists, increment it
+        if (religion_data[d.bio.religion]) {
+          religion_data[d.bio.religion]++;
+        }
+
+        // Otherwise, initialize a new key as 1
+        else {
+          religion_data[d.bio.religion] = 1;
+        }
+      }
+
+      // If they don't have a religion in their bio, we'll increment "Unknown"
+      else {
+        religion_data["Unknown"]++;
+      }
+    }
+
+    // Now convert our object to an array for use in the pie chart
+    for (var e in religion_data) {
+      religion_array.push({
+        name: e,
+        count: religion_data[e]
+      });
+    }
+
+    return religion_array;
+  };
+
+  var width = 960;
+  var barHeight = 25;
+  var margin = 215;
+
+  d3.json("/assets/data/legislators-current.json", function(data) {
+
+    var filtered = transform(data.legislators).filter(function(d) {
+      return d.name !== "Unknown";
+    }).sort(function(a, b) {
+      if (a.count < b.count) return 1;
+      if (a.count > b.count) return -1;
+      return 0;
+    });
+
+    var container = d3.select("div#d3religion_v0")
+      .append("svg")
+        .attr("width", width)
+        .attr("height", barHeight * filtered.length);
+
+    var x = d3.scale.linear()
+      .domain([0, d3.max(filtered.map(function(d) { return d.count; }))])
+      .range([0, width - margin]);
+
+    // Add the arc segments to our visualization
+    var bar = container.selectAll("g")
+      .data(filtered)
+      .enter()
+      .append("g")
+        .attr("transform", function(d, i) { return "translate(0, " + i * barHeight + ")"; });
+
+    bar.append("rect")
+      .attr("width", function(d) { return x(d.count); })
+      .attr("height", barHeight - 1)
+      .attr("transform", function(d, i) { return "translate(" + (width - margin - x(d.count)) + ", 0)"})
+      .style("fill", "steelblue");
+
+    bar.append("text")
+      .attr("x", width - margin + 5)
+      .attr("y", barHeight / 2)
+      .attr("dy", ".35em")
+      .style("font-size", "15px")
+      .style("font-family", "open_sans")
+      .text(function(d) { return d.name; });
+
+    bar.append("text")
+      .attr("x", function(d) { return width - margin - x(d.count) + 5; })
+      .attr("y", barHeight / 2)
+      .attr("dy", ".35em")
+      .style("font-size", "15px")
+      .style("font-family", "open_sans")
+      .style("fill", "white")
+      .text(function(d) { return d.count; });
+
+  });
+})();
diff --git a/assets/scripts/d3/religion_v1.js b/assets/scripts/d3/religion_v1.js
new file mode 100644
index 0000000..4b8f733
--- /dev/null
+++ b/assets/scripts/d3/religion_v1.js
@@ -0,0 +1,60 @@
+(function() {
+
+  var transform = function(data) {
+    // Set up an object and an array to use
+    var religion_data = { "Known": 0, "Unknown": 0 };
+    var religion_array = [];
+
+    // For each legislator, increment the key associated with their religion
+    for (var i = 0; i < data.length; i++) {
+      var d = data[i];
+
+      if (!d.bio.religion || d.bio.religion === "Unknown") {
+        religion_data["Unknown"]++;
+      } else {
+        religion_data["Known"]++;
+      }
+    }
+
+    // Now convert our object to an array for use in the pie chart
+    for (var e in religion_data) {
+      religion_array.push({
+        name: e,
+        count: religion_data[e]
+      });
+    }
+
+    return religion_array;
+  };
+
+  var width = 960;
+  var height = 400;
+  var radius = Math.min(width, height) / 2;
+
+  var pie = d3.layout.pie()
+    .value(function(d) { return d.count; })
+    .sort(null);
+
+  var container = d3.select("div#d3religion_v1")
+    .append("svg")
+      .attr("width", width)
+      .attr("height", height);
+
+  var donut = container.append("g")
+    .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
+
+  var arc = d3.svg.arc()
+    .outerRadius(radius)
+    .innerRadius(radius / 2);
+
+  d3.json("/assets/data/legislators-current.json", function(data) {
+
+    // Add the arc segments to our visualization
+    donut.selectAll("path")
+      .data(pie(transform(data.legislators)))
+      .enter()
+      .append("path")
+        .attr("d", arc)
+        .attr("fill", function(d) { return d.data.name === "Unknown" ? "#ddd" : "steelblue"; });
+    });
+})();