Graphics Reference
In-Depth Information
D3 and SVG
D3's approach is to use JavaScript to generate the SVG dynamically when
the JavaScript is executed. You can script the same scene previously shown
in
Figure 8-4
in D3 as follows:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500);
svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 75)
.attr("fill", "orange");
svg.append("circle")
.attr("cx", 300)
.attr("cy", 150)
.attr("r", 50)
.attr("fill", "yellow")
.attr("stroke", "blue");
</script>
</body>
After the initial HTML definition, the first script object loads the D3
JavaScript visualization library directly from the D3 website so that the rest
of the scripts on this page can use D3. The rest of the page is JavaScript that
creates the SVG dynamically when the code is executed.
The next three lines use JavaScript
method chaining
to create the SVG
region.
var svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500);
