Who needs SVG when you’ve got ANSI?

Presidential election years are great times to work at a news organization. As a designer at a newspaper, I love to explore the cool election maps developed by folks at places like the New York Times or the Guardian.

FiveThirtyEight's Election Forecast map

My favorite is probably the 2016 Election Forecast from FiveThirtyEight.com, which is full of cool visualizations, and great analysis.

The explosion of great apps like this is made possible by modern libraries like D3.js, and formats like SVG. But what if you took away all the visual horsepower?

What would a retro BBS version of such an app look like, with all the inherent limitations of an ancient terminal: few colors (16, with caveats), low resolution (80×24), etc ?

Recently it hit me that the “equal-area cartograms” or “tile maps” which are en vogue at places like NPR and the Washington Post would actually translate well to ANSI text graphics.

So this week I threw together a scraper to grab some data from FiveThirtyEight’s election map, and then built a BBS door called Elex Forecast in Javascript for Synchronet BBSes. It was a fun challenge, and I’m happy with the result.

This animated GIF shows how my Elex Forecast BBS door works.

This animated GIF shows how my Elex Forecast BBS door works.

The map is displayed as ANSI art. Instead of mousing over the map as you would in a browser, users navigate my ANSI map with their arrow keys to get information for each state.

Want to check it out? Telnet to my BBS at guardian.synchro.net, then go to Externals > Information.

If you’re a Synchronet sysop, you can also download the code from the Elex Forecast repo on GitHub. It’ll be a fun thing to have on your BBSes … well, until Nov. 8, anyway.

P.S. Obviously the map is just one element among many in FiveThirtyEight’s app. If I get some time, I may also try to tackle other elements like the “How the forecast has changed” fever chart.

Update (Oct. 11): I added the chart, though it’s more of a scatter plot than a line graph just because of the extremely low resolution. Right now the chart is static, but I may add some interaction later where you could use your arrow keys to navigate the chart and see the percentages change.

Share your thoughts!