D3.js Quick Start Guide

By : Matthew Huntington

D3.js Quick Start Guide

By: Matthew Huntington

Overview of this book

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. The book begins with an overview of SVG, the basis for creating two-dimensional graphics in the browser. Once the reader has a firm understanding of SVG, we will tackle the basics of how to use D3.js to connect data to our SVG elements. We will start with a scatter plot that maps run data to circles on a graph, and expand our scatter plot to make it interactive. You will see how you can easily allow the users of your graph to create, edit, and delete run data by simply dragging and clicking the graph. Next, we will explore creating a bar graph, using external data from a mock API. After that, we will explore animations and motion with a bar graph, and use various physics-based forces to create a force-directed graph. Finally, we will look at how to use GeoJSON data to create a map.

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

Free Chapter

Getting Started with D3.js

What is SVG?

What makes D3 so special?

This book's approach to learning

A preview of each build

Setting up

Summary

Using SVG to Create Images Using Code

Base tag

Basic elements

Positioning an element

Styling an element

Important SVG elements

Summary

Building an Interactive Scatter Plot

Adding a link to the D3 library

Adding an<svg>tag and sizing it with D3

Creating some fake data for our app

Adding SVG circles and styling them

Creating a linear scale

Attaching data to visual elements

Use data attached to a visual element to affect its appearance

Creating a time scale

Parsing and formatting times

Setting dynamic domains

Dynamically generating SVG elements

Creating axes

Displaying data in a table

Summary

Making a Basic Scatter Plot Interactive

Creating a click handler

Removing data

Dragging an element

Updating data after a drag

Creating a zoom behavior that scales elements

Updating axes when zooming and panning

Updating click points after a transform

Avoiding redrawing the entire screen during rendering

Hiding elements beyond an axis

Summary

Creating a Bar Graph Using a Data File

Setting up our application

Creating an external file to hold our data

Making an AJAX request

Using AJAX data to create SVG elements

Adjusting the height and the width of the bars

Adjusting the horizontal and the vertical placement of the bars

Making the width of the bars dynamic

Changing the color of the bar based on data

Adding axes

Summary

Animating SVG Elements to Create an Interactive Pie Chart

Setting up the application

Create data/configuration variables

Creating an ordinal scale

Creating the color scale to map labels to colors

Setting up the SVG

Adding paths for each pie segment

Generating an arc creating function

Formatting the data for the arc

Adjusting the position of the pie

Making a donut graph

Removing parts of the pie

Summary

Using Physics to Create a Force-Directed Graph

What is a force-directed graph?

How to set up a graph of relationships

Setting up the HTML

Setting up styling for nodes and links

Setting up the SVG

Adding data for people

Adding data for relationships

Add circles to the SVG

Adding lines to the SVG

Creating a simulation

Specifying how the simulation affects visual elements

Creating forces

Summary

Mapping

Defining GeoJSON

Setting up the HTML

Using a projection

Generating a path using a projection and GeoJSON data

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

4 star

3 star

2 star

1 star

To get the most out of this book

This book assumes a basic understanding of HTML, CSS, JavaScript, AJAX, and what a server is, in order to be able to work with the code and concepts given in this book.

For this book you really only need to download and install the following:

Chrome, available at https://www.google.com/chrome/: a web browser so that we can view our visualizations.
Node: https://nodejs.org/en/: This allows us to run JavaScript from the terminal. In Chapter 4, Making a Basic Scatter Plot Interactive, we will use it so that we can make AJAX calls.
A code editor. I'd suggest Atom if you're new to coding: https://atom.io/.

Download the example code files

You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packt.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

Log in or register at www.packt.com.
Select the SUPPORT tab.
Click on Code Downloads & Errata.
Enter the name of the book in the Search box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

WinRAR/7-Zip for Windows
Zipeg/iZip/UnRarX for Mac
7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/D3.js-Quick-Start-Guide. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/9781789342383_ColorImages.pdf .

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."

A block of code is set as follows:

<circle r=50 cx=50 cy=50 fill=red stroke=blue stroke-width=5></circle>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<head>
       <link rel="stylesheet" href="app.css">
</head>

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the Administration panel."

Warnings or important notes appear like this.

Tips and tricks appear like this.

D3.js Quick Start Guide

By : Matthew Huntington

D3.js Quick Start Guide

By: Matthew Huntington

Overview of this book

Related Content you might be interested in

Current Title:

D3.js Quick Start Guide

Data Visualization with D3 4.x Cookbook

Expert Data Visualization

Learn D3.js