Visualizing Human Cost with a Large d3 Scrolling Bar Chart and Scrolling Effects

A few years ago, while I was working at TWO-N in New York, we entered a data visualization contest.  The prompt for the contest was to examine economic values for slaves and soldiers in historical contexts spanning from antiquity to the colonial era (already converted to 2014 US dollars), and compare them to modern day examples of human trafficking and enslavement.  Conceptually, it was a very strange and provocative task.  Nonetheless, it was an enjoyable project that let me explore some scrolling effects and the element of a large horizontal scroll space to represent the flow of time over thousands of years.

The finished version is at https://s3-us-west-1.amazonaws.com/sheppard-portfolio/human-cost/index.html, with the code at https://github.com/ragingsquirrel3/stellar_scroll_example.  In the end, we didn’t win the contest, but got an honorable mention from the judges.

Screen Shot 2016-03-12 at 2.56.50 PM.png

Scrolling Carousel Heatmap for Genetic Variants with d3 and React

A few months ago, I mentioned that I was working on a project at Stanford for viewing genetic variants in yeast using d3 and react.  I promised to provide more detail, so here is the finished version http://www.yeastgenome.org/variant-viewer.  In addition to the scrolling  heatmap, I also implemented an interactive dendrogram to show the clustering between the genomes on selected regions of their respective genomes.  Additionally, I ran the clustering analysis in the browser on a web worker using the awesomely named clusterfck  library from https://github.com/harthur/clusterfck.

Here is our group’s publication at http://www.ncbi.nlm.nih.gov/pubmed/26578556 describing it in more detail.

In an interesting side note to this chapter of my life, I noticed the author of the aforementioned clusterfck library (Heather Arthur) also wrote a JavaScript implementation of cat face detection (https://github.com/harthur/kittydar).

Screen Shot 2016-03-12 at 2.58.56 PM.png