block by emeeks 5090dad12ed99da67e77

Ch. 1, Fig. 34 - D3.js in Action

Full Screen

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.

index.html

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