From 475275e0bb1d7e494ff3579595bf0e8dcda8474a Mon Sep 17 00:00:00 2001 From: Ben Burwell Date: Sun, 29 Mar 2015 00:45:49 -0400 Subject: Add visualizing congress with D3 post --- assets/scripts/d3/gender_terms_v0.js | 16 +++++ assets/scripts/d3/gender_terms_v1.js | 38 ++++++++++++ assets/scripts/d3/party_affiliation_v0.js | 62 ++++++++++++++++++++ assets/scripts/d3/religion_v0.js | 97 +++++++++++++++++++++++++++++++ assets/scripts/d3/religion_v1.js | 60 +++++++++++++++++++ 5 files changed, 273 insertions(+) create mode 100644 assets/scripts/d3/gender_terms_v0.js create mode 100644 assets/scripts/d3/gender_terms_v1.js create mode 100644 assets/scripts/d3/party_affiliation_v0.js create mode 100644 assets/scripts/d3/religion_v0.js create mode 100644 assets/scripts/d3/religion_v1.js (limited to 'assets/scripts/d3') 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"; }); + }); +})(); -- cgit v1.2.3