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

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Data Visualization with D3.js Cookbook
  • Table Of Contents Toc
Data Visualization with D3.js Cookbook

Data Visualization with D3.js Cookbook

By : Nick Zhu
4.3 (18)
Buy this Book
close
close
Data Visualization with D3.js Cookbook

Data Visualization with D3.js Cookbook

4.3 (18)
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.
Table of Contents (16 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Getting Started with D3.js
chevron up
Icon
1. Getting Started with D3.js
Icon
Introduction
Icon
Setting up a simple D3 development environment
Icon
Setting up an NPM-based development environment
Icon
Understanding D3-style JavaScript
2
2. Be Selective
Icon
2. Be Selective
Icon
Introduction
Icon
Selecting a single element
Icon
Selecting multiple elements
Icon
Iterating through a selection
Icon
Performing subselection
Icon
Function chaining
Icon
Manipulating the raw selection
3
3. Dealing with Data
Icon
3. Dealing with Data
Icon
Introduction
Icon
Binding an array as data
Icon
Binding object literals as data
Icon
Binding functions as data
Icon
Working with arrays
Icon
Filtering with data
Icon
Sorting with data
Icon
Loading data from a server
4
4. Tipping the Scales
Icon
4. Tipping the Scales
Icon
Introduction
Icon
Using quantitative scales
Icon
Using the time scale
Icon
Using the ordinal scale
Icon
Interpolating a string
Icon
Interpolating colors
Icon
Interpolating compound objects
Icon
Implementing a custom interpolator
5
5. Playing with Axes
Icon
5. Playing with Axes
Icon
Introduction
Icon
Working with basic axes
Icon
Customizing ticks
Icon
Drawing grid lines
Icon
Dynamic rescaling of axes
6
6. Transition with Style
Icon
6. Transition with Style
Icon
Introduction
Icon
Animating a single element
Icon
Animating multiple elements
Icon
Using ease
Icon
Using tweening
Icon
Using transition chaining
Icon
Using transition filter
Icon
Listening to transitional events
Icon
Implementing a custom interpolator
Icon
Working with timer
7
7. Getting into Shape
Icon
7. Getting into Shape
Icon
Introduction
Icon
Creating simple shapes
Icon
Using a line generator
Icon
Using line interpolation
Icon
Changing line tension
Icon
Using an area generator
Icon
Using area interpolation
Icon
Using an arc generator
Icon
Implementing arc transition
8
8. Chart Them Up
Icon
8. Chart Them Up
Icon
Introduction
Icon
Creating a line chart
Icon
Creating an area chart
Icon
Creating a scatter plot chart
Icon
Creating a bubble chart
Icon
Creating a bar chart
9
9. Lay Them Out
Icon
9. Lay Them Out
Icon
Introduction
Icon
Building a pie chart
Icon
Building a stacked area chart
Icon
Building a treemap
Icon
Building a tree
Icon
Building an enclosure diagram
10
10. Interacting with your Visualization
Icon
10. Interacting with your Visualization
Icon
Introduction
Icon
Interacting with mouse events
Icon
Interacting with a multi-touch device
Icon
Implementing zoom and pan behavior
Icon
Implementing drag behavior
11
11. Using Force
Icon
11. Using Force
Icon
Introduction
Icon
Using gravity and charge
Icon
Generating momentum
Icon
Setting the link constraint
Icon
Using force to assist visualization
Icon
Manipulating force
Icon
Building a force-directed graph
12
12. Know your Map
Icon
12. Know your Map
Icon
Introduction
Icon
Projecting the US map
Icon
Projecting the world map
Icon
Building a choropleth map
13
13. Test Drive your Visualization
Icon
13. Test Drive your Visualization
Icon
Introduction
Icon
Getting Jasmine and setting up the test environment
Icon
Test driving your visualization – chart creation
Icon
Test driving your visualization – SVG rendering
Icon
Test driving your visualization – pixel-perfect bar rendering
14
A. Building Interactive Analytics in Minutes
Icon
A. Building Interactive Analytics in Minutes
Icon
Introduction
Icon
The crossfilter.js library
Icon
Dimensional charting – dc.js
15
Index
Icon
Index

Introduction

This chapter is designed to get you up and running with D3.js, covering fundamental aspects, such as what D3.js is, and how to set up a typical D3.js data visualization environment. One particular section is also devoted in covering some lesser known areas of JavaScript that D3.js relies heavily on.

What is D3? D3 refers to Data-Driven Documents, and according to the official D3 Wiki:

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3's emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3 Wiki (2013, August)

In a sense, D3 is a specialized JavaScript library that allows you to create amazing data visualizations using a simpler (data driven) approach by leveraging existing web standards. D3.js was created by Mike Bostock (http://bost.ocks.org/mike/) and superseded his previous work on a different JavaScript data visualization library called Protovis. For more information on how D3 was created and on the theory that influenced both Protovis and D3.js, please check out links in the following information box. Here in this book we will focus more on how to use D3.js to power your visualization. Initially, some aspects of D3 may be a bit confusing due to its different approach to data visualization using JavaScript. I hope that over the course of this book, a large number of topics, both basic and advanced, will make you comfortable and effective with D3. Once properly understood, D3 can improve your productivity and expressiveness with data visualizations by orders of magnitude.

Note

For more formal introduction to the idea behind D3 see the Declarative Language Design for Interactive Visualization paper published by Mike Bostock on IEEE InfoVis 2010 http://vis.stanford.edu/papers/protovis-design.

If you are interested to know how D3 came about, I recommend you to check out the D3: Data-Driven Document paper published by Mike Bostock on IEEE InfoVis 2011 at http://vis.stanford.edu/papers/d3.

Protovis, the predecessor of D3.js, also created by Mike Bostock and Jeff Heer of the Stanford Visualization Group can be found at http://mbostock.github.io/protovis/.

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Data Visualization with D3.js Cookbook
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options
font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon