D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
wmerrow
Full window
Github gist
Intermediate D3 - Module 1 - Scatterplot
<!DOCTYPE html> <head> <html lang="en"> <meta charset="utf-8"> <title>2016 Candidates</title> <script type="text/javascript" src="https://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>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js