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.

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:

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:

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

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.

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."

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 <[email protected]>, 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.

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.