Built with blockbuilder.org
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script src="swoopyArrow.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| svg { width:100%; height: 100% } | |
| body path.arrow, #arrowhead { | |
| fill: none; | |
| stroke: black; | |
| } | |
| body path{ | |
| stroke: black; | |
| stroke-width: 1px | |
| fill:none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| // Feel free to change or delete any of the code you see! | |
| var container = d3.select('body'); | |
| var margin = {top:80, right: 0, bottom: 0, left: 40}, | |
| width = 400 - margin.left - margin.right, | |
| height = 350 - margin.top - margin.bottom; | |
| var total = 250; | |
| var hispanic = Math.sqrt(total*total*0.94); | |
| var foreign = Math.sqrt(total*total*0.89); | |
| var highschool = Math.sqrt(total*total*0.7); | |
| var g = container | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append('g') | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| g.append('defs') | |
| .append("marker") | |
| .attr("id", "arrowhead") | |
| .attr("viewBox", "-10 -10 20 20") | |
| .attr("refX", 0) | |
| .attr("refY", 0) | |
| .attr("markerWidth", 20) | |
| .attr("markerHeight", 20) | |
| .attr("stroke-width", 1) | |
| .attr("orient", "auto") | |
| .append("polyline") | |
| .attr("stroke-linejoin", "bevel") | |
| .attr("points", "-6.75,-6.75 0,0 -6.75,6.75"); | |
| var bigSquaredotted= g.append("rect") | |
| .attr("x",0) | |
| .attr("y",0) | |
| .attr("width",total) | |
| .attr("height",total) | |
| .style("fill","none") | |
| .style("stroke-dasharray","5, 5") | |
| .style("stroke","black") | |
| .style("stroke-width",1.5) | |
| var hispanicdotted= g.append("rect") | |
| .attr("x",0) | |
| .attr("y",0) | |
| .attr("width",hispanic) | |
| .attr("height",hispanic) | |
| .style("fill","rgba(255,0,118,.3)") | |
| // .style("stroke-dasharray","5, 5") | |
| // .style("stroke","black") | |
| // .style("stroke-width",1.5) | |
| var foreigndotted= g.append("rect") | |
| .attr("x",0) | |
| .attr("y",0) | |
| .attr("width",foreign) | |
| .attr("height",foreign) | |
| .style("fill","rgba(255,0,118,.6)") | |
| // .style("stroke-dasharray","5, 5") | |
| // .style("stroke","black") | |
| // .style("stroke-width",1.5) | |
| var swoopy = swoopyArrow() | |
| .angle(Math.PI/4) | |
| .x(function(d) { return d[0]; }) | |
| .y(function(d) { return d[1]; }); | |
| g.append("path") | |
| .attr('marker-end', 'url(#arrowhead)') | |
| .datum([[250,50],[270,70]]) | |
| .attr("d", swoopy); | |
| g.append("path") | |
| .attr("class","paid") | |
| .attr('marker-end', 'url(#arrowhead)') | |
| .datum([[10,5],[30,-30]]) | |
| .attr("d", swoopy) | |
| .attr("class","highschoolLabel") | |
| .style("opacity",0) | |
| g.append("path") | |
| .attr("class","paid") | |
| .attr('marker-end', 'url(#arrowhead)') | |
| .datum([[220,0],[215,-30]]) | |
| .attr("d", swoopy) | |
| .attr("class","foreignLabel") | |
| .style("opacity",0) | |
| g.append("path") | |
| .attr("class","paid") | |
| .attr('marker-end', 'url(#arrowhead)') | |
| .datum([[239,0],[250,-40]]) | |
| .attr("d", swoopy) | |
| .attr("class","hispanicLabel") | |
| .style("opacity",0) | |
| g.append("text") | |
| .attr("x",width/1.4) | |
| .attr("y",height/2.8) | |
| .text("Total drivers") | |
| .style("font-family","roboto") | |
| .style("font-size","13px") | |
| .attr("class","smallChartLabel") | |
| g.append("text") | |
| .attr("x",width/1.4) | |
| .attr("y",-60) | |
| .text("Hispanic") | |
| .style("font-family","roboto") | |
| .style("font-size","13px") | |
| .attr("class","hispanicLabel") | |
| .style("opacity",0) | |
| g.append("text") | |
| .attr("x",width/1.4) | |
| .attr("y",-40) | |
| .text("94%") | |
| .style("font-family","roboto") | |
| .style("font-size","13px") | |
| .attr("class","hispanicLabel") | |
| .style("opacity",0) | |
| g.append("text") | |
| .attr("x",width/1.9) | |
| .attr("y",-60) | |
| .text("Foreign") | |
| .style("font-family","roboto") | |
| .style("font-size","13px") | |
| .attr("class","foreignLabel") | |
| .style("opacity",0) | |
| g.append("text") | |
| .attr("x",width/1.9) | |
| .attr("y",-40) | |
| .text("89%") | |
| .style("font-family","roboto") | |
| .style("font-size","13px") | |
| .attr("class","foreignLabel") | |
| .style("opacity",0) | |
| g.append("text") | |
| .attr("x",0) | |
| .attr("y",-60) | |
| .text("Have only high school degree") | |
| .style("font-family","roboto") | |
| .style("font-size","13px") | |
| .attr("class","highschoolLabel") | |
| .style("opacity",0) | |
| g.append("text") | |
| .attr("x",0) | |
| .attr("y",-40) | |
| .text("70%") | |
| .style("font-family","roboto") | |
| .style("font-size","13px") | |
| .attr("class","highschoolLabel") | |
| .style("opacity",0) | |
| // g.append("text") | |
| // .attr("x",width/1.4) | |
| // .attr("y",height/2.3) | |
| // .text("$tktktk") | |
| // .style("font-family","roboto") | |
| // .style("font-size","13px") | |
| // .attr("class","smallChartLabel") | |
| // g.append("text") | |
| // .attr("x",0) | |
| // .attr("y",-60) | |
| // .text("Total paid") | |
| // .style("font-family","roboto") | |
| // .style("font-size","13px") | |
| // .attr("class","paid") | |
| // .style("opacity",0) | |
| // g.append("text") | |
| // .attr("x",0) | |
| // .attr("y",-40) | |
| // .text("$2442213") | |
| // .style("font-family","roboto") | |
| // .style("font-size","13px") | |
| // .attr("class","paid") | |
| // .style("opacity",0) | |
| var mySquare= g.append("rect") | |
| .attr("x",0) | |
| .attr("y",0) | |
| mySquare | |
| .attr("width",total) | |
| .attr("height",total) | |
| .attr("id","Alldrivers") | |
| .style("fill","#D3D3D3") | |
| g.append("text") | |
| .attr("x",width*0.17) | |
| .attr("y",height/2.15) | |
| .text("TAP TO REVEAL") | |
| .style("font-family","roboto") | |
| .attr("class","smallChartLabel") | |
| .attr("id","revealTwo") | |
| // g.append("text") | |
| // .attr("x",width*0.03) | |
| // .attr("y",height/2.18) | |
| // .text("That's 10% of total payment") | |
| // .style("font-family","roboto") | |
| // .attr("class","paid") | |
| // .style("opacity",0) | |
| g.append("rect") | |
| .attr({"class": "overlay" , "width": width + margin.left + margin.right , "height": height + margin.top + margin.bottom}) | |
| .style("opacity",0) | |
| .on("click",update) | |
| function update(){ | |
| d3.select("#Alldrivers").transition() | |
| .duration(2000).ease("linear") | |
| .attr({ | |
| 'width': highschool, | |
| 'height': highschool | |
| }) | |
| .style("fill","#FF0076") | |
| d3.selectAll(".hispanicLabel") | |
| .transition() | |
| .duration(500) | |
| .delay(300) | |
| .style("opacity",1) | |
| d3.selectAll(".foreignLabel") | |
| .transition() | |
| .duration(1000) | |
| .delay(300) | |
| .style("opacity",1) | |
| d3.selectAll(".highschoolLabel") | |
| .transition() | |
| .duration(2500) | |
| .delay(300) | |
| .style("opacity",1) | |
| d3.select("#touchTwo") | |
| .transition() | |
| .duration(500) | |
| .style("opacity",0) | |
| d3.select("#revealTwo") | |
| .transition() | |
| .duration(500) | |
| .style("opacity",0) | |
| } | |
| </script> | |
| </body> |
| function swoopyArrow() { | |
| var angle = Math.PI, | |
| clockwise = true, | |
| xValue = function(d) { return d[0]; }, | |
| yValue = function(d) { return d[1]; }; | |
| function render(data) { | |
| data = data.map(function(d, i) { | |
| return [xValue.call(data, d, i), yValue.call(data, d, i)]; | |
| }); | |
| // get the chord length ("height" {h}) between points | |
| var h = hypotenuse(data[1][0]-data[0][0], data[1][1]-data[0][1]) | |
| // get the distance at which chord of height h subtends {angle} radians | |
| var d = h / ( 2 * Math.tan(angle / 2) ); | |
| // get the radius {r} of the circumscribed circle | |
| var r = hypotenuse(d, h/2) | |
| /* | |
| SECOND, compose the corresponding SVG arc. | |
| read up: http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands | |
| example: <path d = "M 200,50 a 50,50 0 0,1 100,0"/> | |
| M 200,50 Moves pen to (200,50); | |
| a draws elliptical arc; | |
| 50,50 following a degenerate ellipse, r1 == r2 == 50; | |
| i.e. a circle of radius 50; | |
| 0 with no x-axis-rotation (irrelevant for circles); | |
| 0,1 with large-axis-flag=0 and sweep-flag=1 (clockwise); | |
| 100,0 to a point +100 in x and +0 in y, i.e. (300,50). | |
| */ | |
| var path = "M " + data[0][0] + "," + data[0][1] | |
| + " a " + r + "," + r | |
| + " 0 0," + (clockwise ? "1" : "0") + " " | |
| + (data[1][0]-data[0][0]) + "," + (data[1][1]-data[0][1]); | |
| return path | |
| } | |
| function hypotenuse(a, b) { | |
| return Math.sqrt( Math.pow(a,2) + Math.pow(b,2) ); | |
| } | |
| render.angle = function(_) { | |
| if (!arguments.length) return angle; | |
| angle = Math.min(Math.max(_, 1e-6), Math.PI-1e-6); | |
| return render; | |
| }; | |
| render.clockwise = function(_) { | |
| if (!arguments.length) return clockwise; | |
| clockwise = !!_; | |
| return render; | |
| }; | |
| render.x = function(_) { | |
| if (!arguments.length) return xValue; | |
| xValue = _; | |
| return render; | |
| }; | |
| render.y = function(_) { | |
| if (!arguments.length) return yValue; | |
| yValue = _; | |
| return render; | |
| }; | |
| return render; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment