Built with blockbuilder.org
Last active
December 22, 2015 08:39
-
-
Save ssdatar/c9a14a84e7f3e07cf3a9 to your computer and use it in GitHub Desktop.
Bubble chart with buttons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Candidate | State | Name | Past | Amount | |
---|---|---|---|---|---|
rubio | AK | Alaska | R | 10.5 | |
rubio | AL | Alabama | R | 10.47 | |
rubio | AR | Arkansas | R | 4.55 | |
rubio | AZ | Arizona | R | 46.13 | |
rubio | CA | California | D | 82.55 | |
rubio | CO | Colorado | D | 26.85 | |
rubio | CT | Connecticut | D | 54.03 | |
rubio | DC | Washington DC | D | 319.87 | |
rubio | DE | Delaware | D | 5.52 | |
rubio | FL | Florida | D | 197.42 | |
rubio | GA | Georgia | R | 30.08 | |
rubio | HI | Hawaii | D | 9.99 | |
rubio | IA | Iowa | D | 10.06 | |
rubio | ID | Idaho | R | 18.54 | |
rubio | IL | Illinois | D | 38.78 | |
rubio | IN | Indiana | R | 18.67 | |
rubio | KS | Kansas | R | 11.33 | |
rubio | KY | Kentucky | R | 8.24 | |
rubio | LA | Louisiana | R | 31.8 | |
rubio | MA | Massachusetts | D | 89.38 | |
rubio | MD | Maryland | D | 25.33 | |
rubio | ME | Maine | D | 4.88 | |
rubio | MI | Michigan | D | 10.87 | |
rubio | MN | Minnesota | D | 7.75 | |
rubio | MO | Missouri | R | 12.02 | |
rubio | MS | Mississippi | R | 6.86 | |
rubio | MT | Montana | R | 23.52 | |
rubio | NC | North Carolina | R | 14.24 | |
rubio | ND | North Dakota | R | 4.46 | |
rubio | NE | Nebraska | R | 10.03 | |
rubio | NH | New Hampshire | D | 28.83 | |
rubio | NJ | New Jersey | D | 28.46 | |
rubio | NM | New Mexico | D | 5.76 | |
rubio | NV | Nevada | D | 77.67 | |
rubio | NY | New York | D | 56.65 | |
rubio | OH | Ohio | D | 30.47 | |
rubio | OK | Oklahoma | R | 11.93 | |
rubio | OR | Oregon | D | 12.9 | |
rubio | PA | Pennsylvania | D | 20.67 | |
rubio | RI | Rhode Island | D | 6.24 | |
rubio | SC | South Carolina | R | 70.88 | |
rubio | SD | South Dakota | R | 9.63 | |
rubio | TN | Tennessee | R | 19.38 | |
rubio | TX | Texas | R | 65.52 | |
rubio | UT | Utah | R | 9.64 | |
rubio | VA | Virginia | D | 55.01 | |
rubio | VT | Vermont | D | 111.08 | |
rubio | WA | Washington | D | 31.21 | |
rubio | WI | Wisconsin | D | 7.66 | |
rubio | WV | West Virginia | R | 1.52 | |
rubio | WY | Wyoming | R | 40.24 | |
clinton | AK | Alaska | R | 42.12 | |
clinton | AL | Alabama | R | 26.26 | |
clinton | AR | Arkansas | R | 180.86 | |
clinton | AZ | Arizona | R | 41.66 | |
clinton | CA | California | D | 364.67 | |
clinton | CO | Colorado | D | 259.93 | |
clinton | CT | Connecticut | D | 320.75 | |
clinton | DC | Washington DC | D | 5307.21 | |
clinton | DE | Delaware | D | 51.81 | |
clinton | FL | Florida | D | 219.94 | |
clinton | GA | Georgia | R | 89.54 | |
clinton | HI | Hawaii | D | 39.26 | |
clinton | IA | Iowa | D | 36.95 | |
clinton | ID | Idaho | R | 29.59 | |
clinton | IL | Illinois | D | 205.93 | |
clinton | IN | Indiana | R | 62.6 | |
clinton | KS | Kansas | R | 68.07 | |
clinton | KY | Kentucky | R | 21.25 | |
clinton | LA | Louisiana | R | 84.99 | |
clinton | MA | Massachusetts | D | 398.42 | |
clinton | MD | Maryland | D | 361.89 | |
clinton | ME | Maine | D | 155.73 | |
clinton | MI | Michigan | D | 69.23 | |
clinton | MN | Minnesota | D | 163.12 | |
clinton | MO | Missouri | R | 164.4 | |
clinton | MS | Mississippi | R | 27.42 | |
clinton | MT | Montana | R | 28.15 | |
clinton | NC | North Carolina | R | 81.28 | |
clinton | ND | North Dakota | R | 12.31 | |
clinton | NE | Nebraska | R | 20.06 | |
clinton | NH | New Hampshire | D | 153.92 | |
clinton | NJ | New Jersey | D | 178.74 | |
clinton | NM | New Mexico | D | 182.32 | |
clinton | NV | Nevada | D | 160.51 | |
clinton | NY | New York | D | 578.46 | |
clinton | OH | Ohio | D | 66.2 | |
clinton | OK | Oklahoma | R | 37.72 | |
clinton | OR | Oregon | D | 120.53 | |
clinton | PA | Pennsylvania | D | 129.64 | |
clinton | RI | Rhode Island | D | 261.07 | |
clinton | SC | South Carolina | R | 71.93 | |
clinton | SD | South Dakota | R | 36.53 | |
clinton | TN | Tennessee | R | 57.44 | |
clinton | TX | Texas | R | 134.58 | |
clinton | UT | Utah | R | 93.77 | |
clinton | VA | Virginia | D | 249.49 | |
clinton | VT | Vermont | D | 108.99 | |
clinton | WA | Washington | D | 141.73 | |
clinton | WI | Wisconsin | D | 45.96 | |
clinton | WV | West Virginia | R | 27.15 | |
clinton | WY | Wyoming | R | 45.81 | |
cruz | AK | Alaska | R | 27.06 | |
cruz | AL | Alabama | R | 31.45 | |
cruz | AR | Arkansas | R | 20.54 | |
cruz | AZ | Arizona | R | 36.26 | |
cruz | CA | California | D | 37.82 | |
cruz | CO | Colorado | D | 59.66 | |
cruz | CT | Connecticut | D | 28.74 | |
cruz | DC | Washington DC | D | 107.59 | |
cruz | DE | Delaware | D | 33.07 | |
cruz | FL | Florida | D | 58.95 | |
cruz | GA | Georgia | R | 46.29 | |
cruz | HI | Hawaii | D | 30.79 | |
cruz | IA | Iowa | D | 25.82 | |
cruz | ID | Idaho | R | 27.73 | |
cruz | IL | Illinois | D | 37.98 | |
cruz | IN | Indiana | R | 18.04 | |
cruz | KS | Kansas | R | 36.71 | |
cruz | KY | Kentucky | R | 17.29 | |
cruz | LA | Louisiana | R | 34.48 | |
cruz | MA | Massachusetts | D | 12.2 | |
cruz | MD | Maryland | D | 25.72 | |
cruz | ME | Maine | D | 7.54 | |
cruz | MI | Michigan | D | 22.3 | |
cruz | MN | Minnesota | D | 12.32 | |
cruz | MO | Missouri | R | 57.52 | |
cruz | MS | Mississippi | R | 13.84 | |
cruz | MT | Montana | R | 44.51 | |
cruz | NC | North Carolina | R | 29.9 | |
cruz | ND | North Dakota | R | 14.69 | |
cruz | NE | Nebraska | R | 15.97 | |
cruz | NH | New Hampshire | D | 23.93 | |
cruz | NJ | New Jersey | D | 19.98 | |
cruz | NM | New Mexico | D | 66.11 | |
cruz | NV | Nevada | D | 35.69 | |
cruz | NY | New York | D | 34.99 | |
cruz | OH | Ohio | D | 24.24 | |
cruz | OK | Oklahoma | R | 50.17 | |
cruz | OR | Oregon | D | 22.29 | |
cruz | PA | Pennsylvania | D | 32.53 | |
cruz | RI | Rhode Island | D | 11.57 | |
cruz | SC | South Carolina | R | 31.08 | |
cruz | SD | South Dakota | R | 18.51 | |
cruz | TN | Tennessee | R | 37.99 | |
cruz | TX | Texas | R | 503.96 | |
cruz | UT | Utah | R | 23.41 | |
cruz | VA | Virginia | D | 51.68 | |
cruz | VT | Vermont | D | 25.68 | |
cruz | WA | Washington | D | 34.81 | |
cruz | WI | Wisconsin | D | 7.79 | |
cruz | WV | West Virginia | R | 65.49 | |
cruz | WY | Wyoming | R | 74.15 | |
sanders | AK | Alaska | R | 2.6 | |
sanders | AL | Alabama | R | 0.18 | |
sanders | AR | Arkansas | R | 0.17 | |
sanders | AZ | Arizona | R | 0.61 | |
sanders | CA | California | D | 1.79 | |
sanders | CO | Colorado | D | 0.6 | |
sanders | CT | Connecticut | D | 1.88 | |
sanders | DC | Washington DC | D | 0.11 | |
sanders | DE | Delaware | D | 0.17 | |
sanders | FL | Florida | D | 0.34 | |
sanders | GA | Georgia | R | 0.11 | |
sanders | HI | Hawaii | D | 1.37 | |
sanders | IA | Iowa | D | 1.11 | |
sanders | ID | Idaho | R | 0.69 | |
sanders | IL | Illinois | D | 1.2 | |
sanders | IN | Indiana | R | 0.77 | |
sanders | KS | Kansas | R | 0.56 | |
sanders | KY | Kentucky | R | 0.23 | |
sanders | LA | Louisiana | R | 0 | |
sanders | MA | Massachusetts | D | 4.34 | |
sanders | MD | Maryland | D | 0.87 | |
sanders | ME | Maine | D | 1.64 | |
sanders | MI | Michigan | D | 0.76 | |
sanders | MN | Minnesota | D | 0.88 | |
sanders | MO | Missouri | R | 0.37 | |
sanders | MS | Mississippi | R | 0.07 | |
sanders | MT | Montana | R | 1.01 | |
sanders | NC | North Carolina | R | 0.3 | |
sanders | ND | North Dakota | R | 0 | |
sanders | NE | Nebraska | R | 0.1 | |
sanders | NH | New Hampshire | D | 4.36 | |
sanders | NJ | New Jersey | D | 0.79 | |
sanders | NM | New Mexico | D | 2.01 | |
sanders | NV | Nevada | D | 0.21 | |
sanders | NY | New York | D | 1.25 | |
sanders | OH | Ohio | D | 0.44 | |
sanders | OK | Oklahoma | R | 0.08 | |
sanders | OR | Oregon | D | 1.92 | |
sanders | PA | Pennsylvania | D | 0.87 | |
sanders | RI | Rhode Island | D | 3.75 | |
sanders | SC | South Carolina | R | 0 | |
sanders | SD | South Dakota | R | 0 | |
sanders | TN | Tennessee | R | 0.52 | |
sanders | TX | Texas | R | 0.81 | |
sanders | UT | Utah | R | 0.18 | |
sanders | VA | Virginia | D | 0.44 | |
sanders | VT | Vermont | D | 61.07 | |
sanders | WA | Washington | D | 1.45 | |
sanders | WI | Wisconsin | D | 1.18 | |
sanders | WV | West Virginia | R | 0.13 | |
sanders | WY | Wyoming | R | 1.42 | |
bush | AK | Alaska | R | 8.66 | |
bush | AL | Alabama | R | 49.46 | |
bush | AR | Arkansas | R | 55.56 | |
bush | AZ | Arizona | R | 30.86 | |
bush | CA | California | D | 72.82 | |
bush | CO | Colorado | D | 39.81 | |
bush | CT | Connecticut | D | 253.39 | |
bush | DC | Washington DC | D | 983.58 | |
bush | DE | Delaware | D | 20.71 | |
bush | FL | Florida | D | 266.21 | |
bush | GA | Georgia | R | 72.14 | |
bush | HI | Hawaii | D | 3.82 | |
bush | IA | Iowa | D | 18.96 | |
bush | ID | Idaho | R | 16.24 | |
bush | IL | Illinois | D | 41.81 | |
bush | IN | Indiana | R | 41.47 | |
bush | KS | Kansas | R | 23.44 | |
bush | KY | Kentucky | R | 11.06 | |
bush | LA | Louisiana | R | 58.49 | |
bush | MA | Massachusetts | D | 50.55 | |
bush | MD | Maryland | D | 65.06 | |
bush | ME | Maine | D | 96.48 | |
bush | MI | Michigan | D | 47.24 | |
bush | MN | Minnesota | D | 23.93 | |
bush | MO | Missouri | R | 50.35 | |
bush | MS | Mississippi | R | 38.63 | |
bush | MT | Montana | R | 28.86 | |
bush | NC | North Carolina | R | 38.81 | |
bush | ND | North Dakota | R | 10.89 | |
bush | NE | Nebraska | R | 12.3 | |
bush | NH | New Hampshire | D | 39.37 | |
bush | NJ | New Jersey | D | 88.28 | |
bush | NM | New Mexico | D | 8.29 | |
bush | NV | Nevada | D | 85.27 | |
bush | NY | New York | D | 156.49 | |
bush | OH | Ohio | D | 19.83 | |
bush | OK | Oklahoma | R | 54.81 | |
bush | OR | Oregon | D | 46.74 | |
bush | PA | Pennsylvania | D | 17.19 | |
bush | RI | Rhode Island | D | 55.29 | |
bush | SC | South Carolina | R | 34.61 | |
bush | SD | South Dakota | R | 6.75 | |
bush | TN | Tennessee | R | 106.38 | |
bush | TX | Texas | R | 101.48 | |
bush | UT | Utah | R | 96.07 | |
bush | VA | Virginia | D | 142.46 | |
bush | VT | Vermont | D | 14.54 | |
bush | WA | Washington | D | 38.63 | |
bush | WI | Wisconsin | D | 13.33 | |
bush | WV | West Virginia | R | 5.26 | |
bush | WY | Wyoming | R | 33.62 | |
trump | AK | Alaska | R | 4.68 | |
trump | AL | Alabama | R | 3.57 | |
trump | AR | Arkansas | R | 1.58 | |
trump | AZ | Arizona | R | 4.08 | |
trump | CA | California | D | 3.45 | |
trump | CO | Colorado | D | 8.04 | |
trump | CT | Connecticut | D | 2.89 | |
trump | DC | Washington DC | D | 4.45 | |
trump | DE | Delaware | D | 0.89 | |
trump | FL | Florida | D | 7.06 | |
trump | GA | Georgia | R | 3.44 | |
trump | HI | Hawaii | D | 7 | |
trump | IA | Iowa | D | 4.26 | |
trump | ID | Idaho | R | 2.69 | |
trump | IL | Illinois | D | 1.77 | |
trump | IN | Indiana | R | 1.15 | |
trump | KS | Kansas | R | 2.56 | |
trump | KY | Kentucky | R | 1.58 | |
trump | LA | Louisiana | R | 5.25 | |
trump | MA | Massachusetts | D | 18.5 | |
trump | MD | Maryland | D | 1.98 | |
trump | ME | Maine | D | 0.98 | |
trump | MI | Michigan | D | 1.13 | |
trump | MN | Minnesota | D | 1.2 | |
trump | MO | Missouri | R | 0.93 | |
trump | MS | Mississippi | R | 4.48 | |
trump | MT | Montana | R | 4.75 | |
trump | NC | North Carolina | R | 1.32 | |
trump | ND | North Dakota | R | 3.34 | |
trump | NE | Nebraska | R | 2.88 | |
trump | NH | New Hampshire | D | 5.97 | |
trump | NJ | New Jersey | D | 1.97 | |
trump | NM | New Mexico | D | 1.16 | |
trump | NV | Nevada | D | 6.84 | |
trump | NY | New York | D | 3.71 | |
trump | OH | Ohio | D | 1.82 | |
trump | OK | Oklahoma | R | 3.07 | |
trump | OR | Oregon | D | 1.28 | |
trump | PA | Pennsylvania | D | 1.79 | |
trump | RI | Rhode Island | D | 4.16 | |
trump | SC | South Carolina | R | 5.65 | |
trump | SD | South Dakota | R | 3.62 | |
trump | TN | Tennessee | R | 4.91 | |
trump | TX | Texas | R | 5.75 | |
trump | UT | Utah | R | 0.94 | |
trump | VA | Virginia | D | 2.39 | |
trump | VT | Vermont | D | 0.4 | |
trump | WA | Washington | D | 3.11 | |
trump | WI | Wisconsin | D | 2.71 | |
trump | WV | West Virginia | R | 1.72 | |
trump | WY | Wyoming | R | 1.38 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title> Who's Giving Them Money? </title> | |
<meta charset = "utf-8"> | |
<link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
<link rel = "stylesheet" href = "style.css"> | |
<script src="http://d3js.org/d3.v3.js"></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script> | |
</head> | |
<body> | |
<div class="container"> | |
<h1> Who's Giving Them Money? </h1> | |
<div class="row"> | |
<div class="col-sm-6"> | |
<p> A look at the individual contributions to prominent candidates in the 2016 presidential campaign. The visualization below looks at the amount per 1,000 persons in each state of the US. Data has been sourced from the <strong> Federal Election Commission </strong> website, and is from April 1, 2015 to September 30, 2015. </p> | |
</div> | |
</div> | |
<button type="button" class="btn btn-primary" id="clinton">Hillary Clinton</button> | |
<button type="button" class="btn btn-primary"id="rubio">Marco Rubio</button> | |
<button type="button" class="btn btn-primary" id="sanders">Bernie Sanders</button> | |
<button type="button" class="btn btn-primary" id="cruz">Ted Cruz</button> | |
<button type="button" class="btn btn-primary" id="trump">Donald J. Trump</button> | |
<button type="button" class="btn btn-primary"id="bush">Jeb Bush</button> | |
<!--div class="btn-group" data-toggle="buttons"> | |
<label class="btn btn-primary active"> | |
<input type="radio" name="options" id="clinton" checked> Hillary Clinton | |
</label> | |
<label class="btn btn-primary"> | |
<input type="radio" name="options" id="rubio"> Marco Rubio | |
</label> | |
<label class="btn btn-primary"> | |
<input type="radio" name="options" id="sanders"> Bernie Sanders | |
</label> | |
<label class="btn btn-primary"> | |
<input type="radio" name="options" id="cruz"> Ted Cruz | |
</label> | |
<label class="btn btn-primary"> | |
<input type="radio" name="options" id="trump"> Donald Trump | |
</label> | |
<label class="btn btn-primary"> | |
<input type="radio" name="options" id="bush"> Jeb Bush | |
</label> | |
</div--> | |
<div id ="viz"></div> | |
<script> | |
var tooltip = d3.tip().attr('class', 'd3-tip').html( | |
function(d) { | |
return d['Candidate'] + ': $' + d['Amount']; | |
}); | |
var diameter = 600 | |
var color = d3.scale.ordinal() | |
.domain(['R','D']) | |
.range(['#B2182B','#2166AC']); | |
var bubble = d3.layout.pack() | |
.sort(null) | |
.size([diameter, diameter]) | |
.padding(3.5); | |
var svg = d3.select("#viz") | |
.append("svg") | |
.attr("width", diameter) | |
.attr("height", diameter) | |
.attr("class", "bubble"); | |
/* modified d3-tip boilerplate */ | |
/* Invoke the tip in the context of your visualization */ | |
svg.call(tooltip); | |
function draw(candidate) { | |
d3.csv("Candidates.csv", function(error, data) { | |
data = data.filter(function(d) { | |
return d["Candidate"] == candidate; | |
}); | |
//console.log(data); | |
svg.selectAll("g").remove(); | |
//console.log(data); | |
// var nest = d3.keys(function(d){ | |
// return d['Candidate']; }) | |
// .entries(data); | |
//console.log(nest); | |
data = data.map(function(d) { | |
d.value = +d["Amount"]; | |
return d; | |
}); | |
//console.log(data); | |
var nodes = bubble.nodes({children: data }) | |
.filter(function(d) { | |
return !d.children; | |
}); | |
//console.log(nodes); | |
// var chart = svg.selectAll('circle') | |
// .data(nodes, function(d) { | |
// return d; | |
// }); | |
// chart.transition() | |
// .duration(1000) | |
// .attr("transform", "translate(0,0)") | |
// .attr('r', function(d) {return d.r; }) | |
// chart.enter() | |
// .append('circle') | |
// .attr("r", function(d) { return d.r; }) | |
// .attr("cx", function(d) {return d.x; }) | |
// .attr("cy", function(d) { return d.y; }) | |
// .style("fill", function(d) { | |
// return color(d["Past"]); | |
// }); | |
var chart = svg.append("g") | |
.attr("transform", "translate(0,0)") | |
.selectAll(".bubble") | |
.data(nodes) | |
.enter() | |
//Make the bubbles and color the bubbles | |
chart.append("circle") | |
.attr("r", function(d) { return d.r; }) | |
.attr("cx", function(d) {return d.x; }) | |
.attr("cy", function(d) { return d.y; }) | |
.style("fill", function(d) { | |
return color(d["Past"]); | |
}) | |
.transition(1000); | |
//format the text for each bubble | |
chart.append("text") | |
.attr("x", function(d) { | |
return d.x; | |
}) | |
.attr("y", function(d) { | |
return d.y + 5; | |
}) | |
.attr("text-anchor", "middle") | |
.text(function(d) { | |
return d["State"]; | |
}); | |
//Hack to ensure tooltip works everywhere on the circle body | |
chart.append("circle") | |
.attr("r", function(d) { return d.r; }) | |
.attr("cx", function(d) {return d.x; }) | |
.attr("cy", function(d) { return d.y; }) | |
.style("fill", function(d) { | |
return "rgba(0,0,0,0)"; | |
}) | |
.on('mouseover', tooltip.show) | |
.on('mouseout', tooltip.hide) | |
}) | |
} | |
function choose(candidate) { | |
draw(candidate); | |
} | |
d3.select("#clinton").on("click", choose("clinton")); | |
d3.select("#rubio").on("click", choose("rubio")); | |
d3.select("#sanders").on("click", choose("sanders")); | |
d3.select("#trump").on("click", choose("trump")); | |
d3.select("#cruz").on("click", choose("cruz")); | |
d3.select("#bush").on("click", choose("bush")); | |
</script> | |
<!-- / $(document).ready(function () { | |
// $("#clinton").on("click", choose("clinton")) | |
// $("#rubio").on("click", choose("rubio")) | |
// $("#cruz").on("click", choose("cruz")) | |
// $("#bush").on("click", choose("bush")) | |
// $("#trump").on("click", choose("trump")) | |
// }); --> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var tooltip = d3.tip().attr('class', 'd3-tip').html( | |
function(d) { | |
return d['Candidate'] + ': $' + d['Amount']; | |
}); | |
var diameter = 600 | |
var color = d3.scale.ordinal() | |
.domain(['R','D']) | |
.range(['#B2182B','#2166AC']); | |
var bubble = d3.layout.pack() | |
.sort(null) | |
.size([diameter, diameter]) | |
.padding(3.5); | |
var svg = d3.select("#viz") | |
.append("svg") | |
.attr("width", diameter) | |
.attr("height", diameter) | |
.attr("class", "bubble"); | |
/* modified d3-tip boilerplate */ | |
/* Invoke the tip in the context of your visualization */ | |
svg.call(tooltip); | |
function draw(candidate) { | |
d3.csv("Candidates.csv", function(error, data) { | |
data = data.filter(function(d) { | |
return d["Candidate"] == candidate; | |
}); | |
//console.log(data); | |
svg.selectAll("g").remove(); | |
//console.log(data); | |
// var nest = d3.keys(function(d){ | |
// return d['Candidate']; }) | |
// .entries(data); | |
//console.log(nest); | |
data = data.map(function(d) { | |
d.value = +d["Amount"]; | |
return d; | |
}); | |
//console.log(data); | |
var nodes = bubble.nodes({children: data }) | |
.filter(function(d) { | |
return !d.children; | |
}); | |
//console.log(nodes); | |
// var chart = svg.selectAll('circle') | |
// .data(nodes, function(d) { | |
// return d; | |
// }); | |
// chart.transition() | |
// .duration(1000) | |
// .attr("transform", "translate(0,0)") | |
// .attr('r', function(d) {return d.r; }) | |
// chart.enter() | |
// .append('circle') | |
// .attr("r", function(d) { return d.r; }) | |
// .attr("cx", function(d) {return d.x; }) | |
// .attr("cy", function(d) { return d.y; }) | |
// .style("fill", function(d) { | |
// return color(d["Past"]); | |
// }); | |
var chart = svg.append("g") | |
.attr("transform", "translate(0,0)") | |
.selectAll(".bubble") | |
.data(nodes) | |
.enter() | |
//Make the bubbles and color the bubbles | |
chart.append("circle") | |
.attr("r", function(d) { return d.r; }) | |
.attr("cx", function(d) {return d.x; }) | |
.attr("cy", function(d) { return d.y; }) | |
.style("fill", function(d) { | |
return color(d["Past"]); | |
}) | |
.transition(1000); | |
//format the text for each bubble | |
chart.append("text") | |
.attr("x", function(d) { | |
return d.x; | |
}) | |
.attr("y", function(d) { | |
return d.y + 5; | |
}) | |
.attr("text-anchor", "middle") | |
.text(function(d) { | |
return d["State"]; | |
}); | |
//Hack to ensure tooltip works everywhere on the circle body | |
chart.append("circle") | |
.attr("r", function(d) { return d.r; }) | |
.attr("cx", function(d) {return d.x; }) | |
.attr("cy", function(d) { return d.y; }) | |
.style("fill", function(d) { | |
return "rgba(0,0,0,0)"; | |
}) | |
.on('mouseover', tooltip.show) | |
.on('mouseout', tooltip.hide) | |
}) | |
} | |
function choose(candidate) { | |
draw(candidate); | |
} | |
d3.select("#clinton").on("click", choose("clinton")); | |
d3.select("#rubio").on("click", choose("rubio")); | |
d3.select("#sanders").on("click", choose("sanders")); | |
d3.select("#trump").on("click", choose("trump")); | |
d3.select("#cruz").on("click", choose("cruz")); | |
d3.select("#bush").on("click", choose("bush")); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment