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;
}