Mastering D3.js电子书

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