32,36 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Explore the power of D3.js 5 and its integration with web technologies for building rich and interactive data visualization solutions
Key Features
- Explore the latest D3.js 5 for creating charts, plots, and force-directed graphics
- Practical guide for creating interactive graphics and data-driven apps with JavaScript
- Build Real-time visualization and transition on web using SVG with D3.js
Book Description
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.
What you will learn
- Learn to use D3.js version 5 and web standards to create beautiful interactive data-driven visualizations for the web
- Bind data to DOM elements, applying different scales, color schemes and configuring smooth animated transitions for data updates
- Generate data structures and layouts for many popular chart formats
- Apply interactive behaviors to any chart
- Create thematic maps based on GIS data using different geographical projections with interactive behaviors
- Load, parse and transform data from JSON and CSV formats
Who this book is for
The book is intended for web developers, web designers, data scientists, artists, and any developer who wish to create interactive data visualization for the Web using D3. The book assumes basic knowledge of HTML, CSs, and JavaScript.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 646
Veröffentlichungsjahr: 2019
Ähnliche
Learn D3.js
Copyright © 2019 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Commissioning Editor: Pavan RamchandaniContent Development Editor: Pranay FereiraTechnical Editor: Jinesh TopiwalaCopy Editor: Safis EditingProject Coordinator: Kinjal BariProofreader: Safis EditingIndexer: Tejal Daruwale SoniGraphics: Alishon MendonsaProduction Coordinator:Jayalaxmi Raja
First published: May 2019
Production reference: 1020519
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-83864-557-1
www.packtpub.com
Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Why subscribe?
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Mapt is fully searchable
Copy and paste, print, and bookmark content
Packt.com
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.
Contributors
About the author
Helder teaches, writes and develops applications with Java and Web technologies since 1995. In 1996 he wrote one of the first books in Portuguese about HTML and JavaScript, and since then he created hundreds of presentations, tutorials, and course materials on Java, Java EE, programming tools, patterns, techniques, methodologies, HTML, CSS, JavaScript, SVG, XML and related technologies, data visualization, Arduino and Internet of Things. He holds a masters degree in Computer Science. He also has a background in the visual arts and design and has some of his artwork in permanent museum exhibits. He lives in Brazil, where he works as an independent consultant, developer and instructor and a frequent speaker at technological events.
I would like to thank my wife, Ana Carolina, and my daughter, Marina, for their patience and inspiration. Many examples created for this book use data from public portals and scientific publications, for which I thank the researchers for sharing it. Finally, I must thank the creators of D3.js and the GitHub community that maintains it, since this book would not exist without them.
About the reviewers
Erina Dmello is an assistant professor in the Computer Science department of St. Francis College, Mumbai. Her enthusiasm for web technologies inspires her to contribute to freelance JavaScript projects, especially on Node.js. She has technically reviewed the books JavaScript JSON Essentials and RESTful Web API Design with Node.js for Packt Publishing. Her research topics were SDN and IoT, which, according to her, create amazing solutions for various web technologies when used together. Nowadays, she focuses on blockchain and enjoys fiddling with its concepts in JavaScript.
Santosh Viswanatham is a software developer, maker, and an open source enthusiast who prefers mountains to beaches. He works as a web developer at Gaian Solutions and previously worked at Infosys Ltd.
Santosh has been volunteering for Mozilla for the past six years as a developer evangelist and participation leader, and previously as a featured add-ons board member, and an executive member of the FSA Board. He is a tech speaker at Mozilla and speaks about his favorite web stuff, including browser extensions, WebVR, PWA, DevTools, and CSS Grid. For his contributions to Mozilla, his name is listed in the credits of every shipped Firefox browser.
When he is not glued to his computer, you will find him reading books, watching movies, and trying not to cook badly.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
Table of Contents
Title Page
Copyright and Credits
Learn D3.js
About Packt
Why subscribe?
Packt.com
Contributors
About the author
About the reviewers
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
Introduction
D3 data-driven documents
What is D3?
How does it work?
Using D3
Environment setup
Hello, world
Debugging D3
Modules (microlibraries)
Data manipulation
Document manipulation
Interactivity and animation
Colors
Asynchronous operations and packaging
2D geometry
Spherical geometry and geographic maps
Layouts
Summary
References
Technical Fundamentals
Scalable Vector Graphics (SVG)
SVG graphics context (viewport)
Shapes
Fills and strokes
SVG styling with CSS
Transparency
Ellipses
Polygons and polylines
Paths
Text
Group containers
Reusing objects: use and defs
Matrix transforms
Configuring the SVG viewport
Gradients
Clipping
Filters
An SVG example
Essential Javascript data structures
Arrays
Strings
Functions
Objects
Maps and sets
HTML5 Canvas
A Canvas example
Data formats
CSV
XML
JSON
Summary
References
Quick Start
Selecting and binding data
Selecting and appending
Binding data
Creating a bar chart with D3 and HTML
Binding data to HTML
Scales
Array utilities
Adding labels
More labels, formatting, and colors
Changing colors
Loading external files
Creating a bar chart with D3 and SVG
Updating data visualizations
Handling events
Data updates
Smooth transitions
Displaying a map using D3 and SVG
Summary
References
Data Binding
Selections
W3C selectors
Selecting and filtering elements
Joining data
Getting and setting attributes, styles, and content
Modifying the structure of the node tree
Node ordering
Calling functions from a selection
Event handling
Multiple selections
D3 general update pattern
Creating elements
Updating selections
Entering new elements
Merging selections
Exiting unused elements
Data joining
Loading and parsing data
Using delimiter-separated values
Loading files
A complete step-by-step example
What are we going to create?
Setting up the page and view port
Loading data
Configuring scales and filtering data
Drawing the planet
Calculating the position of each moon
Entering the moons
Adding text labels
Changing views
Updating views
Adding new elements and merging selections
Removing extra elements
Using join() for updates
Other improvements
Summary
References
Manipulating Data and Formatting
Manipulating arrays, collections, and objects
Searching and statistics
Sorting
Transforming data
Generating data
Grouping operations
ES2015 replacements for d3-collection
Grouping data with d3.nest()
Nesting configuration
Sorting
Rollup
A step-by-step grouping example
Histograms
Random numbers
Interpolation
Other interpolators
Text formatting and internationalization
Number formatting
Date and time parsing and formatting
Summary
References
Scales, Axes, and Colors
Axes
Configuring ticks
Styling
Cartesian axes
Cartesian grids
Radial axes
Scales
Continuous scales
Linear scale
Exponential scale
Logarithmic scale
Symlog scale
Identity scale
Time scale
Interpolated scales
Sequential scale
Diverging scale
Discrete scales
Quantize scale
Quantile scale
Threshold scale
Ordinal scale
Band scale
Point scale
Color palettes, schemes, and spaces
Color palettes
Categorical color schemes
Color spaces
RGB color space
HSL color space
CIELAB color space
HCL color space
Cubehelix
Other color spaces
Color interpolation
Interpolated color schemes
Creating a scatterplot
Drawing dots on a Cartesian grid
Adding axes and labels
Configuring axis styles
Using a logarithmic scale
Grouping dots by category
Adding interactivity
Creating a bubble chart
Summary
References
Shape and Layout Generators
Shapes and layouts
Lines
Symbols
Curve functions
Areas
Stacked layouts
Radial charts
Radial line
Radial area
Arcs
Pie layout
Canvas rendering
SVG to Canvas and back
Summary
References
Animation and Interactivity
Events
Native DOM events
Mouse events in D3
Custom events and dispatching
Transitions
Transition dynamics
Tweening and text transitions
Easing algorithms
Multiple transitions
Life cycle of a transition and events
Timers
Dragging behavior
Configuration methods
Brushing behavior
Configuration methods
One-dimensional brush
Two-dimensional brush
Zooming behavior
Configuration methods
Interactive zoom
Programmatic zoom
Zoom transforms
Canvas zooming
Semantic zoom
Summary
References
Visualizing Hierarchical Data
Hierarchical data
A standard hierarchical layout 
Creating hierarchical structures
Layout  generators
Unidirectional node-link diagrams
Trees and dendograms
Path links
Horizontal trees
Using Canvas
Radial trees
Partitions
Icicle charts
Sunburst diagrams
Enclosure diagrams
Circle packing
Treemap
Interactive visualizations
Highlighting a path
Changing the root
Navigating a subtree
Summary
References
Visualizing Flows and Networks
Network visualization
Graphs and data structures
Adjacency matrices
Node-link structures
Adjacency diagrams
Creating a simple adjacency diagram
Chord diagrams
Creating a chord/ribbon diagram
Sankey diagrams
Creating a Sankey diagram
Arc diagrams
Node-link diagrams with force-directed simulations
Creating a force-directed network diagram
Forces
Simulation dynamics
Interactive highlighting
Dragging nodes
Fixing nodes to a position
Adding and removing nodes
Canvas rendering
Zooming in and out
Summary
References
Visualizing Geographical Data
Geographical information systems
GIS data formats
Thematic maps
How to make a thematic map
GeoJSON
Drawing a map with D3
Making a choropleth
Adding tooltips
Adding graticules to a map
Simple SVG zooming and panning
GeoJSON geometries
Primitive geometries
Multipart geometries
Drawing geometries as paths
Drawing points and text
TopoJSON
Obtaining GeoJSON features
Merging geometries
Creating a mesh
Discovering neighbors
Converting GeoJSON to TopoJSON
Graticules, circles and lines
Lines and outlines
Drawing circles
Projections
Types of projections
Choosing a projection
Conformal, equal-area and equidistant projections
Using a projection
Moving, rotating and scaling a projected map
Fitting a projection in a viewport
Rotating the sphere inside a projection
Clipping
Clipping to the sphere
Spherical geometry
Measuring distances
Calculating areas
Centroids and bounds
Interpolation, rotation and containment
Zooming, brushing and rotating
Brushing, or zoom to bounding box
Zoom to object
Rotate and zoom to object
Zooming with drag and rotate
Quaternion dragging and zooming
Inertia
Using Canvas
Summary
References
Other Books You May Enjoy
Leave a review - let other readers know what you think
Preface
This book was created as a guide to help you learn and explore D3.js. Its goal is to 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.
Fundamental concepts are explained in each chapter and then applied to larger examples in step-by-step tutorials. There are hundreds of examples you can download and run.
Code listings are used throughout the book, but most of the time they focus on a specific feature and show only a fragment of the full code. But you can always download the full listing. All the code examples used in the book are available from a public GitHub repository (see details below). You can try out all the code examples as you learn. You can also use it in any way you like since it's free and open source.
This book covers the basic and advanced features of D3. By the time you finish reading this book, having practiced with the code examples, I believe you will have a very good and solid knowledge of this library.
Who this book is for
The ideal target audience of this book includes web developers and designers, data journalists, data scientists and artists who wish to create interactive data-driven visualizations for the Web.
Basic knowledge of HTML, CSS, and JavaScript is required. No previous SVG knowledge is necessary.
What this book covers
Chapter 1, Introduction, introduces the D3.js JavaScript library, describing its main features and concepts, and how it drives data to transform documents.
Chapter 2, Technical Fundamentals, covers fundamental standard web technologies used by D3, such as SVG, JavaScript (ES 2015) data structures, HTML Canvas and standard data formats such as JSON and CSV.
Chapter 3, Quick Start, includes a practical step-by-step introduction to D3.js exploring a bit of everything that will be covered later in this book. You will learn how to bind data to HTML and SVG elements and create a simple horizontal bar chart, with interactive features and animated transitions.
Chapter 4, Data Binding, covers most of the d3-selection module and describes data-binding strategies in detail using several examples. In this chapter, you will also learn how to load and parse external data files and use the d3-dsv and d3-fetch modules.
Chapter 5, Manipulating Data and Formatting, explores tools from six modules: d3-array, d3-collection, d3-random, d3-interpolate, d3-format and d3-time-format. You will learn how to transform data arrays, create new collections using grouping, generate random distributions, histograms, interpolate all kinds of data and format dates and numbers according to a locale.
Chapter 6, Scales, Axes, and Colors, shows how to create and configure axes for Cartesian or radial grids (d3-axis), and scales that convert data from an input domain to an output range (d3-scale). Color schemes, interpolators, and color manipulation tools are also covered in examples that use the d3-color, d3-scale-chromatic and d3-interpolate modules.
Chapter 7, Shape and Layout Generators, explores the generator functions from the d3-shape module used to create some classic chart types such as line, pie and stacked area charts. In this chapter, you will learn how to generate the data to render these charts in SVG or Canvas.
Chapter 8, Animation and Interactivity, covers event handling, transitions and interactive behaviors in D3, exploring the d3-transition, d3-ease, and d3-timer modules. This chapter also explores zoom (d3-zoom), drag (d3-drag) and brush (d3-brush).
Chapter 9, Visualizing Hierarchical Data, shows how to prepare a data set so that it can be used to represent a hierarchy, using nesting techniques and tools provided by the d3-hierarchy module to represent hierarchical data as a tree, dendogram (cluster), treemap, circle pack or partition.
Chapter 10, Visualizing Flows and Networks, explores the visualization of network and flow diagrams. You will learn how to create a Sankey diagram (d3-sankey), a chord/ribbon diagram (d3-chord), and a force-directed animation simulation (d3-force).
Chapter 11, Visualizing Geographical Data, explores the d3-geo module, which contains tools for operations in planar and spherical geometry. You will learn how to render interactive map visualizations using D3.js using different geographical projections.
To get the most out of this book
The best way to learn a library than coding with it. If you follow the examples in this book and try them out as you read, I'm sure that your learning path will be quick. Also, make sure you set up your browser's development environment as indicated in Chapter 1: Introduction, so that you can catch programming errors quickly. Errors are a great learning resource, as long as you can find them and fix them. If you get stuck, you can always rely on the code examples.
When writing this book, I did my best to provide the most accurate information possible. All code listings were tested, and additional efforts were made to guarantee that all code examples are properly referenced in the book and work as expected. This book is based on D3.js version 5.9.2. I expect that the code examples should continue working with any 5.x version but there is a small possibility that some code may not work as expected if you are using a later version.
Download the example code files
You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packt.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Log in or register at
www.packt.com
.
Select the
SUPPORT
tab.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR/7-Zip for Windows
Zipeg/iZip/UnRarX for Mac
7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Learn-D3.js. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: http://www.packtpub.com/sites/default/files/downloads/9781838645571_ColorImages.pdf.
Conventions used
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "This code applies the .red class to each element of a collection."
A block of code is set as follows:
<p>See results in console log.</p> <div id="section"> <p>Paragraph 1</p> <p>Paragraph 2</p> </div> <p>Paragraph 3</p>
Any command-line input or output is written as follows:
npm install d3
Get in touch
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packt.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Reviews
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packt.com.
Introduction
This chapter will introduce the D3.js (data-driven document) JavaScript library, describing its main features, explaining how it works, and showing how it drives data to transform documents. D3 contains an integrated set of tools that will help you bind data to graphical elements in a web page, in order to create scatterplots, bar charts, line charts, hierarchical node-link diagrams, networks, chord diagrams, sunburst charts, thematic geographic maps, or any interactive data visualization you can imagine. But D3.js is also a huge library, and is famous for having a steep learning curve. The goal of this book is to provide a learning path that will help you grasp its fundamental data-driven concepts and become familiar with its essential API.
In this chapter, you will learn how to set up your environment and test it by creating a very simple D3 application. It also includes a general overview of D3’s architecture, describing the relationships between its many modules and a brief description of each one.
This chapter will outline the following topics:
D3 data-driven documents
Using D3
Modules microlibraries
D3 data-driven documents
D3, which stands for data-driven documents, is an open source JavaScript library used to create interactive web-based data visualizations. It provides a mechanism that connects arbitrary data to document elements, allowing their appearance and behavior to be driven by the data. Created by Mike Bostock, Jeff Heer, and Vadim Ogievetsky in 2001, it's currently used in hundreds of thousands of websites and is one of the most popular JavaScript data visualization libraries in the world.
If you have ever used interactive data applications from large news web portals such as The New York Times, The Washington Post, or The Guardian, there is a great probability that it was a D3 application. You may have also used one of the many charting libraries that are based on D3.
D3.js is also free and open source. You can use it in any project, commercial or not. Its source code is distributed in GitHub and is maintained by an active community of developers worldwide.
What is D3?
Yes, D3 is a JavaScript library, but no, D3 is not a charting library. There are no ready-to-use templates to create bar, pie, or line charts, for example. To create one of these charts, you have to draw all the lines, curves, and rectangles yourself using open standards such as SVG or HTML Canvas. D3, however, will do most of the hard work for you. It’s not trivial to use pure SVG to draw a bar chart; you need to scale data values so they fit in the chart, then calculate where to place each bar, and finally, set the coordinates of each rectangle before drawing it. Using D3, starting with an array of data, you can render all the bars with half a dozen chained commands in a single line of code.
D3 is a data visualization library. There are layout generators for pie charts that compute angles, which you can then use to draw arcs for the slices. There are functions that take a flat object array and turn it into a hierarchically linked object structure with coordinates for each node. You can use that data to draw circles at each coordinate point and draw lines between two nodes, rendering a tree. But you can also use the data differently, it's up to you. D3 doesn't restrict your creativity in any way. It doesn't tie you to a proprietary framework. Everything is based on open web standards.
D3 is also not only a data visualization library. Visualization is provided by HTML, CSS, or SVG. D3 focuses on the data. It's actually a collection of integrated JavaScript tools for manipulating the data structures necessary to create data visualizations. The core of the library is a fluent API used to select and manipulate the DOM. It replaces the DOM and libraries such as JQuery. It includes the data-driven mechanism that gives D3 its name, allowing you to bind arbitrary data to DOM elements, and then perform style and attribute transformations based on that data. This API is also used to bind and dispatch events, and to generate animated transitions.
D3 also includes tools to load and parse different data formats, such as JSON and CSV, perform general data manipulation on objects and arrays; generate data sequences and random numbers, perform interpolation and locale formatting. The actual data visualization parts contain layout generators, scales, axis generators, map projections, shape generators, color schemes, and other tools that are applied to previously selected DOM nodes and data.
How does it work?
A simplified view of D3's architecture is illustrated as follows. As implied by the name of the library, it's the data that drives the documents that display D3 visualizations. By adding, changing, and removing data, you directly affect the way your chart appears on the screen:
Data is usually provided as a JavaScript array, either generated locally or loaded from an external file. A typical D3.js script uses CSS selectors to select HTML or SVG elements and binds them to individual data items, removing, updating, or appending graphical elements automatically, when necessary.
You use CSS selectors to select one or more elements to create what D3 calls a selection object, which can then be used to apply styling and change the attributes of the selected elements. Binding an array to a selection object will map each data item to an element in the selection. These data items can be accessed in callback functions used in methods that set values for styles, attributes, and transforms.
You can also declare a selection of elements that don't exist in the DOM. Binding this selection to a data array will automatically create one element for each data item. You can then use the data to provide content, styles, and attributes for the new elements.
D3 also keeps data and their elements in sync. When updating with a smaller dataset, elements in excess are placed in a separate array, so you can remove them. If the dataset grows, existing elements are updated and missing elements are created and appended to fit the available data.
Using D3
All that you need to start using D3 can be found at d3js.org where you can download and install the library as a single JavaScript file, a collection of standalone microlibraries, a CDN link, or an NPM installation script. The site also includes the official documentation, which covers the library in great detail, with hundreds of tutorials for beginners and advanced users, and thousands of online examples.
The D3 site is a great place to start because you can try out several examples of data visualizations created with D3. Just click on any hexagon and it will lead you to a page showing a D3 application and its source code. Most are published in GitHub and published using the Bl.ocks platform (bl.ocks.org), which is a huge portfolio based on GitHub source code. Newer projects use the Observable platform (observablehq.com), which contains interactive tutorials where you can edit the code and see changes in real time. These platforms are very popular among the D3 community. Many of these tutorials were designed by creators and major contributors of the D3 library, such as Mike Bostock, Jason Davies, and Philippe Riviere.
Take some time to explore these examples and see what you can create using D3.
Environment setup
You don't need a sophisticated development environment to use D3. If you already develop Web applications using npm, you can install it with:
npm install d3
You can also add the d3.js file to a local folder after downloading the full library (default bundle) as a ZIP from the official website. Then you can import it to your HTML file using the <script> tag and a local relative path; for example (for the minified version):
<script src="js/d3/d3.v5.min.js"></script>
If you have a permanent web connection, it's probably simpler to use a CDN link:
<script src="https://d3js.org/d3.v5.min.js"></script>
For very simple applications that don't load external files, you can simply open the page in your browser from the file system. It's better to load the page using a web server. If you are using a code editor, it may already have a launch configuration or plugin that always starts a web server when you choose to load a page. You can also install a simple web server using npm, by using the following command:
npm install http-server –g
The preceding command will install it globally. Then, you can move to the directory where your files are located and simply type the following:
http-server
Then you can load your files from http://localhost:8080.
You can also develop D3 using online code editors, such as CodePen (codepen.io) or JSFiddle (jsfiddle.net). It’s also a great way to share your code.
Debugging D3
Although you don't need a full frontend modular development environment to create visualizations with D3.js, you still need a good debugger. Every browser comes with development tools that allow you to navigate a static page structure and generated DOM elements, and a console where you can interact in real time with the data used by the JavaScript engine in the real time.
The most important tool is the JavaScript console, where you will see any error messages. It's very common to get a blank page when you expected something else and to not have a clue on why your code doesn't work as expected. Sometimes it's just a comma you forgot, or the internet is down and some file was not loaded. If you have the JavaScript console open while you run your page, it will instantly tell you what's going on. It's also a good idea to use an editor with line numbering since most error messages inform the lines where the problem occurred:
You can open the developer tools as a frame in your browser or as a separate window. Following are the menu paths for the JavaScript console in latest versions of the three most popular browsers:
Chrome
:
View
|
Developer
|
JavaScript Console
Firefox
:
Tools
|
Web Developer
|
Web Console
Safari
:
Develop
|
Show Error Console
Many code fragments and examples can be tested by simply typing them in the JavaScript console. The console’s context is the currently loaded page. You will be able to access the functions of any JavaScript library file that was loaded with the <script> tag, and any global variables declared in <script></script> blocks, so you can also use the console to experiment with D3. The console is a great way to learn D3 since you can run functions in real time and immediately see the results they produce. You can try out many code examples in this book using the JavaScript console.
Modules (microlibraries)
You don't have to always load the entire D3 library. D3 is a modular library, so if you are only using some D3 features, you can include only the parts that you are using. The minified default bundle is about 240 KB in size, but you may be able to create your chart using as little as 13 KB if you don't need many modules. An animated interactive bar chart, complete with tooltips, transitions, colors, and SVG graphics can be created with less than 24 KB loading just the following two modules:
<script src="https://d3js.org/d3-selection.v1.min.js"></script><script src="https://d3js.org/d3-transition.v1.min.js"></script>
But if you need axes, maps, and other features, you will require more modules and dependencies. In this case, either use the default bundle, or set up a development environment where you can install each module using npm, since it automatically includes any dependencies. For production, you can generate and export a custom bundle using a packing tool such as Rollup. To install any module using npm, use the following:
npm install module-name
For the examples in this chapter (and most of the book) we will import D3 using the <script> tag with the CDN URL to the default bundle.
Even if you always use the default d3.js bundle, you should be aware of the modules it contains, and of the modules that are not part of the default bundle, because they need to be imported separately in case you require their functions. All the official documentation is also organized per module, and knowledge of the modular structure will allow you to tune the performance of your D3 application, in case you decide to create a custom bundle. Modules have their own versioning systems. You might need to load a module separately if you wish to use a feature included in a new major version, not yet included in the default bundle.
The following diagram shows the modules available in D3.js version 5, indicating direct dependencies (transitive dependencies are not shown). For example, if you need to use a function from the d3-scale module, you should import all the direct dependencies: (d3-array, d3-time-format, d3-collection, d3-format, d3-interpolate) and the transitive ones:( d3-time and d3-color). In this case, you should either use npm or import the default bundle.
The following tables contain a quick reference of all modules available in the current version, classified according to their purpose. In this book, we will be using functions from almost all of them.
Data manipulation
The following modules listed are used to generate, manipulate, transform, parse, and format data, in the form of numbers, text, arrays, objects, and files. They are all included in the default d3.js bundle:
Module
Bundled (d3v5)
Description
d3-array
Yes
Several array utilities that extend the basic ES6 functions, optimized for use with datasets. Dependencies: none.
d3-collection
Yes
Maps and sets optimized for use with datasets; functions for object collections and nesting data. Dependencies: none.
d3-random
Yes
Random number generators. Dependencies: none.
d3-dsv
Yes
Parser functions for delimiter-separated data. Dependencies: none.
d3-interpolate
Yes
Several functions for interpolating numbers, colors, strings, and so on. Dependencies: d3-color.
d3-scale
Yes
Generator functions to map data dimensions to graphical dimensions. Dependencies: d3-array, d3-collection, d3-format, d3-interpolate, d3-time-format, d3-time.
d3-time
Yes
API for operations with time (intervals, ranges, and so on). Dependencies: none.
d3-format
Yes
Locale-sensitive methods for number formatting. Dependencies: none.
d3-time-format
Yes
Locale-sensitive methods for date/time formatting. Dependencies: d3-time.
Document manipulation
These are core modules in D3 used to select and manipulate HTML or SVG elements by providing a concise API to the DOM. With these modules, you can select and filter elements (using CSS selectors), create elements, append, insert, or remove from the DOM tree, add attributes and contents, change styles or classes, connect event handlers, and join data. Practically any D3 application uses at least d3-selection.
Module
Bundled (d3v5)
Description
d3-selection
Yes
Contains the essential DOM API for selection and manipulation of DOM elements. Dependencies: none.
d3-selection-multi
No
Adds optional support for setting multiple attributes, styles, or properties in selections and transitions using an object syntax. Dependencies: d3-selection, d3-transition.
Interactivity and animation
The modules listed in the following table are used in dynamic visualizations when updating data, zooming, dragging, selecting and clicking charts and maps.
Module
Bundled (d3v5)
Description
d3-transition
Yes
Methods to configure the transition applied to a selection. Dependencies: d3-interpolate, d3-ease, d3-dispatch, d3-selection, d3-timer, d3-color.
d3-ease
Yes
Easing functions for animations. Dependencies: none.
d3-zoom
Yes
Apply transforms in HTML, SVG, or Canvas using mouse or touch. Also includes support for programmatic transforms. Dependencies: d3-dispatch, d3-drag, d3-interpolate, d3-selection, d3-transition.
d3-drag
Yes
Drag and drop SVG, HTML, or Canvas using mouse or touch. Dependencies: d3-dispatch, d3-selection.
d3-brush
Yes
Selects a one or two-dimensional region for detailing using the mouse or touch. Dependencies: d3-dispatch, d3-drag, d3-interpolate, d3-selection, d3-transition.
d3-quadtree
Yes
Partitions two-dimensional space recursively into squares. Used to calculate regions for brushing and zooming. Dependencies: none.
d3-timer
Yes
A queue for managing concurrent animations. Dependencies: none.
d3-dispatch
Yes
Mechanism for event dispatching to named callbacks. Dependencies: none.
Colors
The following table lists modules that contain representations for machine-friendly and human-friendly color spaces and color schemes.
Module
Bundled (d3v5)
Description
d3-color
Yes
Support for several color spaces. Supports RGB, HSL, Cubehelix, Lab (CIELAB), and HCL (CIELCH). Dependencies: none.
d3-scale-chromatic
Yes
Sequential, diverging, and categorical color schemes and palettes. Dependencies: d3-color, d3-interpolate.
d3-hsv
No
Support for the HSV color space. Dependencies: d3-color.
d3-hcg
No
Support for the HCG color space. Dependencies: d3-color.
d3-cam16
No
Support for the CIECAM16 color space. Dependencies: d3-color.
Asynchronous operations and packaging
These modules are used to load files using Ajax.
Module
Bundled (d3v5)
Description
d3-fetch
Yes
Methods for fetching files asynchronously using Ajax. Also includes parsing methods for several data formats. Dependencies: d3-dsv.
d3-queue
No
Supports queueing of concurrent asynchronous requests. Dependencies: none. This module is deprecated in favor of ES6 promises.
d3-require
No
Supports AMD for loading modules and dependencies. Dependencies: none.
2D geometry
The following modules listed contain a complete two-dimensional graphical API that can be used to create any type of visualization, from simple line, area, or pie charts to arbitrary paths and shapes.
Module
Bundled (d3v5)
Description
d3-shape
Yes
Generators and utility functions to create and manipulate arcs, curves, lines, areas, stacks, curves, pie charts, symbols, and links in SVG or Canvas. Dependencies: d3-path.
d3-axis
Yes
Generates SVG axes. Dependencies: none.
d3-path
Yes
A Canvas API that generates SVG paths (which can be rendered as a Canvas or SVG). Dependencies: none.
d3-polygon
Yes
Utility functions for two-dimensional polygons. Dependencies: none.
Spherical geometry and geographic maps
The following table lists modules that are used to display information in geographic maps. They contain methods for spherical trigonometry, geographic projections, and other utilities.
Module
Bundled (d3v5)
Description
d3-geo
Yes
Generators for geographic paths and standard projections, spherical shapes, and trigonometric functions, transforms, streams, and other utilities. Dependencies: d3-array.
d3-contour
Yes
Creates contour polygons, which are commonly used for geographical density, bathymetry, or relief maps. Dependencies: d3-array.
d3-geo-projection
No
Additional projections for d3-geo. Dependencies: d3-geo, d3-array.
d3-geo-polygon
No
Several utility functions for spherical polygons. Dependencies: d3-geo, d3-array, d3-geo-projection.
Layouts
The following modules listed, include generator functions, utilities, and algorithms to create visualizations for complex relationships such as node-link hierarchies, graphs, trees, networks, flow diagrams, tiles, and Voronoi diagrams.
Module
Bundled (d3v5)
Description
d3-hierarchy
Yes
Generator functions for hierarchic layouts such as node-link, adjacency, and enclosure diagrams. Functions create stratifications, clusters, trees, dendrograms, treemaps, circle packs, and partitions. Dependencies: none.
d3-force
Yes
Implementation of a force simulation (uses the Stormer-Verlet method), used for interactive visualizations of graphs, networks, and hierarchies. Dependencies: d3-collection, d3-dispatch, d3-quadtree, d3-timer.
d3-chord
Yes
Generator function and utilities for creating chord flow diagrams. Dependencies: d3-array, d3-path.
d3-sankey
No
Generator function and utilities for creating Sankey flow diagrams. Dependencies: d3-array, d3-collection, d3-shape.
d3-tile
No
A layout for raster image-based tiles, normally used for displaying tiles of geographic maps behind a vector layer. Dependencies: d3-array.
d3-hexbin
No
Generator function and utilities for creating scatterplots of hexagonal bins, useful for color-encoded heatmaps. Dependencies: none.
d3-voronoi
Yes
Generator functions and utilities for creating Voronoi diagrams (nature-like diagrams that show regions in a plane that are nearest to a point). Dependencies: none.
d3-delaunay
No
Compute the Delaunay triangulation of a set of points; a simpler and faster method to create Voronoi diagrams. Dependencies: none.
Summary
This chapter provided a general introduction to the D3.js library, describing its architecture, modules, and showing how to set up a small D3 application that, although very simple, demonstrated one of the central paradigms in D3, which is driving the appearance of a visualization using arbitrary data.
The next chapter will consist of reference topics that cover fundamental technologies used by D3, such as SVG (an introductory tutorial), JavaScript (mostly a review of the fundamental data structures in ES 2015), and Canvas (a short reference). There is also a short section on data formats. If you are comfortable with all these topics, or if you want to start using D3 right away, you can skip them now and proceed to straight Chapter 3, Quick Start.
References
D3.js documentation:
d3js.org
D3.js API reference:
github.com/d3/d3/blob/master/API.md
D3.js module repository:
github.com/d3
D3.js gallery:
github.com/d3/d3/wiki/Gallery
D3.js wiki:
github.com/d3/d3/wiki
Bl.ocks portfolios:
bl.ocks.org
Observable notebooks:
observablehq.com
Technical Fundamentals
This chapter covers fundamental standard web technologies used by D3: SVG, JavaScript (ES 2015), HTML Canvas and standard data formats such as JSON and CSV. It is intended as a general reference to these topics.
Most data visualizations created with D3.js generate SVG graphics. Good knowledge of SVG is important to make the most of D3, but you only really need to know the basics. It’s enough to know how to create simple shapes such as rectangles, circles, lines, and their attributes and styles. It’s also useful to understand how to apply transforms, such as translate, scale and rotate. This chapter includes a quick refresher on SVG that covers these essential topics and a bit more, since the more SVG you know, the more graphical resources you will have to create data visualizations using D3.
All the code examples in this book use ES 2015 (ES6) JavaScript. You should have a working knowledge of at least ES5 JavaScript to be able to follow the code examples. This chapter provides a short description of the main ES6 features used in the code, as well as a brief review of the structures used to store data in JavaScript, such as strings, objects, arrays, maps, sets, and functions, including a list of the methods used to manipulate strings and arrays.
D3 uses SVG to generate most graphics, but it can also generate graphics in Canvas contexts. This is usually used for performance optimizations, but it’s also a bridge to the integration with other contexts such as WebGL. This chapter contains a short reference of the main methods available in the Canvas 2D context and a Canvas version of the examples previously shown in SVG.
Outline of this chapter:
Introduction to SVG
Essential JavaScript data structures
HTML Canvas
Data formats
Scalable Vector Graphics (SVG)
SVG stands for Scalable Vector Graphics. It’s an XML-based image format that describes graphics using geometrical attributes. Unlike HTML5 Canvas, which is another standard for vector graphics, SVG primitives are made of individual XML elements described using tags and attributes. It is also object-based and provides a DOM, which allows CSS styling, dynamic shape creation and manipulation, and coordinate transforms using JavaScript or CSS.
To control SVG elements with D3 you should understand basic SVG syntax and rules, how a document is structured, how each element is rendered, the effects caused by attributes and styles, as well as nesting and transformation rules.
All the code used in this section is available in the SVG/ folder, from the GitHub repository for this chapter. You can see the results simply loading the pages in your browser.
SVG graphics context (viewport)
When SVG is embedded in HTML it creates a viewport: a default graphics context similar to the context created by Canvas. To create the viewport, all you need is to add an empty <svg/> tag inside your <body>. Since this is an HTML tag, you can style it with standard HTML CSS and set its size using width and height attributes (you can alternatively use CSS properties), as follows:
<style> svg { border: solid 1px lightgray; background-color: hsla(240,100%,50%,0.2) }</style><body><h2>SVG viewport</h2> <svg width="600" height="300"></svg></body>
The following screenshot contains the result of the code above and the default coordinate system used by SVG, which starts on the upper-left corner of the viewport. You can change the orientation, scale and other aspects of the coordinate system configuring the viewBox attribute (see end of this section).
You can also create an SVG element using the DOM API, or D3, which is much simpler. The result is identical (see SVG-with-D3/1-viewport.html):
<body> <script> d3.select("body").append("svg").attr("width", 400).attr("height", 300); </script></body>
Fills and strokes
Shapes have default black fill colors and transparent stroke borders, unless you assign different color strings to the SVG attributes (or CSS properties) fill and stroke.
In the following SVG, three straight lines were drawn using the mandatory x1/y1 and x2/y2 attributes for <line> elements. They would be invisible it the stroke attribute wasn't present. A stroke-width has a default value of 1.
<svg width="400" height="300"> <line x2="400" stroke="red" stroke-width="5"/> <line y2="150" stroke="blue" stroke-width="5"/> <line x2="200" y2="150" stroke="black" stroke-width="1"/></svg>
As before, missing attributes use zero as default, so x1 and y1 are zero in all lines, which makes them all start at the top-left corner, which is the origin. Only half of the strokes for the red and blue lines are visible, since they are centered in the borders of the SVG:
Besides width and color, you can control many other stroke attributes, such as transparency (stroke-opacity), dash arrays (stroke-dasharray), line caps (stroke-linecap) and others (see SVG/5-rect-stroke.html). If you only want to stroke a closed shape, you need to either redefine its fill to none, or set fill-opacity to zero, since closed shapes have opaque black fills by default.
SVG styling with CSS
You can also specify style rules using SVG CSS properties, which have the same names as the attributes. CSS properties, however, have precedence over XML attributes. Declaring a style with the same name as an attribute will override it. If you add the following style declaration in the <style> block of your page, the width of all lines will change to 20 pixels:
line { stroke-width: 20px; /* Overrides attr */}
This result is shown below. The lines at the edges seem thinner because half of their width is outside the context:
You can also apply CSS class and style attributes to different SVG objects. For example, consider the following CSS class declarations:
.reds { fill: red;}.semitr { fill-opacity: 0.5;}
Since the following rectangles each belong to one or more of these classes, they will inherit the style properties declared for each class:
<svg width="600" height="200"> <rect x="50" y="50" width="90" height="90" class="semitr"/> <rect x="200" y="50" width="175" height="100" rx="40" ry="40" class="reds semitr"/> <rect x="450" y="25" width="100" height="150" class="reds"/></svg>
One class applies the red fill, the other applies 50% transparency. The rectangle in the middle belongs to both classes, so it's both red and semi-transparent, as follows:
The <rect> element, used to create the squares and rectangles above, require two attributes: height and width, and can positioned in the viewport with x and y. Rounded corners can be applied by setting the rx and ry properties (radius of the corner).
Although HTML and SVG share many CSS properties, many, such as fill or stroke, only exist in SVG. In HTML you would use background-color and color, which don't work in SVG. When embedded in an HTML page, the <svg> element represents a graphics context in the HTML namespace, so to fill it you need to use background-color. But any elements declared inside the <svg> element, such as <rect>, are part of the SVG namespace where the CSS background-color property doesn't exist, and you need to use fill.
Transparency
When objects overlap in SVG, the code order determines which element will appear over the other. Preceding siblings are always overlapped by siblings that are declared after them. The CSS z-index property doesn’t work in SVG. To move an object to the front, you have to modify the DOM tree.
You can see through objects that overlap by changing their transparency. You can apply opacity levels to fills and strokes separately, using fill-opacity or stroke-opacity, or for the entire object using opacity. All attributes require a value between 0 (invisible) and 1 (opaque). An alternative, which achieves the same result, is to use the alpha component in rgba or hsla color strings (for example, ‘rgba(255, 0, 0, 0.5)’).
The three squares below apply different transparency parameters on fills and strokes:
<rect x="50" y="50" height="100" width="100" rx="10" ry="10" stroke="red" stroke-width="10" fill-opacity="0"/><rect x="75" y="75" height="100" width="100" rx="10" ry="10" fill="gray" stroke="black" stroke-width="10" fill-opacity=".7"/><rect x="100" y="100" height="100" width="100" rx="10" ry="10" fill="yellow" stroke="blue" stroke-width="10" stroke-opacity=".6"/>
