See the full animation here

This viz was my team's submission for Forrester's 9th Data Visualization Hackathon.

The theme of this hackathon was "a day in the life at Forrester."  Teams were free to use any data source and design that they thought would capture what a day (or days) at Forrester is like.

We chose to scrape data from Chatter, which is a Salesforce version of intra-company Facebook or Twitter feed.  We have a specific Chatter "group" designated specifically for Data Viz, so we chose to pull the data from this group and visualize the interactions between contributors.

The viz was built using code from bl.ocks.org, the force-directed graph in particular.  My role was to help design and edit the structure of the page, such that it had an aesthetic that matched Forrester's branding as much as possible.  I also implemented and customized the feed on the right to roll in as the graph constructed itself.  

Tools: HTML, CSS, Javascript, D3.js, JQuery

See the full site here

This viz was my team's submission for Forrester's 10th Data Visualization Hackathon.

The task for this hackathon was to create a tool or a visualization for Forrester's vast report taxonomy.  The complicated and multi-piece data set included all of the tags Forrester currently uses, report details, as well as data on search terms.

We chose to build a product that included a bit of search tool functionality, as well as a fun visualization, as it is a data viz hackathon in the first place.

The site starts with a welcome page. The first tab is intended for sales employees to quickly search for reports by tags or partial tags.  The search produces a list of report names that link to the reports themselves.

The second tab is where we chose create a visual.  I chose an "adjacency matrix", inspired by Mike Bostock's visualization of co-occurring characters in Les Miserables.  In my visual, users can see the co-occurrence of any 2 tags in reports. 

The last tab is a visualization of the increase and decrease in top search terms over the past year.  I liked the central axis with negative naturally on the left and positive on the right for this challenge.  This was a last minute add so it could use some aesthetic touches in the future.

My role in this project was to build the tools.  Due to some re-shuffling of teams and team members, I ended up being the only developer, so I constructed the full site.

Tools: HTML, CSS, Bootstrap, Javascript, D3.js, JQuery, Adobe Illustrator

See the viz here

This was a personal side project built with a data set that our team often gives to potential job candidates for their interview skills presentation. 

The data is about usage of devices in different places and situations and includes some demographic information such as gender.

I pulled example code from bl.ocks.org and retrofitted it with my data set and Forrester colors.  The original viz was built to show users paths through a website from the homepage.  My favorite part about this visual is the "bread crumbs" trail that builds in on the top left.

This visual isn't the most appropriate for the data set, as the some of the categories are not mutually exclusive.  However, it was a fun and challenging project that made be a bit more familiar with the radial and tree map type visuals that can be made with D3.js.

Tools: HTML, CSS, Bootstrap, D3.js, JQuery

See the full site here

This was a personal project (a few years in the making!)

As an avid hiker, I'm always looking for good sources of information to prepare for my trips.  Unfortunately, there aren't very many reliable places online to get all the the information you need to plan your hike.  The website www.4000footers.com is the only exception.  However, it's hard to navigate, has barely any interactivity that would help me find what I need, and it doesn't look very modern.

I've always wanted to create my own, more effective version of this site.  As my front-end skills started to improve, I realized that this would be the perfect project.  I started by constructing a table of all the 4,000 Footers that is sortable and searchable by basic stats, but that also links to more detailed information.

I also wanted to see all of the Footers on a map, so that I could tell which ones could potentially be hiked together or in the same weekend.  I added these features as well as a new Bootstrap layout design. 

Tools: HTML, CSS, Bootstrap, Javascript, JQuery, Google Maps API

Messing around with building multiple D3 charts in one canvas

Link