Introduction to Data Visualization with D3
Introduction to Data Visualization with D3
Notice of Rights
Notice of Liability
Trademark Notice
About the Author
About SitePoint
Conventions Used
Declare the Data Inline
Data Stored as Flat Files
Real-time Data
Next Time
Defining the Dataset
Adding the Header
Adding Bars Based on Data
Adding a Label to Each Bar
Next Up
What is SVG?
SVG with D3
Next Up
Defining the Dataset
Using SVG Graphics for dimple
Declaring the SVG Element
Creating Axes
Adding Data and Rendering the Chart
Next Up
Defining the SVG Element
Associating Data with the Pie Chart, and Creating Arcs
Adding Text Labels
Next Up
Line Charts in D3
Scatter Plot in D3
What Constitutes Reusable Charts in D3?
A Skeleton for Reusable Charts
Reusable Charts with dimple
Next Up
HTML5/CSS/JavaScript Playgrounds
Observable: JavaScript Notebooks
GitHub Gists and Bl.ocks.org
Next Up
The Future of D3
Back to Our Introduction
Don’t Overdo It!
Further Reading on D3
Final Thoughts

Get the full version of this book with a FREE Sitepoint Account

Start Free Trial

Introducing Data Visualization and D3

Hi there! My name is Shaumik Daityari, and I’ll be your instructor. I’m a business analyst by day and a comic book enthusiast by night. For over four years, I’ve been authoring articles, books and even a book on SitePoint. In this book, I’ll teach you how to create data visualizations using JavaScript. Fasten your seatbelts— it’s going to be a bumpy ride!

Every second, netizens generate a tremendous amount of data, such as shopping habits, location, and browsing history. The data collected is analyzed and insights are drawn, which drives new businesses.

While the data analysis is fueled by machine learning and artificial intelligence, a unique requirement has quietly emerged in recent times—the ability to tell the story behind an analytical exercise. This has led to the emergence of a variety of graphing tools. Data is only as good as its presentation. Visualizations can, therefore, greatly simplify complex data and explain insights.

With the inevitable use of data analytics in web and mobile applications, there’s an increasing demand to effectively communicate results through crisp visuals. The ability to create data visualizations makes a developer stand out from the rest in the job market.

Example of a radar chart

This book follows the journey of a beginner learning the most popular tool, D3.js, a JavaScript library for visualizing data. D3 enables you to bring data to life—getting data from various sources, manipulating it to suit your needs, adding interactivity and embedding it in a web page. We chose D3 because it’s over seven years old, and has a strong community that provides support. Recent versions of D3 have become easier to learn for beginners with rudimentary knowledge of JavaScript and no prior experience of charting tools.

An example of a sunburst chart

As with most technologies, the reckless use of commonly available charting tools can lead to very confusing graphical representations of data. This book will tackle what one should keep in mind when preparing visualizations for an audience.

In the next chapter, we’ll look at possible data sources before we begin the process of data visualization. We’ll start with static data in the form of flat files, and move on to more complex sources like databases on the cloud and other real-time data.

Community Questions