Visualization Strategies for Exploring Large Datasets - Data Just Right: Introduction to Large-Scale Data and Analytics - page 93

analysis in order to tell a story. Although some may argue that the Internet has had a
negative economic impact on the field of journalism, Web-based interactive toolkits
such as D3.js are evidence that the role of the online journalist may actually be evolv-
ing and may incorporate some techniques normally ascribed to data scientists.
Visualizations depend on graphics, and the open standard for vector-based graphics
files on the Web is the powerful, but seemingly underappreciated, XML-based Scalable
Vector Graphics format, or SVG. At its core, D3.js is a library for creating and trans-
forming SVG objects, with a focus on methods that help build common visualization
elements from underlying data sources. Despite a great deal of online documentation
and online tutorials from the data visualization community, newcomers can some-
times find D3.js's conventions maddeningly complex. Although some of the design and
structure of D3.js is similar to the popular JavaScript framework jQuery, the conven-
tions used to actually define and create SVG manipulations may appear unfamiliar.
Part of the reason for that seems to be a lack of widespread understanding of how SVG
graphics work. Before we take a brief look at D3.js, let's examine an SVG file by view-
ing its XML source.
Listing 7.3 is a simple XML file created using the open-source vector-graphics
tool Inkscape. The code describes a square object that is 100 by 100 pixels in size and
which is located at the coordinates of 57 ( x -axis) and 195 ( y -axis). One common point
of initial confusion when using SVG graphics is that the origin of the coordinate sys-
tem is in the top-left corner, with the y -axis extending toward the bottom-left corner.
When opened in a Web browser, this file will appear as a blue square (with a 1 pixel
black border) as expected, sitting perfectly still at a location of 57, 195.
Listing 7.3 SVG: A simple blue square with a black border
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect
width="100"
height="100"
x="57"
y="195"
id="my_square"
style="fill:#0000ff;stroke:#000000;stroke-width:1px;" />
</svg>
Recall that D3.js is a tool for SVG graphics. With this in mind, let's create the exact
same square programmatically. In Listing 7.4, we create a simple Web page, use the
D3.js library to create a new SVG object, and then “append” the blue square to this
object. Save this as something like d3test.html, and open the file in your Web browser
to see the square.