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
Learn D3.js

Learn D3.js

By : Helder da Rocha
4.3 (9)
Buy this Book
close
close
Learn D3.js

Learn D3.js

4.3 (9)
By: Helder da Rocha
Buy this Book

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
Icon
Preface
Icon
Who this book is for
Icon
What this book covers
Icon
To get the most out of this book
Icon
Get in touch
Lock Free Chapter
1
Introduction
Icon
Introduction
Icon
D3 data-driven documents
Icon
Using D3
Icon
Modules (microlibraries)
Icon
Summary
Icon
References
2
Technical Fundamentals
Icon
Technical Fundamentals
Icon
Scalable Vector Graphics (SVG)
Icon
Essential Javascript data structures
Icon
HTML5 Canvas
Icon
Data formats
Icon
Summary
Icon
References
3
Quick Start
Icon
Quick Start
Icon
Selecting and binding data
Icon
Creating a bar chart with D3 and HTML
Icon
Creating a bar chart with D3 and SVG
Icon
Updating data visualizations
Icon
Displaying a map using D3 and SVG
Icon
Summary
Icon
References
4
Data Binding
Icon
Data Binding
Icon
Selections
Icon
D3 general update pattern
Icon
Data joining
Icon
Loading and parsing data
Icon
A complete step-by-step example
Icon
Summary
Icon
References
5
Manipulating Data and Formatting
Icon
Manipulating Data and Formatting
Icon
Manipulating arrays, collections, and objects
Icon
Grouping data with d3.nest()
Icon
Histograms
Icon
Random numbers
Icon
Interpolation
Icon
Text formatting and internationalization
Icon
Summary
Icon
References
6
Scales, Axes, and Colors
chevron up
Icon
Scales, Axes, and Colors
Icon
Axes
Icon
Scales
Icon
Color palettes, schemes, and spaces
Icon
Creating a scatterplot
Icon
Summary
Icon
References
7
Shape and Layout Generators
Icon
Shape and Layout Generators
Icon
Shapes and layouts
Icon
Lines
Icon
Symbols
Icon
Curve functions
Icon
Areas
Icon
Stacked layouts
Icon
Radial charts
Icon
Arcs
Icon
Pie layout
Icon
Canvas rendering
Icon
Summary
Icon
References
8
Animation and Interactivity
Icon
Animation and Interactivity
Icon
Events
Icon
Transitions
Icon
Timers
Icon
Dragging behavior
Icon
Brushing behavior
Icon
Zooming behavior
Icon
Summary
Icon
References
9
Visualizing Hierarchical Data
Icon
Visualizing Hierarchical Data
Icon
Hierarchical data
Icon
Unidirectional node-link diagrams
Icon
Partitions
Icon
Enclosure diagrams
Icon
Interactive visualizations
Icon
Summary
Icon
References
10
Visualizing Flows and Networks
Icon
Visualizing Flows and Networks
Icon
Network visualization
Icon
Graphs and data structures
Icon
Adjacency diagrams
Icon
Chord diagrams
Icon
Sankey diagrams
Icon
Arc diagrams
Icon
Node-link diagrams with force-directed simulations
Icon
Summary
Icon
References
11
Visualizing Geographical Data
Icon
Visualizing Geographical Data
Icon
Geographical information systems
Icon
How to make a thematic map
Icon
GeoJSON geometries
Icon
TopoJSON
Icon
Graticules, circles and lines
Icon
Projections
Icon
Spherical geometry
Icon
Zooming, brushing and rotating
Icon
Using Canvas
Icon
Summary
Icon
References
12
Other Books You May Enjoy
Icon
Other Books You May Enjoy
Icon
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...
Visually different images
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.
Learn D3.js
End of Section 6
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