Skip to content

Instantly share code, notes, and snippets.

@emeeks
Last active March 18, 2016 15:15
Show Gist options
  • Save emeeks/5090dad12ed99da67e77 to your computer and use it in GitHub Desktop.
Save emeeks/5090dad12ed99da67e77 to your computer and use it in GitHub Desktop.
Ch. 1, Fig. 34 - D3.js in Action

This is the code for Chapter 1, Figure 34 from D3.js in Action that creates various SVG elements and then animates them using D3 transitions.

<html>
<head>
<title>D3 in Action Chapter 1 - Example 8</title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
svg {
position: absolute;
height: 500px;
width: 500px;
border: 1px solid lightgray;
}
</style>
<body>
<div id="vizcontainer">
<svg></svg>
</div>
</body>
<footer>
<script>
d3.select("svg").append("circle").attr("r", 20).attr("cx",20).attr("cy",20).style("fill","red");
d3.select("svg").append("text").attr("id", "a").attr("x",20).style("opacity", 0).attr("y",20).text("HELLO WORLD");
d3.select("svg").append("circle").attr("r", 100).attr("cx",400).attr("cy",400).style("fill","lightblue");
d3.select("svg").append("text").attr("id", "b").attr("x",400).attr("y",400).style("opacity", 0).text("Uh, hi.");
d3.select("#a").transition().delay(1000).style("opacity", 1);
d3.select("#b").transition().delay(3000).style("opacity", .75);
d3.selectAll("circle").transition().duration(2000).attr("cy", 200);
</script>
</footer>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment