Graphics Reference
In-Depth Information
Don'texpecttoseethesamespeedorthecapabilitytohandleasmanynodes
compared to desktop software. D3 is based on the underlying technology
SVG, which is not fast, but the graphics have a wide variety of visual
attributes. When you create a visualization in D3, the D3 code is creating
and modifying SVG in the browser dynamically. To use D3, you don't need
to know all the details of SVG. However, when debugging D3 using the
browser's developer tools, you will see SVG code, so it is useful to look at
some simple SVG first before getting into D3.
SVG
You can draw graphics on an HTML page using SVG. The following is a
simple HTML page that draws a couple of circles in SVG:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<svg width="500" height="500">
<circle cx="100" cy="100" r="75" fill="orange"/>
<circle cx="300" cy="150" r="50" fill="yellow"
stroke="blue" />
</svg>
</body>
The initial section simply identifies that this is an HTML page (first two
lines) and starts off the body of the HTML document (third line). The SVG
object defines an area of 500 by 500 pixels on the page in which to place
SVG graphical objects. The origin is in the top-left corner, with the positive
x-axis going to the right, and positive y-axis going down.
The next two lines define SVG circle objects, the first being a circle with
center (
cx
and
cy
) at (100,100), a radius (
r
) of 75 pixels, and filled with
orange. The second circle is farther to the right (
cx
is
300
), farther down
(
cy
is
150
), smaller (
r
is
50
), and filled in yellow with a blue outline. In the
Chrome browser, it looks like
Figure 8-4
.
