block by emeeks 1f8fd678b915f0e40f3f

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

Full Screen

This is the code for Chapter 1, Figure 32 from D3.js in Action that creates various SVG elements.

index.html

<html>
<head>
  <title>D3 in Action Chapter 1 - Example 7</title>
  <meta charset="utf-8" />
<script src="//d3js.org/d3.v3.min.js" type="text/JavaScript"></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("line").attr("x1", 20).attr("y1", 20).attr("x2",400).attr("y2",400).style("stroke", "black").style("stroke-width","2px");

d3.select("svg").append("text").attr("x",20).attr("y",20).text("HELLO");

d3.select("svg").append("circle").attr("r", 20).attr("cx",20).attr("cy",20).style("fill","red");

d3.select("svg").append("circle").attr("r", 100).attr("cx",400).attr("cy",400).style("fill","lightblue");

d3.select("svg").append("text").attr("x",400).attr("y",400).text("WORLD");


</script>
  </footer>

</html>