Skip to content

Instantly share code, notes, and snippets.

@saraquigley saraquigley/index.html

Last active Oct 16, 2015
Embed
What would you like to do?
Back where I started
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<style>
path {
fill: none;
stroke: #000;
stroke-width: 3px;
}
circle {
fill: steelblue;
stroke: #fff;
stroke-width: 3px;
}
#hint {
font: 14px 'Lato', sans-serif;
shape-rendering: crispEdges;
fill: #525252;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="hint"><strong>Hint:</strong> Click the blue circle to start</div>
<script>
var points = [
[100, 400],
[100, 400],
[300, 440],
[440, 400],
[260, 340],
[360, 200],
[500, 280],
[600, 490],
[620, 140],
[400, 220],
[500, 400],
[600, 440],
[700, 340],
[600, 240],
[360, 300],
[250, 360],
[180, 300],
[110, 380]
];
var svg = d3.select("body").append("svg")
.attr("width", 980)
.attr("height", 500);
var path = svg.append("path")
.data([points])
.attr("d", d3.svg.line()
.tension(.6) // Catmull–Rom
.interpolate("cardinal-open"))
.style("stroke", "#ddd")
.style("stroke-dasharray", "4,4");
// svg.selectAll(".point")
// .data(points)
// .enter().append("circle")
// .attr("r", 4)
// .attr("transform", function(d) { return "translate(" + d + ")"; });
var circle = svg.append("circle")
.attr("r", 13)
.attr("transform", "translate(" + points[0] + ")")
.on("click", transition);
function transition() {
circle.transition()
.duration(10000)
.attrTween("transform", translateAlong(path.node()));
// .each("end", transition);
var pin = svg.append("path")
.style("opacity",0)
.attr("d", "M 50,0 C 31.294,0 16.129,15.165 16.129,33.87 c 0,0.401 0.012,0.809 0.03,1.221 0.127,3.558 0.798,6.975 1.939,10.172 C 25.324,69.015 50,100 50,100 50,100 74.673,69.018 81.9,45.266 83.043,42.069 83.713,38.649 83.839,35.091 83.859,34.679 83.87,34.272 83.87,33.87 83.871,15.165 68.706,0 50,0 z m 0,50.459 c -9.161,0 -16.589,-7.428 -16.589,-16.589 0,-9.16 7.428,-16.588 16.589,-16.588 9.162,0 16.589,7.428 16.589,16.588 0,9.161 -7.427,16.589 -16.589,16.589 z")
.style("fill", "orange")
.attr("transform", "translate(130,190)");
pin.transition().delay(10000).duration(1000).style("opacity",1);
}
// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
var l = path.getTotalLength();
return function(d, i, a) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
};
};
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.