Skip to content

Instantly share code, notes, and snippets.

@aogriffiths

aogriffiths/.project

Created June 10, 2012 20:40
Show Gist options
  • Save aogriffiths/2907243 to your computer and use it in GitHub Desktop.
Save aogriffiths/2907243 to your computer and use it in GitHub Desktop.
Download ZIP
a path
Raw
.project
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>2907243-a path</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>
Raw
README
An example path
see it more clearly at http://bl.ocks.org/2907243
Raw
index.html
<html lang="en">
<head>
<title>A Path</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- JS -->
<!--
<script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.min.js"></script>
-->
<script type="text/javascript" src="../2902093/d3.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
main();
</script>
</body>
</html>
Raw
main.js
function main() {
var svg = d3.select("#vis").append("svg")
.attr("width", 800)
.attr("height", 600);
points = [
"M 70 10",
"L 50 10",
"L 50 30",
"L 70 30",
"L 60 50",
"L 50 50",
"L 50 60",
"L 30 70",
"L 30 50",
"L 10 50",
"L 10 70",
"L -10 70",
"L -10 50",
"L -30 50",
"L -30 70",
"L -50 60",
"L -50 50",
"L -60 50",
"L -70 30",
"L -50 30",
"L -50 10",
"L -70 10",
"L -70 -10",
"L -50 -10",
"L -50 -30",
"L -70 -30",
"L -60 -50",
"L -50 -50",
"L -50 -60",
"L -30 -70",
"L -30 -50",
"L -10 -50",
"L -10 -70",
"L 10 -70",
"L 10 -50",
"L 30 -50",
"L 30 -70",
"L 50 -60",
"L 50 -50",
"L 60 -50",
"L 70 -30",
"L 50 -30",
"L 50 -10",
"L 70 -10",
"z",
"M 10 10",
"L 10 30",
"L 30 30",
"L 30 10",
"z",
"M -10 10",
"L -30 10",
"L -30 30",
"L -10 30",
"z",
"M -10 -10",
"L -10 -30",
"L -30 -30",
"L -30 -10",
"z",
"M 10 -10",
"L 30 -10",
"L 30 -30",
"L 10 -30",
"z"
]
g_translate = svg
.append("g")
.attr("transform","translate(100,100)");
g_rotate = g_translate
.append("g");
g_scale = g_rotate
.append("g");
path = g_scale
.append("path")
.attr("d",points.join(" "))
.on("click", click);
var s = true;
function click(){
d_1=500;
d_2=1500;
d_3=2500;
if(s){
g_scale.transition()
.duration(d_1)
.attr("transform","scale(1.2)");
g_rotate.transition()
.delay(d_1)
.duration(d_2-d_1)
.attr("transform","rotate(45)");
g_scale.transition()
.delay(d_2)
.duration(d_3-d_2)
.attr("transform","scale(0.2)");
g_rotate.transition()
.delay(d_2)
.duration(d_3-d_2)
.attr("transform","rotate(-130)");
}else{
g_rotate
.attr("transform","rotate(-40)");
g_scale.transition()
.duration(d_1)
.attr("transform","scale(1.0)");
g_rotate.transition()
.delay(d_1)
.duration(d_2-d_1)
.attr("transform","rotate(0)");
}
s = ! s;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment