Top Tip for learning D3.js

WP 20 PostsI’m probably just a little slow on the update but it took me a long time (too long) to realize this key point –

To get productive with D3.js quickly, invest your time in coercing your data to match that of the examples. As opposed to coercing the example code to work with your data format.

Coercing your data requires use of tools you’re already familiar with (Excel, SQL, Shell Script  whatever). Staying in your comfort zone here will help (quickly) get something pretty into your DOM, which you can then hack on.

The alternative will have you pouring over lots of code and API documentation. The wonderful example code is often quite sophisticated and inaccessible to JavaScript novices and the API documentation is comprehensive but dense and somewhat terse.

While this effort is educational, it can be frustrating to get something working (and subsequently demotivating). When you’re starting out, quick and easy wins help enormously. Much motivation can come from these early dopamine responses (Ooh bar chart! Woot! Woot!).

Hence examples like this, this and this to expose D3 friendly data.

Again, focus your time on getting your data to match the examples rather than changing the examples to handle your data.

Oh, and buy Scott Murray’s, “Interactive Data Visualization” published by O’Reilly Media.

Hopefully this will help open up D3 for you more quickly than it did for me.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s