Intro

In this series we're going to be adding some interactive data visualizations to an existing Ember app using D3.js.

If you've never heard of D3 before, it's a powerful library that lets you create data visualizations using technology based on web standards — so JavaScript, HTML and CSS. D3 is a set of low-level tools and doesn't come with anything like a bar chart or pie chart out of the box.

In this series we'll code an animated bar chart visualization from scratch. We'll start with a simple chart; learn how to work with scales and color in D3; see how to make Ember addons play nicely alongside our D3 visualizations; apply the data down actions up (DDAU) pattern to our bar chart component, so that it can affect data elsewhere in our application; and learn how to add animated transitions to the state changes of our visualization.

In these videos we will cover some D3 basics, but the focus will be on integrating our D3 code with Ember. If you just need to add a simple chart to your app as fast as possible, you might be better off using an existing charting library. There's lots of good addons that exist and provide really nice integrations with Ember, and there's even an entire Charts section over on Ember Observer.com.

Now, I have a good amount of experience using both charting libraries and hand-written D3 code, and while your specific needs should impact your decision, I've personally always run into limitations when trying to use existing charting libraries. There's always some configuration option that's not exposed or some feature that doesn't exist; and when you run into those walls you end up hacking in a solution to meet your application's needs.

The great thing about writing raw D3 code is its flexibility - you can basically make it do whatever you want. And I find that since applications tend to have pretty specific needs regarding their data visualizations, never running into those walls turns out to be a pretty big benefit.

The more important visualizations are to your application and the longer you expect them to exist and grow within your codebase, the more it makes sense to invest in writing your own D3 code, and making it a first-class citizen within your application.

So, if you're ready to learn some D3 and code some visualizations in an Ember app, let's get started!