Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Mastering D3.js

By : Pablo NAVARRO CASTILLO

3.7 (7)

Mastering D3.js

3.7 (7)

By: Pablo NAVARRO CASTILLO

Overview of this book

If you are a software developer working with data visualizations and want to build complex data visualizations, this book is for you. Basic knowledge of D3 framework is expected. With real-world examples, you will learn how to structure your applications to create enterprise-level charts and interactive dashboards.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Data Visualization

1. Data Visualization

Defining data visualization

Introducing the D3 library

Summary

2. Reusable Charts

2. Reusable Charts

Creating reusable charts

Using the barcode chart

Creating a layout algorithm

Summary

3. Creating Visualizations without SVG

3. Creating Visualizations without SVG

SVG support in the browser market

Visualizations without SVG

Polyfilling

Using canvas and D3

Summary

4. Creating a Color Picker with D3

4. Creating a Color Picker with D3

Creating a slider control

Creating a color picker

Summary

5. Creating User Interface Elements

5. Creating User Interface Elements

Highlighting chart elements

Creating tooltips

Selecting a range with brushing

Summary

6. Interaction between Charts

6. Interaction between Charts

Learning the basics of Backbone

The stock explorer application

Summary

7. Creating a Charting Package

7. Creating a Charting Package

The development workflow

Creating the package contents

The project setup

Using the package in other projects

Summary

8. Data-driven Applications

8. Data-driven Applications

Creating the application

Hosting the visualization with GitHub Pages

Hosting the visualization in Amazon S3

Summary

9. Creating a Dashboard

9. Creating a Dashboard

Defining a dashboard

Good practices in dashboard design

Making a dashboard

Summary

10. Creating Maps

10. Creating Maps

Obtaining geographic data

Creating maps with D3

Summary

11. Creating Advanced Maps

11. Creating Advanced Maps

Using cartographic projections

Creating a rotating globe

Creating an interactive star map

Projecting raster images with D3

Summary

12. Creating a Real-time Application

12. Creating a Real-time Application

Collaborating in real time with Firebase

Creating a Twitter explorer application

Creating the streaming server

Creating the client application

Summary

Index

Index

Highlighting chart elements

We will create a simple chart depicting a series of circles that represent fruits and the number of calories we can get from 100 grams of each fruit. To make things easier, we have created a JSON file with information about the fruits. The file structure is as follows:

{
  "name": "Fruits",
  "data": [
    {
      "name": "Apple",
      "description": "The apple is the pomaceous fruit..."
      "amount_grams": 100,
      "calories": 52,
      "color": "#FF5149"
    },
    ...
  ]
}

We will represent each fruit with a circle and arrange them horizontally. We will map the area of the circle to the calories by serving, coloring them with the color indicated in the data item. As usual, we will use the reusable chart pattern, creating a closure function with the chart attributes and a charting function that contains the rendering logic, as shown in the following...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Mastering D3.js

Search

Your notes and bookmarks