Mastering D3.js

Pablo Navarro Castillo

• Publisher: Packt Publishing
• Year: 2014
• eBook ISBN: 9781783286270
• Edition: 1
• Topic: Computer Science
• Subtopic: Data Modelling & Design
• Index: Computer Science

This is a practical guide with real-world examples that will help you to create custom charts, and integrate them with third-party libraries to create rich, engaging data-driven applications. Starting with the reusable chart pattern, we will take you through designing and creating complex, real-time data visualizations.

You will learn how to create reusable D3-based charts and integrate them into data visualization projects. You will get to know how to create and distribute a custom charting package. You will get acquainted with how to integrate D3 with mapping libraries to provide reverse geocoding and interactive maps.

This book culminates by showing you how to create enterprise-level dashboards to display real-time data.

Mastering D3.js

---

Table of Contents

Mastering D3.js

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Data Visualization

Defining data visualization

Some kinds of data visualizations

Infographics

Exploratory visualizations

Dashboards

Learning about data visualization

Introducing the D3 library

Summary

2. Reusable Charts

Creating reusable charts

Creating elements with D3

Binding data

Encapsulating the creation of elements

Creating the svg element

The barcode chart

Accessor methods

Chart initialization

Adding data

Adding the date accessor function

Updating the dataset

Fixing the enter and exit transitions

Using the barcode chart

Creating a layout algorithm

The radial layout

Computing the angles

Using the layout

Summary

3. Creating Visualizations without SVG

SVG support in the browser market

Visualizations without SVG

Loading and sorting the data

The force layout method

Setting the color and size

Creating a legend

Polyfilling

Feature detection

The canvg example

Using canvas and D3

Creating figures with canvas

Creating shapes

Integrating canvas and D3

Summary

4. Creating a Color Picker with D3

Creating a slider control

The drag behavior

Creating the slider

Using the slider

Creating a color picker

The color picker selector

Adding the color picker window

The color picker window

Summary

5. Creating User Interface Elements

Highlighting chart elements

Creating tooltips

Using the tooltip

Selecting a range with brushing

Creating the area chart

Adding brushing

The brush listener

Summary

6. Interaction between Charts

Learning the basics of Backbone

Events

Models

Collections

Views

Routers

The stock explorer application

Creating the stock charts

The stock title chart

The stock area chart

Preparing the application structure

The index page

Creating the models and collections

The stock model

The stock collection

The application model

Implementing the views

The title view

The stock selector view

The stock context view

The stock detail view

The application view

Defining the routes

Initializing the application

Summary

7. Creating a Charting Package

The development workflow

Writing the code

Creating a release

Semantic Versioning

Creating the package contents

The heat map chart

The matrix layout

The project setup

Installing the Node modules

Building with Grunt

Concatenating our source files

Minifying the library

Checking our code with JSHint

Testing our package

Writing a simple test

Testing the heat map chart

Testing the matrix layout

Running the tests with Grunt

Registering the sequences of tasks

Managing the frontend dependencies

Using the package in other projects

Summary

8. Data-driven Applications

Creating the application

The project setup

Generating a static site with Jekyll

Creating the application components

Creating the models and collections

Creating the views

The application setup

Hosting the visualization with GitHub Pages

Hosting the visualization in Amazon S3

Configuring Jekyll to deploy files to S3

Uploading the site to the S3 bucket

Summary

9. Creating a Dashboard

Defining a dashboard

Good practices in dashboard design

Making a dashboard

Defining the purpose of the dashboard

Obtaining the data

Organizing the information

Creating the dashboard sections

The students section

The courses section

The class section

Gathering the dashboard sections

Summary

10. Creating Maps

Obtaining geographic data

Understanding the GeoJSON and TopoJSON formats

Transforming and manipulating the files

Creating maps with D3

Creating a choropleth map

Mapping topology

Using Mapbox and D3

Creating a Mapbox project

Integrating Mapbox and D3

Summary

11. Creating Advanced Maps

Using cartographic projections

Using the Equirectangular projection

The Conic Equidistant projection

The Orthographic projection

Creating a rotating globe

Creating an interactive star map

Choosing our star catalog

Drawing the stars

Changing the projection and adding rotation

Adding colors and labels to the stars

Projecting raster images with D3

Rendering the raster image with canvas

Computing the geographic coordinates of each pixel

Reprojecting the image using the Orthographic projection

Summary

12. Creating a Real-time Application

Collaborating in real time with Firebase

Configuring Firebase

Integrating the application with Firebase

Creating a Twitter explorer application

Creating the streaming server

Using the Twitter-streaming API

Using Twit to access the Twitter-streaming API

Using Socket.IO

Implementing the streaming server

Creating the client application

The application structure

Models and collections

Implementing the topics views

The input view

The bar chart view

The topics map view

Creating the application view

The application setup

Summary

Index

Mastering D3.js

Copyright © 2014 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: August 2014

Production reference: 1180814

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78328-627-0

www.packtpub.com

Cover image by Artie Ng (<[email protected]>)

Credits

Author

Pablo Navarro Castillo

Reviewers

Andrew Berls

Simon Heimler

Lars Kotthoff

Nathan Vander Wilt

Commissioning Editor

Edward Gordon

Acquisition Editors

Nikhil Chinnari

Mohammad Rizvi

Content Development Editor

Sankalp Pawar

Technical Editors

Indrajit A. Das

Humera Shaikh

Copy Editors

Dipti Kapadia

Deepa Nambiar

Stuti Srivastava

Project Coordinator

Harshal Ved

Proofreaders

Simran Bhogal

Maria Gould

Ameesha Green

Paul Hindle

Indexers

Hemangini Bari

Mariammal Chettiyar

Rekha Nair

Priya Subramani

Production Coordinator

Arvindkumar Gupta

Cover Work

Arvindkumar Gupta

About the Author

Pablo Navarro Castillo is a mathematical engineer and developer. He earned his Master's degree in Applied Mathematics from École des Mines de Saint-Etienne in France. After working for a few years in operations research and data analysis, he began to work as a data visualization consultant and developer.

He has collaborated with Packt Publishing as a technical reviewer for Data Visualiz...

Table of contents

• Mastering D3.js