Datavis Cities

This sketch is a very first baby step in the vast and complex realm of data visualization with code.

In order to map the data it had to be imported into the JavaScript file first. I decided to map the "World's largest Cities" and imported the data in a JSON format. The data contained the name of the city as well as it's population size.

I decided on the most classical type of data visualization and mapped the population of a city to the diameter of a circle. The larger a population – the larger the circle diameter.

With the maximum population size of roughly 36 million in the Tokyo-Yokohama bay area the numbers had to be adjusted with the "map" method, which re-maps a number from one range to another. let diameter = sketch.map(jsonContents[i].population, 0, maxPopulation, 10, 200) Given the map syntax: map(value, start1, stop1, start2, stop2, [withinBounds]) I mapped the max. population size of 36 million to a max. diameter length of 200px.

You are welcome to look at the code in detail on my GitHub repository.