Book Image

Mastering D3.js

By : Pablo Navarro Castillo, Pablo Navarro Castillo
Book Image

Mastering D3.js

By: Pablo Navarro Castillo, Pablo Navarro Castillo

Overview of this book

Table of Contents (19 chapters)
Mastering D3.js
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Preface

D3 is an amazing library. On its website, there are hundreds of beautiful examples, visualizations, and charts created mainly with D3. Looking at the examples, we soon realize that D3 allows us to create an uncanny variety of visuals. We can find everything from simple bar charts to interactive maps.

The ability to create almost anything with D3 comes at a price; we must think about our charts at a more abstract level and learn how to bind data elements with elements in our page. This association between properties of our data items and visual attributes of the elements in our chart will allow us to create complex charts and visualizations.

In real-life projects, we will have to integrate components and charts created with D3 with other components and libraries. In most of the examples in this book, we will cover how to integrate D3 with other libraries and tools, creating complete applications that leverage the best of each library.

Through the examples of this book, we will cover reusable charts using external data sources, thereby creating user interface elements and interactive maps with D3. At the end, we will implement an application to visualize topics mentioned on Twitter in real time.

D3 is a great tool to experiment with visuals and data. I hope you will have fun following the examples in this book and creating your own visualizations.

What this book covers

Chapter 1, Data Visualization, provides us with examples of interesting visualization projects and references that help us learn more about data visualization. We also review some examples of historical relevance and discuss what makes D3 a good tool to create data-visualization projects.

Chapter 2, Reusable Charts, focuses on how to create configurable charts that can be used in several projects. In this chapter, we discuss how to use selections to manipulate elements in a web page and use this to create a reusable barcode chart from scratch. We also create a custom layout algorithm and use it to create a radial bar chart.

Chapter 3, Creating Visualizations without SVG, discusses the current state of SVG support in the browser market and provides some strategies to create visualizations that work in browsers that don't have SVG support. We create an animated bubble chart using div elements, learn how to detect whether the browser supports SVG, and use polyfills to render SVG figures using the HTML5 canvas element. We also learn how to create visualizations using D3 and canvas.

Chapter 4, Creating a Color Picker with D3, introduces concepts that allow us to create user interaction elements and controls. In this chapter, we use the D3 drag behavior and the reusable chart pattern to create a slider control. We use this control to create a color picker based on the CIE Lab color model, which is also a reusable chart.

Chapter 5, Creating User Interface Elements, discusses how to use event listeners to highlight elements in a chart. We also discuss how to create tooltips and how to integrate these tooltips with existing charts. We create an area chart and use the brush behavior to select a range in the chart.

Chapter 6, Interaction between Charts, discusses how to use Backbone to create structured web applications, separating data from its visual representation, and how to integrate D3 charts in this architecture. We will learn how to implement models, views, collections, and routes in order to keep a consistent application state. We will use this to create an application to explore the time series of stock prices using the area chart implemented in Chapter 5, Creating User Interface Elements.

Chapter 7, Creating a Charting Package, introduces the development workflow to create a charting package using D3. We introduce tools and best practices to implement, organize, and distribute the package. We will also create a sample project that uses the charting package as an external dependency.

Chapter 8, Data-driven Applications, provides us with an example of a web application and introduces tools to deploy visualization projects. We create an application that uses the World Bank data API to create a visualization of the evolution of indicators of human development. We will learn how to use GitHub pages to host our project and how to host a static website using Amazon S3.

Chapter 9, Creating a Dashboard, introduces concepts and best practices to create dashboards. We implement an example dashboard to monitor the performance of students in a class using D3 and custom charts.

Chapter 10, Creating Maps, discusses how to create vector maps using the geographic functions of D3. We will learn how to obtain geographic data and how to convert it to GeoJSON and TopoJSON formats, which are more suitable to be used with D3. We will create a choropleth map with D3 and use the TopoJSON library to visualize neighbors and boundaries between countries. We will also learn how to create a custom D3 layer to be used with Mapbox.

Chapter 11, Creating Advanced Maps, introduces some geographic projections and discusses how to configure projections to center and scale maps at specific locations. We also use the Orthographic projection to create a rotating globe. We also use a star catalog and the Stereographic projection to create a fullscreen star map. We will also learn how to use canvas to project raster images from Earth using the Orthographic projection.

Chapter 12, Creating a Real-time Application, introduces the concepts and tools that are used to create real-time applications. We will learn how to use Firebase to update the state of our applications in real time. We will also create a real-time application to explore the geographic distribution of geotagged tweets that match user-defined topics using Node, Socket.IO, and D3.

What you need for this book

The code bundle of this book was created using Jekyll, which is a static website generator. To run most of the examples in the code bundle, you will need a static web server and a modern web browser. The following list summarizes the main dependencies:

  • A modern web browser

  • D3 3.4

  • Jekyll or other static web servers

  • Text editor

Some chapters require you to install additional frontend libraries, such as Backbone, TopoJSON, Typeahead, and Bootstrap. Additional instructions on installing these libraries can be found in the corresponding chapters. In other chapters, we will use additional software to compile assets or process files. In those cases, installing the software is optional (the compiled files will be present as well), but it might be useful for you to install them for your own projects:

  • Node and Node packages

  • Git

  • Make

  • TopoJSON

  • GDAL

Instructions to install these applications can also be found in the corresponding chapters.

Who this book is for

This book is for frontend programmers who want to learn how to create charts, visualizations, and interactive maps with D3. We will cover everything from creating basic charts to complex real-time applications, integrating other libraries and components to create real-life applications.

We assume that you know the fundamentals of HTML, CSS, and JavaScript, but we review the main concepts as needed.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows:

"In the example file, we have a div element classed as chart-example and with the ID chart."

A block of code is set as follows:

divItems.enter()
    .append('div')
    .attr('class', 'data-item');

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

chart.onClick = function(d) {
    // ...

    // Invoke the user callback.
    onColorChange(color);
};

Any command-line input or output is written as follows:

$ grunt vows
Running "vows:all" (vows) task
(additional output not shown)
Done, without errors.

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text as follows:

"By clicking on Create a Project, we can access the map editor, where we can customize the colors of land, buildings, and other features; select the base layer (street, terrain, or satellite) and select the primary language for the features and locations in the map."

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to , and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Downloading the color images of this book

We also provide you a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from: https://www.packtpub.com/sites/default/files/downloads/6270OS_Graphics.pdf.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at if you are having a problem with any aspect of the book, and we will do our best to address it.