7. Creating a Charting Package | Mastering D3.js

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

Summary

In this chapter, we created a simple charting package with two components, a layout and a heat map chart. We also discussed the workflow and tasks related to the creation and distribution of a frontend package. We used Grunt with some plugins to concatenate, check the code for errors, test, and minify the assets. We used Vows to create test suites, and Bower to make our package easily installable in third-party frontend projects.

We created a small project with a single web page, which includes the charting package as an external dependency, and used it to visualize the average wind speed by hour and month as a heat map.

In the next chapter, we will learn how to create a data-driven application using third-party data and how to host the application using GitHub pages and Jekyll.

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