About Us Icon About Us Icon Business Analyst Icon Business Analyst Icon CEO Icon CEO Icon Datameer Icon Datameer Icon Envelope Icon Envelope Icon Facebook Icon Facebook Icon Google Plus Icon Google Plus Icon Instagram Icon Instagram Icon IT Professional Icon IT Professional Icon Learn Icon Learn Icon Linkedin Icon Linkedin Icon Product Icon Product Icon Partners Icon Partners Icon Search Icon Search Icon Social Networks Icon Social Networks Icon Share Icon Share Icon Support Icon Support Icon Testimonial Icon Testimonial Icon Twitter Icon Twitter Icon

Datameer Blog

Getting Started With D3.JS

By on March 14, 2013

As we shared on our blog a few months ago, our Business Infographic Designer and data visualization tools are powered by D3. js. For those of you interested in learning more, the following is a post full of resources and examples that I originally posted on my personal blog. I welcome any comments or questions here, or on Twitter at @d3visualization and @Datameer

—————

I gave a talk about getting involved with the D3 community at Trulia for the Bay Area D3 User Group, with Scott Murray and short talks by Jérôme Cukier, Santiago OrtizJyri Tuulos, Alex JohnsonAmelia GreenhallMike Travers and Péter Boda. My slides are here and it was recorded on video. I launched my alternative D3 gallery made with D3 and based on a Google Spreadsheet.

Here is the talk in a blog post format. It is mostly a collection of links for getting started with D3 and contributing to this awesome community.

D3.js stands for “Data-Driven Documents”, as you can easily see on the official website and the academic paper.

D3.js Website
D3.js paper

It is a library to bind data to graphics. What does it means? In short: give shape to your data by using some data elements to set some attributes of your graphical elements. The long answer: read “The Grammar of Graphics” by Leland Wilkinson.

The Grammar of Graphics

D3.js is known to have a pretty steep learning curve. In fact, the syntax is very clean, expressive, and fairly easy to learn. But you need to already know Javascript, SVG, the DOM, HTML5 and other web technologies.

DOM
Javascript
CSS
SVG
HTML5
Other web technologies

But it will get you nowhere if you are not interested first in visualization.

Visualization books

D3.js is not a shim to help with cross-browser issues (like in JQuery). It is not a graphical abstraction like Raphael or Dojox.GFX. It is not a chart library like Highcharts, even if nice chart packages has been built on top of it.

NVD3
xChart
Dc.js/
Dance.js
Rickshaw

It is a set of helpers (reusable components, helper functions) to help you build visualizations using web technologies.

Where to start learning it? It depends on what’s your favorite way to learn.

Books
Murray
Dewar

Tutorials
Video
Slides
Others

Blogs
Mike Bostock
Jim Vallandingham
DashingD3Js

Personally, I prefer to look at the source code or read examples.

API on the Wiki
Example Gallery

That’s probably why I launched an alternative gallery, giving you more freedom to filter and explore more than a thousand examples.

Alternative Gallery

You can contribute to this gallery by asking for administrative rights on the spreadsheet used as a database (or by sending me a tweet at @d3visualization).

Alternative gallery spreadsheet

You can contribute to the D3 community in many ways.

Show your examples
Official Gallery

Share Code
Gist
bl.ocks (RSS)
Tributary
JsFiddle
Plunker

Submit
Bug report
Pull Request
Plugins

If you need help, we are never far away.

Google Groups
StackOverflow
IRC: #d3js

BTW, If you want to stay up to date with new D3 examples, events and releases, follow my twitter feed exclusively about D3.

@d3visualization

Thanks for being part of this awesome community!

This talk and blog post were made possible by Bay Area D3 User Group and Datameer.


Connect with Datameer

Follow us on Twitter
Connect with us on LinkedIn, Google+ and Facebook


Christophe Viau

Subscribe