Data Visualization Components Showcase

This page is designed to show off some data-visualization components I have built.

Meteor Strikes Plotted Onto World Map With Animations

I did a full writeup on this component here. There are a couple of visual discrepancies (mostly viewBox-scaling-related) to fix to make this component truly reusable at different sizes and on different pages.

Stardew Valley Crop Profits

Data from the forums.

I wanted a fun dataset to show off different presentation techniques, so I chose to illustrate the profits from various Stardew Valley crops, filtered by season.

I am not affiliated with Stardew Valley in any way; I am just a fan.

This component makes use of D3's data processing functions for grouping and filtering data. It is meant to show off bar graphs, filtering and transitions, as well as showcase my ability to design and consume endpoints.

I chose to create an endpoint that reads a file off of my server, rather than creating a database table.

Thought Process/Considerations/Improvements

There is a risk of data distortion based on season because the y-axis range is different among the seasons. I am debating whether to refine the design to keep the y-axis based on the max value of the whole dataset instead of the season. The tradeoff there is a graph that presents nicely versus the risk of some crops looking more profitable because the scale has changed.

One potential issue with the way that I have approached this graph is the handling of negative numbers and very large numbers. For example: In the fall, there is one crop that has a profit of 9000 versus many others that have a profit of less than 100, and that makes the graph scale in an unattractive way. In the future I will explore using scaleBand. It may be too visually confusing, but would also make the scaling nicer.

• Use Scaleband to make large jumps in data to make large differences in value fit better
• Cosmetic updates such as adding a sprite from the game to each bar, using nicer colors, etc
• Labels that show the exact amount on hover

Embassy Data Visualization for the State Department/Museum of Diplomacy

This components was originally written for a hackathon project, for which my team took second place. The code has since been provided to subsequent hackathon participants as a starting point for similar visualizations.

Later, I adapted the hackathon code into a Wordpress plugin for the International Museum of Diplomacy. You can see a rough outline of the project at the prototype page. The finished project featured nicer colors, a running tally display of the precise year on the timeline for ease of control, descriptive tooltips (using the same technique as the meteor visualizaton), and much more attractive dots with gradient-to-transparent edges, as well as informational text about the different between a legation and an embassy. The page on the Museum of Diplomacy website is no longer publically vieweable.