Data Visualization with D3.js Cookbook

Data Visualization with D3.js Cookbook

By : Nick Zhu

Buy this Book

Data Visualization with D3.js Cookbook

By: Nick Zhu

Buy this Book

Overview of this book

D3.js is a JavaScript library designed to display digital data in dynamic graphical form. It helps you bring data to life using HTML, SVG, and CSS. D3 allows great control over the final visual result, and it is the hottest and most powerful web-based data visualization technology on the market today. "Data Visualization with D3.js Cookbook" is packed with practical recipes to help you learn every aspect of data visualization with D3. "Data Visualization with D3.js Cookbook" is designed to provide you with all the guidance you need to get to grips with data visualization with D3. With this book, you will create breathtaking data visualization with professional efficiency and precision with the help of practical recipes, illustrations, and code samples. "Data Visualization with D3.js Cookbook" starts off by touching upon data visualization and D3 basics before gradually taking you through a number of practical recipes covering a wide range of topics you need to know about D3. You will learn the fundamental concepts of data visualization, functional JavaScript, and D3 fundamentals including element selection, data binding, animation, and SVG generation. You will also learn how to leverage more advanced techniques such as custom interpolators, custom tweening, timers, the layout manager, force manipulation, and so on. This book also provides a number of pre-built chart recipes with ready-to-go sample code to help you bootstrap quickly.

Data Visualization with D3.js Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Getting Started with D3.js

Introduction

Setting up a simple D3 development environment

Setting up an NPM-based development environment

Understanding D3-style JavaScript

Be Selective

Introduction

Selecting a single element

Selecting multiple elements

Iterating through a selection

Performing subselection

Function chaining

Manipulating the raw selection

Dealing with Data

Introduction

Binding an array as data

Binding object literals as data

Binding functions as data

Working with arrays

Filtering with data

Sorting with data

Loading data from a server

Tipping the Scales

Introduction

Using quantitative scales

Using the time scale

Using the ordinal scale

Interpolating a string

Interpolating colors

Interpolating compound objects

Implementing a custom interpolator

Playing with Axes

Introduction

Working with basic axes

Customizing ticks

Drawing grid lines

Dynamic rescaling of axes

Transition with Style

Introduction

Animating a single element

Animating multiple elements

Using ease

Using tweening

Using transition chaining

Using transition filter

Listening to transitional events

Implementing a custom interpolator

Working with timer

Getting into Shape

Introduction

Creating simple shapes

Using a line generator

Using line interpolation

Changing line tension

Using an area generator

Using area interpolation

Using an arc generator

Implementing arc transition

Chart Them Up

Introduction

Creating a line chart

Creating an area chart

Creating a scatter plot chart

Creating a bubble chart

Creating a bar chart

Lay Them Out

Introduction

Building a pie chart

Building a stacked area chart

Building a treemap

Building a tree

Building an enclosure diagram

Interacting with your Visualization

Introduction

Interacting with mouse events

Interacting with a multi-touch device

Implementing zoom and pan behavior

Implementing drag behavior

Using Force

Introduction

Using gravity and charge

Generating momentum

Setting the link constraint

Using force to assist visualization

Manipulating force

Building a force-directed graph

Know your Map

Introduction

Projecting the US map

Projecting the world map

Building a choropleth map

Test Drive your Visualization

Introduction

Getting Jasmine and setting up the test environment

Test driving your visualization – chart creation

Test driving your visualization – SVG rendering

Test driving your visualization – pixel-perfect bar rendering

Building Interactive Analytics in Minutes

Introduction

The crossfilter.js library

Dimensional charting – dc.js

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Building a stacked area chart

In the Creating an area chart recipe in Chapter 8, Chart Them Up, we have explored how a basic layered area chart can be implemented using D3. In this recipe, we will build over what we have learned in the area chart recipe to implement a stacked area chart. Stacked area chart is a variation of the standard area chart in which different areas are stacked on top of each other giving your audience not only the ability to compare different data series individually but also their relationship to the total in proportion.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter9/stacked-area-chart.html.

How to do it...

This recipe is built over what we have implemented in Chapter 8, Chart Them Up, therefore in the following code example only the parts that are particularly relevant to the stacked area chart are included:

<script type="text/javascript">
function stackedAreaChart...

Data Visualization with D3.js Cookbook

By : Nick Zhu

Data Visualization with D3.js Cookbook

By: Nick Zhu

Overview of this book

Related Content you might be interested in

Current Title:

Data Visualization with D3.js Cookbook

Building a stacked area chart

Getting ready

How to do it...