Closing thoughts

A short discussion on code maintainability.


Congratulations on making it to the end of the D3 course! This was our longest course yet, but I think it speaks to the complexity and the power of D3.

We started off by making a simple bar chart and what we ended up with was a powerful, reusable, animated, responsive bar chart component, that felt like a first-class citizen in our Ember app. It has a minimal API that's easy for other developers to use, and anyone who knows D3 can open up this component, understand what's going on, and extend it with new functionality.

I've come across lots of different libraries that try to build abstractions on top of D3, and I think there's some good ideas here; but in this series, I wanted to stay focused on a solution that would work with vanilla D3. I think D3 is designed to be the lowest possible level of code to work with when designing and building visualizations for the web, and so I wanted to make sure the solution we ended up with didn't limit any of that power.

There's something to be said for the code that powers your visualizations to actually look like D3 code, and with the massive D3 community and scores of examples out there, this approach will never limit your flexibility.

Now, I have worked on codebases where the D3 code can kind of get a little bit unwieldy, and even in this series we saw that bar chart component getting a little bit large towards the end. I think the best way to tackle this is the same way you'd tackle any other large object in an Ember system - eventually it might make sense to break it out, to split up some of the relevant parts of that renderChart method into other, smaller more easily understandable methods. But still try to stay within the lines of idiosyncratic D3 code, so that others who maintain and extend this will be able to recognize it if they already have a familiarity with D3.

Focus on coding visualizations specific to your application, and only try to generalize or abstract them when the need arises. Other than that, get plugged in with the D3 community, check out some more examples, and have fun coding D3 in Ember!


Send us a tweet:

Or ask us in Inside EmberMap, our private Slack workspace for subscribers.