Hanchett / Körner Data Visualization with D3 and AngularJS

Build dynamic and interactive visualizations from real-world data with D3 on AngularJS
1. Auflage 2025
ISBN: 978-1-78439-578-0
Verlag: De Gruyter
Format: PDF
Kopierschutz: Adobe DRM (»Systemvoraussetzungen)

E-Book, Englisch, 278 Seiten

If you are a web developer with experience in AngularJS and want to implement interactive visualizations using D3.js, this book is for you. Knowledge of SVG or D3.js will give you an edge to get the most out of this book.

Autoren/Hrsg.

Hanchett, Erik

Körner, Christoph

Fachgebiete

• Mathematik | Informatik EDV | Informatik EDV & Informatik Allgemein

Leseproben

Terminology and definitions

Let's start from the beginning. In the following chapters, we will discuss computer graphics and visualizations for the Web. Therefore, it's important to understand the basic terminology of this domain. In this section, I will refresh your knowledge of the two most common image representations (vector and pixel graphics). I will also discuss the web standards that are relevant for graphical applications (DOM, SVG, and so on). If these definitions are not new for you, then nothing can stop you from jumping directly to the next section.

Document Object Model

The Document Object Model (DOM) is the tree representation of the hierarchical elements of an HTML document and it was specified by the World Wide Web Consortium (W3C). These elements in the DOM are called (for example, , , , and so on), which can have (for example, ) and (for example, is the content of the node). The DOM provides a public JavaScript interface with which we can access nodes and manipulate them.

Let's look at the source code of a simple HTML page to see an example of the DOM tree:

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Developers often visualize the DOM tree and its hierarchical elements by indenting the HTML code properly. The DOM tree of the previous example can also be displayed and modified with the of a modern browser. See the following screenshot:

DOM tree in Chrome developer tools

Vector graphics and Scalable Vector Graphics

A vector graphic is an image represented solely by the geometric primitives (shape) and attributes (size, margins, appearance, and so on) of its containing elements. These elements can be primitive shapes (such as lines, circles, triangles, and so on) or complex shapes that are composed by these primitives. All elements are included in the graphic; therefore, the whole graphic can be described by implicit mathematical expressions. Thus, the size of a vector graphic is only dependent on the number and complexity of the elements in the image and not on the resolution in which it will be displayed.

Note

Rule of thumb for vector graphics

The more the in the image, the higher the cost to draw or update the graphic, but in general, the costs do not depend on the resolution of the generated image (lossless rescaling).

Let's look at a simple example. An image of a circle can be fully described by the shape of a circle with the coordinates of its center point and radius. In all modern browsers, we can generate a vector graphic by embedding Scalable Vector Graphics (SVG), a web standard for vector graphics specified by the W3C directly in the DOM, as follows:

All containing elements of a vector graphic are usually stored in a scene graph, a tree representation of the hierarchical elements of the graphic. This concept is very similar to the DOM tree, and in the case of SVG, the scene graph is directly embedded in the DOM tree. We can see this in the previous example (by looking at the node) that contains the element.

As we mentioned previously, we can also use JavaScript to generate or modify SVGs. Let's use the partially complete helper function that generates and draws SVG nodes. Don't worry about the details of this function; just imagine that it will create a vector graphic element (you can look it up in the source code of this chapter if you are brave enough):

The preceding function creates a new SVG node and returns a method. It appends this new element to the parent container. Additionally, it provides methods to style the layout of the new element. Let's use this function to create the same circle from the previous example from within JavaScript:

The preceding code will generate the same circle as before with the center point at the coordinates 25, 25 and a radius of 20. The following figure shows the result of the graphic in the browser, where the left-hand side shows the original image and the right-hand side shows the image after zooming in:

A vector graphic generated in the SVG node (left: normal, right: zoom)

We observe that the circle will always appear in the best resolution no matter how far we zoom into the image. The reason for this is that the vector graphics are recomputed (by the mathematical expressions), redrawn, and rasterized according to the relevant display and zoom factor.

We silently skipped another very important fact of SVGs such that all the elements of the graphic appear in the DOM tree of the SVG node. In our case, we can see in the previous example of the HTML page that the SVG node contains a circle element. This means that the browser also knows about all the elements in the image. Therefore, we can use all built-in capabilities to style and observe these elements. For example, it's possible to attach an event listener with JavaScript to the circle and call event handlers when the user interacts with this element of the graphic. This event handler could look like this:

Vector graphics (particularly generated with SVG) are used in the Web, in general, to draw graphics that contain a moderate number of elements and when interactions and controls (such as zooming, panning, selecting elements, and so on) are desired. Graphics for high performance with a big number of elements would rather use pixel graphics.

Pixel graphics

A pixel graphic (often called as a raster graphic) is an image that is represented solely by the pixels in the graphic. Thus, its size is only dependent on the resolution of the image.

Note

Rule of thumb for pixel graphics

The more the in the image (the higher the resolution of the image), the higher the cost to draw or update the graphic, but in general, the cost does not depend on the number of elements in the generated image.

In general, pixel graphics are rasterized images of a geometric representation. Therefore, an image of a circle can be just as well defined by the shape of a circle with coordinates of its center point and a radius. The description of the circle is exactly the same as for vector graphics, only the ways of storing and displaying the image are different.

Let's write a partially complete JavaScript helper function to generate pixel graphics with the Canvas API. Don't worry about the details of this function; just imagine that it will create a pixel graphic element (you can look it up in the source code of this chapter if you are brave enough):

If we generate such a circle with JavaScript, the resulting code looks very similar to the previous vector graphic example:

Über Autor(innen)

Hanchett Erik :

Erik Hanchett is a software developer, blogger, and perpetual student who has been writing code for over 10 years. He currently resides in Reno Nevada, with his wife and two kids. He blogs about software development at ProgramWithErik.com. I would like to thank my wife Susan for helping me stay motivated. My friend F.B. Woods for all his help on the English language and Dr. Bret Simmons for teaching me the value of a personal brand. I would also like to thank all my friends and family that encouraged me along the way.Körner Christoph :

Christoph Körner previously worked as a cloud solution architect for Microsoft, specializing in Azure-based big data and machine learning solutions, where he was responsible for designing end-to-end machine learning and data science platforms. He currently works for a large cloud provider on highly scalable distributed in-memory database services. Christoph has authored four books: Deep Learning in the Browser for Bleeding Edge Press, as well as Mastering Azure Machine Learning (first edition), Learning Responsive Data Visualization, and Data Visualization with D3 and AngularJS for Packt Publishing.