D3.js Quick Start Guide
eBook - ePub

D3.js Quick Start Guide

Create amazing, interactive visualizations in the browser with JavaScript

  1. 180 pages
  2. English
  3. ePUB (mobile friendly)
  4. Available on iOS & Android
eBook - ePub

D3.js Quick Start Guide

Create amazing, interactive visualizations in the browser with JavaScript

About this book

This book will help you build interactive graphs that are viewable in any web browser using JavaScript, D3.js, and SVG. You will learn how to make a scatter plot, a bar graph, a pie chart, a force directed graph, and a map.

Key Features

  • Takes you through the most common graphs you'll need
  • Add interactivity to your visualizations
  • Easy to follow builds

Book Description

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.

What you will learn

  • Build a scatter plot
  • Build a bar graph
  • Build a pie chart
  • Build a force-directed graph
  • Build a map
  • Build interactivity into your graphs

Who this book is for

This book is for web developers, interactive news developers, data scientists, and anyone interested in representing data through interactive visualizations on the Web with D3. Some basic knowledge of JavaScript is expected, but no prior experience with data visualization or D3 is required to follow this book.

Frequently asked questions

Yes, you can cancel anytime from the Subscription tab in your account settings on the Perlego website. Your subscription will stay active until the end of your current billing period. Learn how to cancel your subscription.
No, books cannot be downloaded as external files, such as PDFs, for use outside of Perlego. However, you can download books within the Perlego app for offline reading on mobile or tablet. Learn more here.
Perlego offers two plans: Essential and Complete
  • Essential is ideal for learners and professionals who enjoy exploring a wide range of subjects. Access the Essential Library with 800,000+ trusted titles and best-sellers across business, personal growth, and the humanities. Includes unlimited reading time and Standard Read Aloud voice.
  • Complete: Perfect for advanced learners and researchers needing full, unrestricted access. Unlock 1.4M+ books across hundreds of subjects, including academic and specialized titles. The Complete Plan also includes advanced features like Premium Read Aloud and Research Assistant.
Both plans are available with monthly, semester, or annual billing cycles.
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, we’ve got you covered! Learn more here.
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Yes! You can use the Perlego app on both iOS or Android devices to read anytime, anywhere — even offline. Perfect for commutes or when you’re on the go.
Please note we cannot support devices running on iOS 13 and Android 7 or earlier. Learn more about using the app.
Yes, you can access D3.js Quick Start Guide by Matthew Huntington in PDF and/or ePUB format, as well as other popular books in Computer Science & Data Visualisation. We have over one million books available in our catalogue for you to explore.

Information

Publisher
Packt Publishing
Year
2018
Print ISBN
9781789342383
eBook ISBN
9781789347746
Edition
1
Topic
Computer Science
Subtopic
Data Visualisation
Index
Computer Science

Building an Interactive Scatter Plot

Let's pretend we've started jogging and we want to visualize the data regarding our progress as a runner, with a scatter plot. We're going to have an array of objects, each with a date and distance properties. For each object in the array, we're going to create a circle in our SVG. If the distance property of an object is relatively high, its associated circle will be higher up on the graph. If the date property of an object is relatively high (a later date), its associated circle will be farther right.
By the end of this lesson, you should be able to do the following:
  • Add a link to the D3 library
  • Add an<svg>tag and size it with D3
  • Create some fake data for our app
  • Add SVG circles and style them
  • Create a linear scale
  • Attach data to visual elements
  • Use data attached to a visual element to affect its appearance
  • Create a time scale
  • Parse and format times
  • Set dynamic domains
  • Dynamically generate SVG elements
  • Create axes
  • Display data in a table
The complete code for this section can be found here: https://github.com/PacktPublishing/D3.js-Quick-Start-Guide/tree/master/Chapter03.

Adding a link to the D3 library

The first thing we want to do is create a basic index.html file:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
Now add a link to D3 at the bottom of your <body> tag in index.html. We'll put it at the bottom so that the script loads after all your other HTML elements have loaded into the browser:
<body> <script src="https://d3js.org/d3.v5.min.js"></script> </body>
Now create app.js in the same folder as your index.html. In it, we will store all of our JS code. For now, just put this code in it to see whether it works:
console.log('this works'); console.log(d3);
Link to it in index.html at the bottom of the <body> tag. Make sure it comes after the D3 script tag so that D3 loads before your app.js script:
<body> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="app.js" charset="utf-8"></script> </body>
Open index.html in Chrome just as we did in Chapter 2, Using SVG to Create Images Using Code, (File | Open File), and check your Dev Tools (View | Developer | Developer tools) to see whether your JavaScript files are linked correctly:

Adding an<svg>tag and sizing it with D3

In <indexentry content=" tag:sizing, with D3"> the index.html, at the top of <body>, before <indexentry content=" tag:adding"> your script tags, add an <svg> tag:
<body> <svg></svg> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="app.js" charset="utf-8"></script> </body>
If we examine the Elements tab of our dev tools, we'll <indexentry content=" tag:adding"> see the svg element has <indexentry content=" tag:sizing, with D3"> been placed. In Chrome, it has a default width/height of 300 px/150 px:
In app.js, remove your previous console.log statements and create variables to hold the width and height of the <svg> tag:
var WIDTH = 800; var HEIGHT = 600;
Next, we can use d3.select() to select a single element, in ...

Table of contents

  1. Title Page
  2. Copyright and Credits
  3. Packt Upsell
  4. Contributors
  5. Preface
  6. Getting Started with D3.js
  7. Using SVG to Create Images Using Code
  8. Building an Interactive Scatter Plot
  9. Making a Basic Scatter Plot Interactive
  10. Creating a Bar Graph Using a Data File
  11. Animating SVG Elements to Create an Interactive Pie Chart
  12. Using Physics to Create a Force-Directed Graph
  13. Mapping
  14. Other Books You May Enjoy