D3.js: Cutting-edge Data Visualization

Turn your raw data into real knowledge by creating and deploying complex data visualizations with D3.js

About This Book

• Understand how to best represent your data by developing the right kind of visualization
• Explore the concepts of D3.js through examples that enable you to quickly create visualizations including charts, network diagrams, and maps
• Get practical examples of visualizations using real-world data sets that show you how to use D3.js to visualize and interact with information to glean its underlying meaning

Who This Book Is For

Whether you are new to data and data visualization, a seasoned data scientist, or a computer graphics specialist, this Learning Path will provide you with the skills you need to create web-based and interactive data visualizations. Some basic JavaScript knowledge is expected, but no prior experience with data visualization or D3 is required

What You Will Learn

• Gain a solid understanding of the common D3 development idioms
• Find out how to write basic D3 code for servers using Node.js
• Install and use D3.js to create HTML elements within a document
• Create and style graphical elements such as circles, ellipses, rectangles, lines, paths, and text using SVG
• Turn your data into bar and scatter charts, and add margins, axes, labels, and legends
• Use D3.js generators to perform the magic of creating complex visualizations from data
• Add interactivity to your visualizations, including tool-tips, sorting, hover-to-highlight, and grouping and dragging of visuals
• Write, test, and distribute a D3-based charting package
• Make a real-time application with Node and D3

In Detail

D3 has emerged as one of the leading platforms to develop beautiful, interactive visualizations over the web. We begin the course by setting up a strong foundation, then build on this foundation as we take you through the entire world of reimagining data using interactive, animated visualizations created in D3.js.

In the first module, we cover the various features of D3.js to build a wide range of visualizations. We also focus on the entire process of representing data through visualizations. By the end of this module, you will be ready to use D3 to transform any data into a more engaging and sophisticated visualization.

In the next module, you will learn to master the creation of graphical elements from data. Using practical examples provided, you will quickly get to grips with the features of D3.js and use this learning to create your own spectacular data visualizations with D3.js.

Over the last leg of this course, you will get acquainted with how to integrate D3 with mapping libraries to provide reverse geocoding and interactive maps among many other advanced features of D3. This module culminates by showing you how to create enterprise-level dashboards to display real-time data.

This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products:

• Learning D3.js Data Visualization, Second Edition by Andrew H. Rininsland
• D3.js By Example by Michael Heydt
• Mastering D3.js by Pablo Navarro Castillo

Style and approach

This course provides a comprehensive explanation of how to leverage the power of D3.js to create powerful and creative visualizations through step-by-step instructions in the form of modules. Each module help you skill up a level in creating meaningful visualizations.

Table of Contents

1. Module 1
1. Getting Started with D3, ES2016, and Node.js
2. A Primer on DOM, SVG, and CSS
3. Making Data Useful
4. Defining the User Experience – Animation and Interaction
5. Layouts – D3’s Black Magic
6. D3 on the Server with Node.js
7. Designing Good Data Visualizations
8. Having Confidence in Your Visualizations

2. Module 2
1. Getting Started with D3.js
2. Selections and Data Binding
3. Creating Visuals with SVG
4. Creating a Bar Graph
5. Using Data and Scales
6. Creating Scatter and Bubble Plots
7. Creating Animated Visuals
8. Adding User Interactivity
9. Complex Shapes Using Paths
10. Using Layouts to Visualize Series and Hierarchical Data
11. Visualizing Information Networks
12. Creating Maps with GeoJSON and TopoJSON
13. Combining D3.js and AngularJS

3. Module 3
1. Data Visualization
2. Reusable Charts
3. Creating Visualizations without SVG
4. Creating a Color Picker with D3
5. Creating User Interface Elements
6. Interaction between Charts
7. Creating a Charting Package
8. Data-driven Applications
9. Creating a Dashboard
10. Creating Maps
11. Creating Advanced Maps
12. Creating a Real-time Application