BearPanther.com

There are many d3 demos like this but this one is mine

Introduction

user

bear


LATEST POSTS

Using jsformat with Sublime Text 26th July, 2014

CSS font property shorthand does what? 03rd June, 2014

Blog

There are many d3 demos like this but this one is mine

Posted on .

I’ve tinkered with d3 off and on for a while and it’s almost always refreshing and satisfying. So much of the usual heavy lifting of visualizing some dataset is done for you (when you know where to look). Scales are helpful, transitions are fantastic and building a chunk of DOM from a dataset is relatively painless.

My most recent excursion into d3-land started when I came across a list of the brightest dog breeds on wikipedia. I’d also recently scraped some dog breed data from the AKC site. After a little hand jamming and searching for CC photos on flickr, I had my dataset.

The first run at this simply lined up the dogs in order of intelligence. That was alright, but I wasn’t satisfied and it horizontal scrolling on a small screen isn’t fun.

For round two, I decided to show the list vertically and added some simple sorting. I liked that, but to me, the sorting fell short. It’s not easy to immediately see which breed is heaviest or lightest, tallest or shortest when sorting by weight or height, respectively.

After adding what felt like a ton of code, I was happy with sorting. Now, when height or weight is clicked, not only do the dog pictures slide horizontally, they (and their labels) also re-order vertically so it’s crystal clear which breed is the heaviest and it’s even easier to see what the third heaviest breed is. And I think it looks cool too. Try it!

Update: revised list of rankings using the same code.

Also forgot to add in the initial post that you can click/touch a dog to get specific dog info.

There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (0) ...