Database Reference
In-Depth Information
which is the result of the fact that the arc-drawing commands in SVG are
more powerful than most users will ever need. This makes using SVG
directly in documents inconvenient, though it can be made simpler through
the use of JavaScript libraries such as the one described in the next section.
Data-Driven Documents: D3.js
Hand-coding visualizations rapidly becomes tedious, especially when the
rendering gets complex. As seen in the last section, even apparently simple
constructions can result in having to perform a variety of calculations and
difficult-to-remember decisions.
The Data-Driven Documents JavaScript library (known as D3.js, or
sometimes just D3) seeks to simplify much of this computation by providing
a rich set of primitives for manipulating visualizations. In addition, it
provides a mechanism for conveniently binding data to these visualizations
to allow for easy construction of examples like those developed in the
previous sections.
This section introduces the basics of the D3.js library and its usage. This
includes basic manipulation and rendering, layouts, and some of the
higher-levelconstructsavailableinD3.js,suchasaxesandmaps.Thetoolkit
also includes facilities for interacting with visualizations, but that is beyond
the scope of this topic.
Selecting, Inserting and Removing Elements
Like jQuery and other JavaScript toolkits, the core feature of D3 is the
selection
. In fact, the selector language used by D3 is very similar to that
used by jQuery. For example, to select all of the
<div>
elements in a
document, you use
d3.selectAll(”div”)
. To select a single element
such as the
<body>
element,
d3.select(”body”)
is used. Also, like
jQuery,
d3.selectAll(”div.blue”)
would select all
<div>
elements
with a class attribute containing
blue
whereas
d3.select(”div#blue”)
would select a
<div>
element with an
id
attribute of
blue
. These
operations can be chained together so that a
selectAll
called after a
select
would find all of the elements that are children of the original
select.
After selecting an element, the most common operation is to add another
object as a child of it. For example, this function found in
dashboard/
