Dominating D3

My world-rockin’ bar chart not only has dynamic labels and dynamic color-coding but all of the dimensions and locations are driven by math and the data array:

  • Width and height of the bars
  • Location of the bars
  • Color of the bars
  • Location of the labels: X & Y, plus centered in each bar
  • Text content of the labels

Dynamic, code and data-driven graph showing bodycount in the Friday the 13th franchise.

Look at the precision of those numbers!

Code used for the bodycount bar chart.

I’m really not pleased with the Ubuntu Screenshot app.

I’m especially pleased, however, with how correct my instincts in the past have been about using calculations to determine stuff dynamically. Before I really began learning programming, I thought having complex statements like “take this number and multiply it by the width of the SVG divided by the length of the dataset plus the width of the SVG divided by the length of the dataset then divide all that by two” was too long and sloppy. I thought there was some more elegant way to do it but, apparently, that’s actually how it’s done. It makes me love programming even more.

I love that it’s dynamic and I love that I made all with code.

Tip o’ the hat to Scott Murray‘s Interactive Data Visualization.

Advertisements

About jotascript

Aiming to please. Seeking to impress.
This entry was posted in D3, Data Visualization. Bookmark the permalink.

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