Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search 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 Learn D3.js
  • Table Of Contents Toc
  • Feedback & Rating feedback
Learn D3.js

Learn D3.js

By : Helder da Rocha
4.1 (10)
Buy this Book
close
close
Learn D3.js

Learn D3.js

4.1 (10)
By: Helder da Rocha

Overview of this book

This book is a practical hands-on introduction to D3 (Data-driven Documents): the most popular open-source JavaScript library for creating interactive web-based data visualizations. Based entirely on open web standards, D3 provides an integrated collection of tools for efficiently binding data to graphical elements. If you have basic knowledge of HTML, CSS and JavaScript you can use D3.js to create beautiful interactive web-based data visualizations. D3 is not a charting library. It doesn’t contain any pre-defined chart types, but can be used to create whatever visual representations of data you can imagine. The goal of this book is to introduce D3 and provide a learning path so that you obtain a solid understanding of its fundamental concepts, learn to use most of its modules and functions, and gain enough experience to create your own D3 visualizations. You will learn how to create bar, line, pie and scatter charts, trees, dendograms, treemaps, circle packs, chord/ribbon diagrams, sankey diagrams, animated network diagrams, and maps using different geographical projections. Fundamental concepts are explained in each chapter and then applied to a larger example in step-by-step tutorials, complete with full code, from hundreds of examples you can download and run. This book covers D3 version 5 and is based on ES2015 JavaScript.
Table of Contents (13 chapters)
close
close
close
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Introduction
Introduction
D3 data-driven documents
Using D3
Modules (microlibraries)
Summary
References
2
Technical Fundamentals
Technical Fundamentals
Scalable Vector Graphics (SVG)
Essential Javascript data structures
HTML5 Canvas
Data formats
Summary
References
3
Quick Start
Quick Start
Selecting and binding data
Creating a bar chart with D3 and HTML
Creating a bar chart with D3 and SVG
Updating data visualizations
Displaying a map using D3 and SVG
Summary
References
4
Data Binding
Data Binding
Selections
D3 general update pattern
Data joining
Loading and parsing data
A complete step-by-step example
Summary
References
5
Manipulating Data and Formatting
Manipulating Data and Formatting
Manipulating arrays, collections, and objects
Grouping data with d3.nest()
Histograms
Random numbers
Interpolation
Text formatting and internationalization
Summary
References
6
Scales, Axes, and Colors
chevron up
Scales, Axes, and Colors
Axes
Scales
Color palettes, schemes, and spaces
Creating a scatterplot
Summary
References
7
Shape and Layout Generators
Shape and Layout Generators
Shapes and layouts
Lines
Symbols
Curve functions
Areas
Stacked layouts
Radial charts
Arcs
Pie layout
Canvas rendering
Summary
References
8
Animation and Interactivity
Animation and Interactivity
Events
Transitions
Timers
Dragging behavior
Brushing behavior
Zooming behavior
Summary
References
9
Visualizing Hierarchical Data
Visualizing Hierarchical Data
Hierarchical data
Unidirectional node-link diagrams
Partitions
Enclosure diagrams
Interactive visualizations
Summary
References
10
Visualizing Flows and Networks
Visualizing Flows and Networks
Network visualization
Graphs and data structures
Adjacency diagrams
Chord diagrams
Sankey diagrams
Arc diagrams
Node-link diagrams with force-directed simulations
Summary
References
11
Visualizing Geographical Data
Visualizing Geographical Data
Geographical information systems
How to make a thematic map
GeoJSON geometries
TopoJSON
Graticules, circles and lines
Projections
Spherical geometry
Zooming, brushing and rotating
Using Canvas
Summary
References
12
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Creating a scatterplot

In this final section, you will use the features that you learned about in this chapter to create a scatterplot and compared the Gross Domestic Product (GDP) per capital and the Human Development Index (HDI) of several countries. This is a step-by-step tutorial. We will start with a simple chart and add axes, labels, and interactive features. You can code as you go or download the files that are available from the StepByStep/ folder, in the GitHub repository for this chapter.

The CSV data file that's used for this visualization (Data/un_regions_gdp.csv) contains data that was obtained from several sources, such as the United Nations and the World Bank. Both the HDI and GDP are from 2017, so they can be compared. The following is a fragment of this file, showing the headers and some rows of data:

Country,Continent,Area_km2,Pop_2016,HDI_2017,Code,GDP_2017...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
End of Section 5
Next Section
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

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