Packt+ | Advance your knowledge in tech

You're reading from D3.js 4.x Data Visualization - Third Edition

Product typeBook

Published inApr 2017

Reading LevelIntermediate

PublisherPackt

ISBN-139781787120358

Edition3rd Edition

Languages

JavaScript

Tools

Concepts

Data Visualization

Authors (2):

Aendrew Rininsland

Swizec Teller

View More author details

Chapter 2. A Primer on DOM, SVG, and CSS

You might already be used to manipulating DOM and CSS with libraries such as jQuery; if so, much of this will seem very familiar, as D3 has a full suite of manipulation tools. If not, don't worry, as this chapter exists to get everyone up to speed.

Very similar to HTML's DOM is the SVG namespace, which we'll use for most of the examples in this book. SVG is at the core of building truly great visualizations, so we'll take special care to understand it, starting out by manually drawing shapes and then doing the same using D3's path generators in Chapter 3, Shape Primitives of D3.

In this chapter, we'll take a look at the core technologies that make D3 tick. They are as follows:

Document Object Model (DOM)
Scalable Vector Graphics (SVG)
Cascading Style Sheets (CSS)

DOM

The Document Object Model (DOM) is a language-agnostic model for representing structured documents built in HTML, XML, or similar standards. You can think of it as a tree of nodes that closely resembles the document parsed by the browser.

At the top, there is an implicit document node, which represents the <html> tag; browsers create this tag even if you don't specify it and then build the tree off this root node according to what your document looks like. Consider a simple HTML file to be like the following:

<!DOCTYPE html> 
<title>A title</title> 
<div> 
  <p>A paragraph of text</p> 
</div> 
<ul> 
  <li>List item</li> 
  <li>List item 2, <em><strong>italic</strong></em></li> 
</ul>

Note how we don't have the <html>, <head> or <body> tags. Chrome will parse the preceding code to DOM, as follows:

Type document into the Chrome JavaScript console to get this tree view...

What exactly did we do here?

The key is in the three for...each statements that we used. One loops through the array of table header strings, and appends a table cell (td) element with each value into the thead row. There are then two nested .forEach() statements that do the same for each row in the body. We technically only have one row in the body right now, so probably didn't need that messy double for...each, but now all we have to do to add another row to the table is simply append another data array to the rows variable. We'll talk more about Array.prototype.forEach and other array functions in the next chapter.

This might seem like a lot of work for such a simple table, but the advantages of doing it this way are huge. Instead of wasting a bunch of time typing out a totally static table that you'll never use again, you've effectively created a basic JavaScript library that will produce a basic table for you whenever you need it. You could even extend your tableFactory function to do...

Scalable Vector Graphics

Scalable Vector Graphics (SVG) is a vector graphics format that describes images with XML. It has been around since 1999 and is supported by all major browsers nowadays.

Vector images can be rendered in any size without becoming fuzzy. This means that you can render the same image on a large retina display or a small mobile phone, and it will look great in both cases. SVG images are made up of shapes you can create from scratch using paths or put together from basic shapes (for example, lines and circles) defined in the standard. The format itself represents shapes with XML elements and attributes. Since it's an XML-style standard like HTML, quite a lot of what you may already know about HTML also applies to SVG.

As such, SVG code is just a bunch of text you can edit manually, inspect with your browser's normal debugging tools, and compress with standard text compression algorithms. Being text based also means that you can use D3 to create an image in your browser...

CSS

Cascading Stylesheets (CSS) have been with us since 1996, making them one of the oldest staples of the Web, even though they only reached widespread popularity with the tables versus CSS wars of the early 2000s.

You're probably familiar with using CSS for styling HTML. So, this section will be a refreshing breeze after all that weird-looking SVG stuff.

My favorite thing about CSS is its simplicity; consider the following code:

selector { 
  attribute: value; 
}

That describes CSS better than I can--you use selectors to modify properties using values. Although there's a bit more to it, particularly in terms of how properties cascade down the DOM tree, the above is pretty much it.

We've been using selectors all this time. A selector is any string that describes one or more elements in a DOM tree.

Note

Although you can get fancy with selectors, there's been a lot written about how to intelligently name classes recently so that most CSS is just simply just declarative. One such approach is BEM...

Summary

That was an intense chapter. Go have a nice beverage of some kind if you're still with me, you deserve it. If not, don't get too discouraged--that was a lot of material to get through, feel free to come back later if you need a refresher.

We've gone through DOM manipulation and looked at SVG in great detail, covering everything from drawing shapes manually to using transformations. Finally, we looked at CSS as an alternative for making things pretty.

Everything we look at from now on is going to build on these basics, but you now have the tools to draw anything you can think of.[footnote]

The rest of the chapter is locked

You have been reading a chapter from

D3.js 4.x Data Visualization - Third Edition

Published in: Apr 2017Publisher: PacktISBN-13: 9781787120358

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

undefined

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at $15.99/month. Cancel anytime

Authors (2)

Aendrew Rininsland

<p>Aendrew Rininsland is a developer and journalist who has spent much of the last half a decade building interactive content for newspapers such as The Financial Times, The Times, Sunday Times, The Economist, and The Guardian. During his 3 years at The Times and Sunday Times, he worked on all kinds of editorial projects, ranging from obituaries of figures such as Nelson Mandela to high-profile, data-driven investigations such as The Doping Scandal the largest leak of sporting blood test data in history. He is currently a senior developer with the interactive graphics team at the Financial Times.</p>
Read more about Aendrew Rininsland

Swizec Teller

Swizec Teller is a geek with a hat. Founding his first startup at 21, he is now looking for the next big idea as a full-stack web generalist focusing on freelancing for early-stage startup companies. When he isn't coding, he's usually blogging, writing books, or giving talks at various non-conference events in Slovenia and nearby countries. He is still looking for a chance to speak at a big international conference. In November 2012, he started writing Why Programmers Work at Night, and set out on a quest to improve the lives of developers everywhere.
Read more about Swizec Teller

Other recommended products

Related to this chapter

Data Visualization with D3 4.x Cookbook

Bring data to life using D3.js, the hottest and most powerful web-based data visualization technology on the market today. This second edition cookbook features code samples, helpful illustrations, and over 65 practical recipes to learn from so you can create amazing data visualization with precision and professional efficiency.

BookFeb 2017380 pages

Learn D3.js

This book is a practical Hands-On introduction to create and publish your own interactive data visualization projects on the web-even if you have little or no experience with data visualization or web development. The purpose of this book is to teach developers how to create beautiful, efficient and interactive data visualizations for the Web.

BookMay 2019650 pages

Expert Data Visualization

Do you want to make sense of your data? Do you want to create interactive charts, data trees, info-graphics, geospatial charts, and maps efficiently? Then this book is your ideal choice to master interactive data visualization with D3. JS 4.0 This book will have a real–world, case-study approach, where you will learn to create complex visualizations powered by D3.js and open data.

BookApr 2017394 pages

D3.js Quick Start Guide

D3.js is a JavaScript library that allows you to create graphs and data visualizations in the browser, with HTML, SVG, and CSS. This book will take you from the basics of D3.js, so that you can create your own interactive visualizations, to creating the most common graphs that you will encounter as a developer, scientist, statistician, or data scientist.

BookSep 2018180 pages

Mastering SVG

SVG is considered an important aspect of animating your web applications. Its cross-platform markup along with the combination of modern web technologies proves to be a great combination for web designers and developers. This book will show you the different facets of SVG and the various considerations and prerequisites for animating with SVG.

BookSep 2018312 pages

Learning D3.js 5 Mapping

D3.js is a visualization library used for the creation and control of dynamic and interactive graphical forms. It is a library used to manipulate HTML and and SVG documents. This book will show you how build and design maps with D3.js and gives you great insight into projections, colors, and the most appropriate types of map.

BookNov 2017298 pages

Learn Chart.js

In this book, you will learn how to use Chart.js, based on open Web standards, through a series of step-by-step tutorials and simple real-world examples to build interactive and responsive Web-based visualizations for your data. You will learn how to load and parse external data formats like CSV and JSON, and create different types of charts.

BookFeb 2019284 pages

Personalised recommendations for you

Based on your interests and search pattern

Et al.

Ever wonder why speech recognition systems don't understand the Scottish accent, or what would happen if an astronaut only ate mac 'n' cheese, or other spurious reflections you'd have at a bar? We did, then collated those deliberations into absurd research articles with fake figures and methodologies inspired by even more fictionally absurd studies.

BookAug 2023230 pages5

Generative AI with LangChain

This book is a comprehensive introduction to LLMs and LangChain, demystifying the basic mechanics of LangChain, its functionalities, and the myriad of applications it can be integrated into.

BookDec 2023360 pages4

Generative AI with LangChain

This book is a comprehensive introduction to LLMs and LangChain, demystifying the basic mechanics of LangChain, its functionalities, and the myriad of applications it can be integrated into.

BookDec 2023360 pages5

Generative AI with LangChain

This book is a comprehensive introduction to LLMs and LangChain, demystifying the basic mechanics of LangChain, its functionalities, and the myriad of applications it can be integrated into.

BookDec 2023360 pages1

Generative AI with LangChain

This book is a comprehensive introduction to LLMs and LangChain, demystifying the basic mechanics of LangChain, its functionalities, and the myriad of applications it can be integrated into.

BookDec 2023360 pages5

Mastering Tableau 2023

This book is a comprehensive resource to mastering your Tableau skills and becoming a BI expert. As you progress, you will learn how to build advanced dashboards and improve your storytelling to derive key business insight, as well as make you well-versed with advanced functionalities of Tableau in the business intelligence domain.

BookAug 2023684 pages

Building AI Applications with ChatGPT APIs

This guide covers all ChatGPT API features for effortless creation of robust AI powered apps. With its help, you’ll be able to leverage ChatGPT’s cutting-edge NLP models to take your app development skills to the next level. You’ll also work on ten exciting projects that will give you the practical know-how that you can apply to your existing applications.

BookSep 2023258 pages5

Building AI Applications with ChatGPT APIs

This guide covers all ChatGPT API features for effortless creation of robust AI powered apps. With its help, you’ll be able to leverage ChatGPT’s cutting-edge NLP models to take your app development skills to the next level. You’ll also work on ten exciting projects that will give you the practical know-how that you can apply to your existing applications.

BookSep 2023258 pages2

Data Engineering with AWS

Embark on a journey to master data engineering pipelines on AWS! Our book offers a hands-on experience of AWS services for ingesting, transforming, and consuming data. Whether you're an absolute beginner or someone with basic data engineering experience, this guide is an indispensable resource.

BookOct 2023636 pages5

Modern Data Architecture on AWS

Every organization wants an agile, performant, and cost-effective data platform that meets all their current and future business needs. Purpose-built AWS analytics services and their features play a big part in building such a modern data platform. This book brings to you all the design and architectural patterns that’ll help you achieve this goal.

BookAug 2023420 pages5

Practical Guide to Applied Conformal Prediction in Python

Discover the power of Conformal Prediction with the "Practical Guide to Applied Conformal Prediction in Python." Master the latest techniques to quantify uncertainty in machine learning and computer vision models, and seamlessly apply them to your industry applications.

BookDec 2023240 pages

TinyML Cookbook

With over 70 project-based recipes, the TinyML Cookbook is a practical guide that will help you to get the most out of your microcontrollers. It provides a comprehensive understanding of the theoretical foundations while giving you hands-on experience training ML models for deployment on Arduino Nano 33 BLE Sense, Raspberry Pi Pico, and SparkFun RedBoard Artemis Nano microcontrollers.

BookNov 2023664 pages