Created
November 5, 2015 02:01
-
-
Save wmerrow/da9874a3ca8b59a67a05 to your computer and use it in GitHub Desktop.
Intermediate D3 - Module 1 - Scatterplot
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 | Party | 3QCampaignRaised | CampaignRaised | CampaignOnHand | BurnRate | PACRaised | PollingAverage | MarketOdds | EndorsementPoints | ImageLink | Offset | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Ben Carson | Republican | 20 | 31 | 11.3 | 0.65 | 3.8 | 0.222 | 9 | 0 | carson.png | 0 | |
| Chris Christie | Republican | 4.2 | 4.2 | 1.4 | 0.67 | 11 | 0.018 | 5 | 25 | christie.png | -1 | |
| Donald Trump | Republican | 3.9 | 5.8 | 0.3 | 0.96 | 0 | 0.27 | 20 | 0 | trump.png | 0 | |
| Jeb Bush | Republican | 13.4 | 24.8 | 10.3 | 0.59 | 103 | 0.066 | 10 | 37 | bush.png | 0 | |
| Marco Rubio | Republican | 5.7 | 15 | 11 | 0.39 | 31.9 | 0.096 | 41 | 13 | rubio.png | 0 | |
| Mike Huckabee | Republican | 1.2 | 3.2 | 0.8 | 0.77 | 3.6 | 0.03 | 2 | 24 | huckabee.png | 3 | |
| Rand Paul | Republican | 2.5 | 9.5 | 2 | 0.78 | 6.7 | 0.028 | 0 | 15 | paul.png | 0 | |
| John Kasich | Republican | 4.4 | 4.4 | 2.7 | 0.4 | 11 | 0.022 | 1 | 14 | kasich.png | 0 | |
| Ted Cruz | Republican | 12.2 | 26 | 13.5 | 0.49 | 38 | 0.07 | 10 | 8 | cruz.png | 1 | |
| Carly Fiorina | Republican | 6.8 | 8.2 | 5.5 | 0.35 | 3.4 | 0.056 | 2 | 3 | fiorina.png | 0 |
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> | |
| <head> | |
| <html lang="en"> | |
| <meta charset="utf-8"> | |
| <title>2016 Candidates</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
| <style type="text/css"> | |
| p1 {color: black; font-size: 12px;} | |
| body { | |
| background-color: whitesmoke; font-family: sans-serif; | |
| } | |
| #container{ | |
| width: 720px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 50px; | |
| padding: 10px; | |
| background-color: white; | |
| box-shadow: 4px 4px 4px 4px #ccc; | |
| } | |
| svg { | |
| background-color: white; | |
| } | |
| g.datapoint:hover text { | |
| opacity: 1; | |
| } | |
| g.datapoint:hover rect { | |
| opacity: 1; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; stroke: rgb(200,200,200); shape-rendering: crispEdges; } | |
| .y.axis path, | |
| .y.axis text {font-size: 14px;} | |
| .x.axis path, | |
| .x.axis text {font-size: 14px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| </div> | |
| <script type="text/javascript"> | |
| //dimensions of the svg canvas | |
| var w = 700; | |
| var h = 700; | |
| //PADDING: | |
| //padding will leave blank space between the chart area and the svg edges | |
| var padding = [100, 100, 100, 100]; | |
| //SCALES: | |
| //creates an ordinal scale for the x axis (years), sets range bands (in pixels) | |
| var xScale = d3.scale.linear().range([padding[3], w-padding[1]]); | |
| //creates a linear scale for the y axis (# PACs), sets range (in pixels) | |
| var yScale = d3.scale.linear().range([h-padding[2]-padding[0],0]); | |
| var moneyscale = 0.7 | |
| var ttime = 5000 | |
| var delaytime = 0 | |
| var startingr = 3 | |
| var imagewidth = 70 | |
| //AXES: | |
| //creates a var for an x axis at the bottom of the chart | |
| var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5).tickSize(0,0).tickPadding(6); | |
| //creates a var for a y axis at the left of the chart | |
| var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(6,"%").tickSize(-w+padding[1]+padding[3],0).tickPadding(6); | |
| //creates a var for an SVG | |
| var svg = d3.select("#container").append("svg").attr("width",w).attr("height",h); | |
| d3.csv("2016Rcandidates2.csv", function(data) { | |
| //sets x axis domain (ordinal scale) | |
| xScale.domain([0, 40]); | |
| //sets y axis domain from 0 to max number of super pacs (linear scale) - expressed as an array of two numbers, 0 to max. | |
| yScale.domain([0, .31]); | |
| //DRAW AXES: | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + (h - padding[2]) + ")") | |
| .call(xAxis) | |
| .attr("opacity",0) | |
| .transition() | |
| .delay(ttime) | |
| .duration(ttime) | |
| .attr("opacity",1); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + padding[3] + "," + padding[0] + ")") | |
| .call(yAxis) | |
| .attr("opacity",0) | |
| .transition() | |
| .duration(ttime) | |
| .attr("opacity",1) | |
| ; | |
| //TITLES | |
| svg.append("text") | |
| .attr("x",15) | |
| .attr("y",35) | |
| .attr("font-size",24) | |
| .attr("font-weight","bold") | |
| .text("All Over the Map") | |
| ; | |
| svg.append("text") | |
| .attr("x",15) | |
| .attr("y",55) | |
| .attr("font-size",16) | |
| .text("For Republican candidates, no correlation between polling, endorsements, and fundraising") | |
| ; | |
| //AXIS LABELS | |
| svg.append("text") | |
| .attr("x",padding[3]+(w-padding[3]-padding[1])/2) | |
| .attr("y",h-padding[2]/2+5) | |
| .attr("font-weight","bold") | |
| .attr("opacity",0) | |
| .attr("text-anchor","middle") | |
| .text("Endorsements") | |
| .transition() | |
| .delay(ttime) | |
| .duration(ttime) | |
| .attr("opacity",1) | |
| ; | |
| svg.append("text") | |
| .attr("text-anchor", "middle") | |
| .attr("y", padding[3]/2-10) | |
| .attr("x",-h/2+20) | |
| .attr("transform", "rotate(-90)") | |
| .attr("font-weight","bold") | |
| .attr("opacity",0) | |
| .attr("text-anchor","middle") | |
| .text("Polling Average") | |
| .transition() | |
| .duration(ttime) | |
| .attr("opacity",1) | |
| ; | |
| //CIRCLE LEGEND | |
| svg.append("circle") | |
| .attr("cx",w-.25*w) | |
| .attr("cy",h-.75*h) | |
| .attr("r",moneyscale*50) | |
| .attr("fill","rgba(0,0,0,.05)") | |
| .attr("stroke","rgba(0,0,0,.3)") | |
| .attr("opacity",0) | |
| .transition() | |
| .delay(ttime*2) | |
| .duration(ttime) | |
| .attr("opacity",1) | |
| ; | |
| svg.append("circle") | |
| .attr("cx",w-.25*w) | |
| .attr("cy",h-.75*h) | |
| .attr("r",moneyscale*10) | |
| .attr("fill","rgba(0,0,0,.3)") | |
| .attr("opacity",0) | |
| .transition() | |
| .delay(ttime*2) | |
| .duration(ttime) | |
| .attr("opacity",1) | |
| ; | |
| svg.append("text") | |
| .attr("x", w-.25*w+45) | |
| .attr("y",h-.75*h-15) | |
| .text("PAC Fundraising") | |
| .attr("font-size",11) | |
| .attr("opacity",0) | |
| .transition() | |
| .delay(ttime*2) | |
| .duration(ttime) | |
| .attr("opacity",.6); | |
| svg.append("line") | |
| .attr("x1", w-.25*w+12) | |
| .attr("y1",h-.75*h-18) | |
| .attr("x2", w-.25*w+42) | |
| .attr("y2",h-.75*h-18) | |
| .attr("stroke","black") | |
| .attr("opacity",0) | |
| .transition() | |
| .delay(ttime*2) | |
| .duration(ttime) | |
| .attr("opacity",.2); | |
| svg.append("text") | |
| .attr("x", w-.25*w+45) | |
| .attr("y",h-.75*h+2) | |
| .text("Campaign Fundraising") | |
| .attr("font-size",11) | |
| .attr("opacity",0) | |
| .transition() | |
| .delay(ttime*2) | |
| .duration(ttime) | |
| .attr("opacity",.6); | |
| svg.append("line") | |
| .attr("x1", w-.25*w+1) | |
| .attr("y1",h-.75*h-1) | |
| .attr("x2", w-.25*w+42) | |
| .attr("y2",h-.75*h-1) | |
| .attr("stroke","black") | |
| .attr("opacity",0) | |
| .transition() | |
| .delay(ttime*2) | |
| .duration(ttime) | |
| .attr("opacity",.2); | |
| svg.append("text") | |
| .attr("x", w-.25*w) | |
| .attr("y",h-.75*h-38) | |
| .text("$50m") | |
| .attr("font-size",11) | |
| .attr("text-anchor","middle") | |
| .attr("opacity",0) | |
| .transition() | |
| .delay(ttime*2) | |
| .duration(ttime) | |
| .attr("opacity",.6); | |
| //SOURCES TEXT | |
| svg.append("text") | |
| .attr("x", 10) | |
| .attr("y",h-4) | |
| .text("Sources: New York Times, Wall Street Journal, FiveThirtyEight, RealClearPolitics") | |
| .attr("font-size",11) | |
| .attr("opacity",0) | |
| .transition() | |
| .delay(ttime*3) | |
| .duration(ttime) | |
| .attr("opacity",.7); | |
| //CIRCLE AND LABEL VARS | |
| var groups = svg.selectAll("circ") | |
| .data(data) | |
| .enter() | |
| .append("g") | |
| .attr("class", "datapoint") | |
| ; | |
| var PACcircles = | |
| groups | |
| .append("circle") | |
| ; | |
| var Campaigncircles = | |
| groups | |
| .append("circle") | |
| ; | |
| var tooltiprects = | |
| groups | |
| .append("rect"); | |
| var candnames = | |
| groups | |
| .append("text"); | |
| var PACtooltips = | |
| groups | |
| .append("text"); | |
| var Campaigntooltips = | |
| groups | |
| .append("text"); | |
| //DRAW PAC CIRCLES | |
| PACcircles | |
| .attr("cx",padding[0]) | |
| .attr("cy",h-padding[2]) | |
| .attr("stroke","rgba(150,0,0,0)") | |
| .attr("fill","rgba(150,0,0,0)") | |
| .attr("r", startingr) | |
| .transition() | |
| .duration(ttime) | |
| .attr("cy",function(d){return padding[0]+yScale(d.PollingAverage);}) | |
| .attr("stroke","rgba(150,0,0,.3)") | |
| .attr("fill","rgba(150,0,0,.1)") | |
| .transition() | |
| .duration(ttime) | |
| .attr("cx",function(d){return xScale(d.EndorsementPoints);}) | |
| .transition() | |
| .duration(ttime) | |
| .attr("r", function(d){return moneyscale*d.PACRaised + moneyscale*d.CampaignRaised;}) | |
| ; | |
| //DRAW CAMPAIGN CIRCLES | |
| Campaigncircles | |
| .attr("cx",padding[0]) | |
| .attr("cy",h-padding[2]) | |
| .attr("fill","rgba(150,0,0,0)") | |
| .attr("r", startingr) | |
| .transition() | |
| .duration(ttime) | |
| .attr("cy",function(d){return padding[0]+yScale(d.PollingAverage);}) | |
| .attr("fill","rgba(150,0,0,.8)") | |
| //transition to grid | |
| .transition() | |
| .duration(ttime) | |
| .attr("cx",function(d){return xScale(d.EndorsementPoints);}).transition() | |
| .attr("r", function(d){return moneyscale*d.CampaignRaised;}) | |
| ; | |
| //DRAW TOOLTIPS | |
| //TOOLTIP RECTS | |
| tooltiprects | |
| .attr("x",function(d){return 1 + xScale(d.EndorsementPoints) + | |
| moneyscale*d.CampaignRaised | |
| ; | |
| }) | |
| .attr("y",function(d){return 4 + padding[0] + yScale(d.PollingAverage) - 11 | |
| ; | |
| }) | |
| .attr("width",98) | |
| .attr("height",49) | |
| .attr("fill","white") | |
| .attr("stroke","lightgray") | |
| .attr("opacity",0) | |
| ; | |
| //DRAW CANDIDATE NAMES | |
| candnames | |
| //starting positions (invisible) | |
| .attr("x",padding[0]+6) | |
| .attr("y",h-padding[2]) | |
| .attr("font-size",11) | |
| .attr("opacity",0) | |
| .text(function(d){return d.Candidate;}) | |
| //transition up y axis and become visible | |
| .transition() | |
| .duration(ttime) | |
| .attr("y",function(d){return 4+padding[0]+yScale(d.PollingAverage)-2*d.Offset;}) | |
| .attr("opacity",1) | |
| //transition to grid | |
| .transition() | |
| .duration(ttime) | |
| .attr("x",function(d){return 5+xScale(d.EndorsementPoints);}) | |
| .attr("y",function(d){return 4+padding[0]+yScale(d.PollingAverage);}) | |
| //transition to expand with bubble | |
| .transition() | |
| .duration(ttime) | |
| .attr("x",function(d){return 3 + xScale(d.EndorsementPoints) + | |
| moneyscale*d.CampaignRaised | |
| ; | |
| }) | |
| .attr("y",function(d){return 4 + padding[0] + yScale(d.PollingAverage) | |
| ; | |
| }) | |
| ; | |
| PACtooltips | |
| .attr("x",function(d){return 3 + xScale(d.EndorsementPoints) + | |
| moneyscale*d.CampaignRaised | |
| ; | |
| }) | |
| .attr("y",function(d){return 4 + padding[0] + yScale(d.PollingAverage) + 28 | |
| ; | |
| }) | |
| .attr("font-size",10) | |
| .attr("fill","rgb(150,0,0)") | |
| .attr("opacity",0) | |
| .text(function(d){return "$"+d.PACRaised+"m PAC";}) | |
| ; | |
| Campaigntooltips | |
| .attr("x",function(d){return 3 + xScale(d.EndorsementPoints) + | |
| moneyscale*d.CampaignRaised | |
| ; | |
| }) | |
| .attr("y",function(d){return 4 + padding[0] + yScale(d.PollingAverage) + 15 | |
| ; | |
| }) | |
| .attr("font-size",10) | |
| .attr("fill","rgb(150,0,0)") | |
| .attr("font-weight","bold") | |
| .attr("opacity",0) | |
| .text(function(d){return "$"+d.CampaignRaised+"m Campaign";}) | |
| ; | |
| } ); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment