After seeing an innovative map of the world scaled by population rather than land area (see here), we became interested in representing other kinds of data using similar techniques. However, these maps were all generated by hand. We then came up with the idea of constructing a tool that lets users generate maps real-time based on a variety of statistics.

What it does

DynaMap lets users choose from a host of country statistics, scraping the web and dynamically scaling the land area of different landmasses according to those statistics while preserving basic shape and relative location.

How we built it

Using Node.js built on a MySQL database, we developed DynaMap using HTML5 canvas elements by hand, constructing algorithms to adjust the location, scale, and shape of each country according to the statistics scraped from the CIA World Factbook.

Challenges I ran into

During development, we struggled between scaling countries purely based on data and losing relative positioning or retaining shape and relative size at the risk of locking ourselves into one map orientation. At the end, we settled on a hybrid approach that gave us the unique ability to visualize differences between countries without losing the borders between them.

Accomplishments that we're proud of

We're proud that our web service provides something unique and that we generalized a solution for representing a map of arbitrary shape with arbitrary data. Starting from scratch, we built the Tug-O-War® algorithm that allows countries to interact and negotiate borders and land masses while preserving their recognizable form.

What we've learned

Having no prior experience with HTML5 canvas elements, we quickly adapted it as the crux of our application. For many of us, it was our first time using JavaScript and MySQL. Using no front-end frameworks, we created an intuitive and interesting user experience.

What's next for DynaMap

We'd like to refine our algorithm further to allow more flexibility with country manipulation and to allow user-submitted data within the web application. Given more time, we'd like to see DynaMap grow into an interesting open-source project where everybody can contribute to a unique data visualization model.

Share this project: