Built with blockbuilder.org
Created
April 29, 2016 18:53
-
-
Save jeremycflin/b704da1695694853b573c6889b4e6ab1 to your computer and use it in GitHub Desktop.
fresh block
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> | |
<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> |
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
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