Inspiration

Mostly this weather data visualization. Actually I think it's on Github, why didn't I just fork it???????

What it does

The idea is that you pick a team from the dropdown, and the web app queries MLB's boxscore history. Each line is one season for that team, and each square in that line represents one game from that season. The squares are colored on a red->blue gradient -- dark red means the team got beat by a lot, dark blue means the team won by a lot, and the lighter shades in between suggest closer games.

UNFORTUNATELY I can only get 2015 to work, and the entire thing breaks when I try to add multiple years. OH WELL.

How I built it

When you pick a team, the app makes so, so many JSON calls for every dang day of the season to get the team's result for that day. (Sorry, MLB.com servers!) If there's an API that will return a given team's results for an entire season in one API call, plz let me know.

The grid of squares and the squares' colors are generated using D3.js.

Challenges I ran into

So the thing is loops on loops. Looping through 31 days a month is fine, looping through the 8 or whatever months of the season is fine, but looping through multiple years, even two... that's when the whole thing stops working! Something about adding those extra games to the array of results makes it all go kaput. So you're only seeing 2015.

Accomplishments that I'm proud of

It looks kind of cool? But would look cooler with more than one line I'd say!

What I learned

That D3 is a headache and a half? JK I already knew that.

What's next for mlbteamhistoryheatmap

Making it actually work lol ¯_(ツ)_/¯

Share this project:
×

Updates