Data-Driven Documents (D3)
D3 is a project featured by the Stanford Visualization Group developed by Mike Bostock.
D3 provides us with web-based visualization, which is an excellent way to deploy information and help us to see things such as proportions, relationships, correlations, and patterns, and discover things previously unknown. Since web browsers provide us with a very flexible and interactive interface in practically any device such as PC, tablet, and smart phone, D3 is an amazing tool for visualization based on data using HTML, JavaScript, SVG, and CSS.
In Chapter 1, Getting Started, we saw the importance of data visualization and in this chapter, we will present examples in order to understand the use of D3.js. In the following screenshot, we can see the basic structure of an HTML document. D3 is going to be included in a basic script tag or into a JavaScript file (.js):
HTML
HyperText Markup Language (HTML) provides the basic skeleton for our visualization. An HTML document will define the structure of our web page, based on a series of tags, which are labels inside angle brackets (<br/>) commonly coming in pairs (<p>...</p>). D3 will take advantage of the structure of HTML by creating new elements in the document structure, such as adding new div tags (which defines a section in a document). We can see the basic structure of an HTML document in the previous screenshot.
Tip
For a complete reference about HTML, please refer to the link http://www.w3schools.com/html/.
DOM
Document Object Model (DOM) helps in representing and interacting with objects in HTML documents. Objects in the DOM tree can be addressed and manipulated by programming languages such as Python or JavaScript through the elements (tags) of the web page. D3 will change the structure of the HTML document by accessing the DOM tree either by the element ID or its type.
CSS
Cascading Style Sheets (CSS) can help us to style the web page. A CSS style is based on rules and selectors. We can apply styles to a specific element (tag) through selectors. An example of CSS is shown as follows:
<style>
body {
font: 10px arial;
}
</style>
JavaScript
JavaScript is a dynamic scripting programming language typically implemented in the client (web browser). All the code in D3.js is developed with JavaScript. JavaScript will help us to create great visualizations, with full interactivity which can be updated in real time. In D3.js we can link to the library directly (stored in a separate file) with the snippet listed as follows:
<script src="http://d3js.org/d3.v3.min.js"></script>
SVG
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics. SVG can be directly included in your web page. SVG provides basic shape elements such as rectangle, line, circle, and text to build complicated lines and shapes inside a canvas. Much of the success of D3 is because it implements a wrapper for SVG. With D3 we will not have to modify the XML directly, instead D3 provides an API to help us place our elements (rectangle, circle, line, and so on) in the correct location on the canvas.