Introduction to Data Visualization with D3
Close
    • 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