Special page for Lime
product design | data visualization
Hello Lime! Thanks for spending a few minutes looking at my work.
I decided to put together a custom page for you with different projects that directly tie to the open role. I truly hope you enjoy it.
BIke sharing Analytics visualization
Hubway analytics
As one of the first projects that introduced me to more advanced visualization techniques, this site was created as part of my Technologies II class at Northeastern University back in 2017. It takes open data from Boston's (former) Hubway bike sharing service (now Blue Bikes Boston), detailing daily trips between stations performed by members and casual users. The visualization explores patterns of use between pairs of stations as well as the duration of every trip. The project was created using d3.js and canvas.
Interaction
Every trip is represented as an arc in a 12-hour "clock". The start and end points of the arc represent the times when a user started and finished using a bike respectively. The interface on top allows to filter between morning and evening trips, as well as between a pair of stations. If no end station is selected, the visualization will show all trips originating from the start station, and vice versa.
Early sketch
Early sketch
Ideating how to implement in D3.js
The original mockups were created in Sketch (I am now a proficient Figma user) and featured a more conventional linear layout and an arc diagram at the bottom. These were later combined into a single graphic during the development phase.
Exploring publications
a visualization for discovery
As part of Flatiron Health’s efforts to showcase the high quality research we support and to help potential customers discover the types of research they could conduct with Flatiron’s data, I created a visualization where every dot is a publication.
The colors indicate the stage of the disease discussed in the publication, where red is for advanced stage, green for early stage, and purple for unspecified cases.
This visualization was built using a Force-directed graph layout for collision simulation from D3.js, and is hosted in ObservableHQ.
Play with it!
Click the replay button to see the particles animate
Check on/off types of cancer to reduce the list
Click on a dot to see more information. A link will take you to the published article
Exploring derived data from location-based events
Who got infected and where?
As a consultant at the Bedford Lab from the Fred Hutch Research Center I was tasked with creating visualizations to explore metadata derived from location-based events.
This visualization explores the number of flu-like cases in the Seattle area. Users can explore the data by:
Sex
Sampling location
The disease they tested positive for
Whether they had the flu shot or not
Since all the data is geo-referenced, it can also be summarized by:
Neighborhood
CRAs (Community Reporting Areas)
Or census tracts
infections calendar
The WHO, as well as the CDC and other public health organizations have standardized case reporting using “epidemiological weeks”. This is why when you hover over each colored box you’ll see something like “2019-W04”, or the 4th week of the year 2019.
Time conversions are notoriously tricky but I was able to aggregate and parse the dates of the cases by epidemiological week to display them in a format that fit the mental model of the user.
This is a highly effective heatmap visualization that quickly surfaces the peak time of cases.