Graphics Reference
In-Depth Information
JavaScript and Graph Visualization
JavaScriptistheprogramminglanguageofthewebbrowser—theubiquitous
interface to almost everything. You can use JavaScript to view graph data
interactively in the browser, which is particularly useful if you want
someone else to see and interact with your graph.
Many different libraries and technologies are available for drawing things
in the browser using JavaScript, including SVG, Canvas, ProtoVis, Raphael,
D3, and P5, to name a few. SVG and Canvas are more popular with novices
interested in low-level drawing. D3 and P5 are popular libraries for making
interactive graphics in a browser, but D3 specifically has a data visualization
focus.
If you are new to web-based development, the following examples are in
HTML. They can be saved as
.html
files and opened directly in a web
browser. Modern web browsers also provide built-in developer tools to
inspect the web page in the browser. For example, in the web browser
Chrome, the developer tools are accessed under the customization menu
More Tools…
⇒
Developer Tools. This opens a panel with many tabs,
allowing for various diagnostics on the current web page.
D3 Basics
Before getting started, first you may want to download
D3.js
(typically just
referred to as D3) from
d3js.org
. If you will be working with D3 and always
have an Internet connection, this step isn't needed. You may also want to
view the many examples and documentation available at the same website.
Because D3 is a comprehensive library that allows for a wide range of
data visualizations, this part of the discussion provides only a simple
introduction to D3 and an example using graph functionality in D3. For
more general review of D3, many topics and online tutorials are available,
including the following:
• Scott Murray's book,
Interactive Data Visualization for the Web
(Sebastopol, CA: O'Reilly Media, 2013), with a number of nice online
tutorials at
http://alignedleft.com/tutorials/d3/
• Mike Dewar's book,
Getting Started with D3
(Sebastopol, CA: O'Reilly
Media, 2012)
