Book Image

Data Visualization with d3.js

By : Swizec Teller
Book Image

Data Visualization with d3.js

By: Swizec Teller

Overview of this book

<p>d3.js. provides a platform that help you create your own beautiful visualization and bring data to life using HTML, SVG and CSS. It emphasis on web standards that will fully utilize the capabilities of your web browser.</p> <p>Data Visualization with d3.js walks you through 20 examples in great detail. You can finally stop struggling to piece together examples you've found online. With this book in hand, you will learn enough of the core concepts to conceive of and build your own visualizations from scratch.</p> <p>The book begins with the basics of putting lines on the screen, and builds on this foundation all the way to creating interactive animated visualizations using d3.js layouts.</p> <p>You will learn how to use d3.js to manipulate vector graphics with SVG, layout with HTML, and styling with CSS. You'll take a look at the basics of functional programming and using data structures effectively – everything from handling time to doing geographic projections. The book will also help make your visualizations interactive and teach you how automated layouts really work.</p> <p>Data Visualization with d3.js will unveil the mystery behind all those beautiful examples you've been admiring.</p>
Table of Contents (13 chapters)

Loading data


One of the greatest features of d3.js is that it can asynchronously load external data without any help from third-party libraries or a programmer. We've already glanced at data loading, but it's time to take a closer look.

The reason we want to load data externally is that bootstrapping large datasets into the page with predefined variables isn't very practical. Loading hundreds of kilobytes of data takes a while and doing so asynchronously lets the rest of the page render in the meantime.

To make HTTP requests, d3.js uses XMLHttpRequests (XHR for short). This limits us to a single domain because of the browser's security model, but we can do cross-domain requests if the server sends an Access-Control-Allow-Origin: * header.

The core

At the core of all this loading, is the humble d3.xhr(), the manual way of issuing an XHR request.

It takes a URL and an optional callback. If present, the callback will immediately trigger the request and receives data as an argument once the request...