Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • D3.js Quick Start Guide
  • Toc
  • feedback
D3.js Quick Start Guide

D3.js Quick Start Guide

By : Huntington
5 (1)
close
D3.js Quick Start Guide

D3.js Quick Start Guide

5 (1)
By: 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.
Table of Contents (10 chapters)
close
close
Preface
chevron up
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Getting Started with D3.js
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
2
Using SVG to Create Images Using Code
Using SVG to Create Images Using Code
Base tag
Basic elements
Positioning an element
Styling an element
Important SVG elements
Summary
3
Building an Interactive Scatter Plot
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
4
Making a Basic Scatter Plot Interactive
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
5
Creating a Bar Graph Using a Data File
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
6
Animating SVG Elements to Create an Interactive Pie Chart
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
7
Using Physics to Create a Force-Directed Graph
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
8
Mapping
Mapping
Defining GeoJSON
Setting up the HTML
Using a projection
Generating a path using a projection and GeoJSON data
Summary
9
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

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:

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:

  1. Log in or register at www.packt.com.
  2. Select the SUPPORT tab.
  3. Click on Code Downloads & Errata.
  4. 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

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.

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
Next Section
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete