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

Viewing Genetic Variation in a Large, Carousel d3 Heatmap

I’ve been working on a d3 tool to visualize genomic and proteomic variation in strains of laboratory yeast.  After v2, I’m working on some improvements to the UI, plus some interesting computational work being done in JavaScript.  You can see the current version at http://www.yeastgenome.org/variant-viewer.

Once I make some more progress, I plan on making some separate npm modules from a few of the UI elements.  I’ll update here with progress.  I’m also planning on publishing my results.

On Inspiration and “Milk and Coffee Good”

A few weeks ago, I went to EYEO Festival in Minneapolis and was completely blown away by the sheer quality of the work I saw.  Incredibly talented by people are just making good things.  One of the speakers, Reza Ali, had a memorably little video which stuck with me.

http://www.pikore.com/m/1020427956316399833_10941913

He mentioned how he sometimes mixes milk into his iced coffee and gets mesmerized by the shapes and patterns formed by fluid dynamics.

He went on to say how little, unsuspected moments of beauty in everyday objects have an impact on his work.  Now, I want to carry that same spirit of inspiration into my own work.  I want to make things that are “milk and coffee good.” #milkandcoffee

Dummy Nodes in d3 Sunburst Charts

I recently started working at Stanford, and have gotten the opportunity to look at lots of interesting data.  Thanks to the awesome example at http://bl.ocks.org/mbostock/4348373, I started implementing the zoomable sunburst partition layout.  Eventually, I ran into a problem.  Very large numbers were being drawn to the total value of their children, even when that sum was a small fraction of the total (due to a large numbers of “others,” which were not included in the dataset).

I wanted all the nodes to render to their own scaled value, and allow the children to only take a portion of their parents’ sizes.  After reading about the problem at https://github.com/mbostock/d3/pull/574, I went about implementing the “dummy node” solution.  I’ll post my solution, shortly.

QuackyCharts now drawing line graphs.

A few months ago, I released a gem called quacky-charts, which could be used to draw pie charts in Rails apps.  Last night, I added a feature which allows you to draw line graphs.  The graphs are still pretty ugly, but the basic features are in place.  Improving their appearance should be pretty easy from here.  More importantly, I made a site for documentation.  Check it out at http://www.quacky-charts.com/.

StreetCred working example… kinda

After fiddling with StreetCred (a gem to handle Facebook credit integration) for a few weeks, I have a basic version available, as well as a working example at https://github.com/ragingsquirrel3/feed_the_giraffe, with some disclaimers.

Right now, the callback response is static.  The next feature I will need to add is the ability to specify product information.  For now, however, the example will stand as a proof of concept.

Revisiting streetcred

A few months ago I posted about the difficulties integrating Facebook credits with Rails applications, and suggested that a gem could potentially be used to simplify the callback action.  Right now, I am working on just that!  I’m working on this gem, which I call streetcred (at https://github.com/ragingsquirrel3/streetcred).  My goal for this project is to create a simple ‘handler’ object which can be initialized in the callback action.  This handler, out of the box, will correctly respond to multiple requests from the Facebook Credits Dialogue with simple Lorem Ipsum type content.  This content will be easily configurable.  

So far, it’s just some specs and basic gemspec stuff.  We’ll see how it goes…