Sometimes I like to explore a little. A while back I came across a sweet d3 tree and just had to animate it. It occurred to me that I might be able to use the technique to reproduce the famous Oakland (or better yet Oaklandish) logo with code.

I admit that I never got to where I was going, but what I did was record the journey. I realized that the process I use to go from an idea and an existing code sample to something else might interest some other d3 coders out there. The only problem is that the process was nearly 2 hours of experimentation, and as pretty as I might think my face is, I know thats too long for anyone to sit thru. So here is my experimentation at 170% speed, I sound like a nerdy chipmunk but it may be an entertaining way to think thru some data visualization:

In this process I went from representing a tree structure as a combination of rectangles to a list of paths.

The motivation to getting paths rendering was to get smooth interpolation. My early attempts were thwarted because I didn’t quite understand the data structure as it was:

When I realized it was the path stringing together the leaf nodes I had to rethink how I was constructing the branches. I figured out how to walk down from the leaves recursively to create an array for each branch that could be rendered with a path:

I left it here: http://tributary.io/inlet/4b0a56692447fa75d8a1

I realized I wanted to have some manual control over which leaves get used, but I also need to remove some redundant ones. There’s always next weekend!