Name: Introduction to Data Visualization with D3
Rating: 4.3 (10 reviews)
Author: Shaumik Daityari

Whether you're a developer, product manager or marketer: Making decisions are a lot easier when you can visualise data clearly. With a little working knowledge of HTML, CSS and JavaScript, we'll take you through data sources, building charts, utilising SVGs and more to get you working with D3 in a couple of hours.

Introduction to Data Visualization with D3

JavaScript makes your pages dance, move and interact. For a front-end developer, it’s a fundamental skill.

JavaScript

Preface

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 !

Introducing Data Visualization and D3

In the first chapter, we looked at the emergence of data collection and the importance of visualizations in explaining data trends. This chapter will focus on fetching data through D3 before creating eye-pleasing visuals.

Popular Data Sources for D3

In the last chapter, we explored various data options to use in D3—data declared inline, data stored in files, and real-time data. Your patience has paid off: we’re now going to create a simple horizontal bar chart using D3!

Building a Bar Chart in D3

In the last chapter, we created our first bar chart using D3. It was a simple chart with labels, and it was created by manipulating div elements in the DOM. Now, let’s take a look at the SVG element.

Introduction to the SVG Element

In the last Chapter, we implemented a horizontal bar chart using D3. In this chapter, we’ll look at dimple , a library built on top of D3 to simplify the learning curve for beginners.

Introduction to dimple

We’ve created basic charts in D3 using the div element, looked at SVG elements, and created charts with dimple. Let’s create a pie chart in D3.

Building Pie Charts in D3

So far, the various types of charts we’ve created involve the visualization of only one variable. Let’s create charts that involve multiple variables. We’ll first look at line charts, and then move on to scatter plots.

Multivariate Data Visualizations in D3

In earlier examples, we created standalone code to achieve a particular objective—to load data and generate a visual. This chapter will focus on creating code that you can reuse.

Reusing Code in D3

In the previous chapters, we covered basic charting with D3 and dimple, and looked at a few advanced features. In this chapter, the task is to enable us to share our code through various platforms. We’ll focus on platforms where your graph will be rendered in real time before displaying to the audience.

Collaboration with D3

In this book, we’ve covered basic techniques for creating visualizations in D3. However, we’ve only scratched the surface and there’s a lot more to master. This last chapter will give you a direction to focus on if you want to continue your learning.

Introduction to Data Visualization with D3

Details

Description

Creator

Shaumik Daityari

Content

Reviews

Frequently Asked Questions

Introduction to Data Visualization with D3