book

Data Visualization with D3 4.x Cookbook - Second Edition

Name: Data Visualization with D3 4.x Cookbook - Second Edition
Author: Nick Zhu
ISBN: 9781786468253

by Nick Zhu

February 2017

Beginner to intermediate

380 pages

7h 21m

English

Packt Publishing

Read now

Unlock full access

Data Visualization with D3 4.x Cookbook - Second Edition
Data Visualization with D3 4.x Cookbook - Second Edition
Credits
About the Author
About the Reviewer
www.PacktPub.com
Why subscribe?
Customer Feedback
Preface
What this book covers
What you need for this book
Who this book is for

Sections
Getting readyHow to do it…How it works…There's more…See also
Conventions
Reader feedback
Customer support
Downloading the example codeErrataPiracyQuestions
1. Getting Started with D3.js
Introduction
Setting up a simple D3 development environment
Getting readyHow to do it...How it works...There's more...How to get source code
Setting up an NPM-based development environment
Getting readyHow to do it...How it works...There's more...Setting up a local HTTP serverPython Simple HTTP serverNode.js HTTP server
Understanding D3-style JavaScript
Getting readyHow to do it...How it works...Functions are objectsStatic variable scopingGetter-setter functionFunction chainingThere's more...Finding and sharing codeHow to get help
2. Be Selective
IntroductionIntroducing selectionCSS3 selector basics
Selecting a single element
Getting readyHow to do it...How it works...
Selecting multiple elements
Getting readyHow to do it...How it works...
Iterating through a selection
Getting readyHow to do it...How it works...
Performing subselection
Getting readyHow to do it...How it works...
Function chaining
Getting readyHow to do it...How it works...
Manipulating the raw selection
Getting readyHow to do it...How it works...
3. Dealing with Data
IntroductionThe enter-update-exit pattern
Binding an array as data
Getting readyHow to do it...How it works...
Binding object literals as data
Getting readyHow to do it...How it works...
Binding functions as data
Getting readyHow to do it...How it works...
Working with arrays
Getting readyHow to do it...How it works...
Filtering with data
Getting readyHow to do it...How it works...
Sorting with data
Getting readyHow to do it...How it works...
Loading data from a server
Getting readyHow to do it...How it works...
Asynchronous data loading using queue
Getting readyHow to do it...How it works...
4. Tipping the Scales
IntroductionWhat are scales?
Using continuous scales
Getting readyHow to do it...How it works...Linear scalePower scaleLog scale
Using the time scale
Getting readyHow to do it...How it works...There's more...See also
Using the ordinal scale
Getting readyHow to do it...How it works...
Interpolating a string
InterpolatorGetting readyHow to do it...How it works...There's more...
Interpolating colors
Getting readyHow to do it...How it works...See also
Interpolating compound objects
Getting readyHow to do it...How it works...
5. Playing with Axes
Introduction
Working with basic axes
Getting readyHow to do it...How it works...
Customizing ticks
Getting readyHow to do it...How it works...
Drawing grid lines
Getting readyHow to do it...How it works...
Dynamic rescaling of axes
Getting readyHow to do it...How it works...
6. Transition with Style
IntroductionWhat is Transition?
Animating a single element
Getting readyHow to do it...How it works...
Animating multiple elements
Getting readyHow to do it...How it works...
Using ease
Getting ReadyHow to do it...How it works...
Using tweening
Getting readyHow to do it...How it works...There's more...
Using transition chaining
Getting readyHow to do it...How it works...
Using transition filter
Getting readyHow to do it...How it works...See also
Listening to transitional events
Getting readyHow to do it...How it works...
Working with timer
Getting readyHow to do it...How it works...See also
7. Getting into Shape
IntroductionWhat is SVG?VectorScalability
Creating simple shapes
Getting readyHow to do it...How it works...There's more...D3 SVG shape generatorsSee also
Using a line generator
Getting readyHow to do it...How it works...See also
Using line curve
Getting readyHow to do it...How it works...See Also
Changing line tension
Getting readyHow to do it...How it works...
Using an area generator
Getting readyHow to do it...How it works...
Using area curve
Getting readyHow to do it...How it works...There's more...See also
Using an arc generator
Getting readyHow to do it...How it works...See also
Implementing arc transition
Getting readyHow to do it...How it works...There's more...See also
8. Chart Them Up
IntroductionD3 chart convention
Creating a line chart
Getting readyHow to do it...How it works...Chart object and attributesChart body frame renderingRender axesRender data series
Creating an area chart
Getting readyHow to do it...How it works...
Creating a scatterplot chart
Getting readyHow to do it...How it works...
Creating a bubble chart
Getting readyHow to do it...How it works...
Creating a bar chart
Getting readyHow to do it...How it works...See also
9. Lay Them Out
Introduction
Building a pie chart
Getting readyHow to do it...How it works...There's more...See also
Building a stacked area chart
Getting readyHow to do it...How it works...There's more...Expanded area chartStreamgraphSee also
Building a treemap
Getting readyHow to do it...How it works...See also
Building a tree
Getting readyHow to do it...How it works...See also
Building an enclosure diagram
Getting readyHow to do it...How it works...See also
10. Interacting with Your Visualization
Introduction
Interacting with mouse events
Getting readyHow to do it...How it works...There's more...See also
Interacting with a multi-touch device
Getting readyHow to do it...How it works...There's more...See also
Implementing zoom and pan behavior
Getting readyHow to do it...How it works...There's more...See also
Implementing drag behavior
Getting readyHow to do it...How it works...There's more...See also
11. Using Force
Introduction
Using gravity and charge
Getting readyHow to do it...How it works...Alpha decayVelocity decayChargePositioningCollisionSetting up zero force layoutSetting up mutual repulsionSetting up gravitySetting up positioning with gravitySetting up positioning with repulsionSee also
Customizing velocity
Getting readyHow to do it...How it works...See also
Setting the link constraint
Getting readyHow to do it...How it works...See also
Using force to assist visualization
Getting readyHow to do it...How it works...See also
Manipulating force
Getting readyHow to do it...How it works...See also
Building a force-directed graph
Getting readyHow to do it...How it works...See also
12. Knowing Your Map
Introduction
Projecting the US map
GeoJSONTopoJSONGetting readyHow to do it...How it works...See also
Projecting the world map
Getting readyHow to do it...How it works...See also
Building a choropleth map
Getting readyHow to do it...How it works...See also
13. Test Drive Your Visualization
IntroductionIntroduction to unit testing
Getting Jasmine and setting up the test environment
Getting readyHow to do it...How it works...See also
Test driving your visualization - chart creation
Getting readyHow to do it...How it works...
Test driving your visualization - SVG rendering
Getting readyHow to do it...How it works...
Test driving your visualization - pixel-perfect bar rendering
Getting readyHow to do it...How it works...See also
Appendix. Building Interactive Analytics in Minutes
Introduction
The crossfilter.js library
How to do it...How it works...There's more...See also
Dimensional charting - dc.js
Getting readyHow to do it...How it works...There's more...See also

Content preview from Data Visualization with D3 4.x Cookbook - Second Edition

Implementing drag behavior

Another common behavior in interactive visualization that we will cover in this chapter is dragging. Drag is useful to provide capabilities in visualization that allow graphical rearrangement or even user input through force; we will discuss this in the next chapter. In this recipe, we will explore how the drag behavior is supported in D3.

Getting ready

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

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter10/drag.html

How to do it...

Here, we will produce four circles that can be dragged using D3 drag behavior support and additionally with SVG boundary detection while being dragging. Now, let's see how to implement this in code:

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

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

D3.js 4.x Data Visualization - Third Edition

Publisher Resources

ISBN: 9781786468253

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design