back

Messing Around with D3

I'm using some of my shelter in place free time to learn D3 and create some toy visualizations.

Bubble Chart (?)

I'm not sure what this chart would be called, but something like this could be used for visualizing a single variable.

Volume Calendar

My take on a nice Strava visualization that shows how much you ran/biked/swam on given days over the past month, along with a weekly aggregation. The original version displays the calendar day on hover, which I think could be easy to confuse with distance ran on that day.

Sunburst Chart

This chart (in conjunction with some informative text/tooltips) could be used to visualize data that breaks up into two sets of hierarchical categories.

Edit Distance

I thought it would be cool to visualize the shortest edit distance between two words with the below animation. However, it isn't completely correct - the key function I'm providing to .data() is just the letter itself, which means that repeat letters aren't keyed properly. To solve this I'd have to write a more sophisticated key function.

Type a new word or phrase and hit "Update".

Tech Viz

A cool way of displaying technologies I've worked with, with the detail that a technology can be in multiple categories.

Code for all the above is here.