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)

Interacting with the user


Great visualizations don't just stop at pretty pictures and animations! They give users the power to play with data and figure things out on their own. That's what we'll look into next.

You don't know it yet, but you already know how to let users interact with visualizations.

Basic interaction

Much like with other UI libraries, the principle for interaction is simple—attach an event listener to an element and do something when it's triggered. We add and remove listeners to and from selections with the .on() method, an event type (for instance, click), and a listener function that is executed when the event is triggered.

We can set a capture flag, which ensures our listener is called first and all other listeners wait for our listener to finish. Events bubbling up from children elements will not trigger our listener.

You can rely on the fact there will only ever be a single listener for a particular event on an element because old listeners for the same event are removed...