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)

Time


You don't understand time. You might think you do, but you don't.

Keep this in mind next time you want to add 3,600 seconds to a timestamp to advance it by an hour, or basically now+24*3600 is tomorrow.

Time is a complicated beast. An hour can last 3600 seconds or 3599 seconds, if there's a leap second. Tomorrow can be 23 to 25 hours away, months range from 28 to 31 days, and a year can be 365 or 366 days. Some decades have fewer days than others.

Considering many datasets are closely tied to time, this can become a big problem. Just how do you handle time?

Luckily, d3.js comes with a bunch of time-handling features.

Formatting

You can create a new formatter by giving d3.time.format() a format string. You can then use it for parsing strings into Date objects and vice-versa.

The whole language is explained in the documentation of d3.js, but let's look at a few examples:

> format = d3.time.format('%Y-%m-%d')
> format.parse('2012-02-19')
Sun Feb 19 2012 00:00:00 GMT+0100 (CET)

We defined...