Interactive Map – Constellations

I visualized the ratings of hotels (stars) across the world.

MAP :  acrylc.github.io/constellation

GITHUB :  github.com/acrylc/constellation

The map renders poorly in the iframe below because it is not responsive, I’m working on fixing it. The mapbox layer could be embedded, but I’ve styled the hover over tooltips in javascript so I decided to share an iframe of my webpage instead.

Process

I was very interested in mapping the hotels in the browser because i wanted to see whether it would be possible to map an interactive map of such a large dataset.  I cleaned the csv in the terminal using csvquote and awk for simple data manipulation such as cleaning invalid hotel ratings (there were 200,000 invalid hotel ratings, all of which were set to -1).

I could not use Mapbox’s JS api because the dataset was too large, so I decided to use Tilemill to render mbtiles and upload those instead. The CSV file was too large to upload in Tilemill. Instead, I converted the CSV to a shapefile using QGIS. Bellow is a screenshot of the shapefile in QGIS.

I then played around with styling the markers in Tilemill.

Afterwards, I uploaded the mbtiles to Mapbox. The process was not fun. It used up 600% (?!) of my cpu for 3 hours. Since the upload speed increases exponentially with the number of zoom levels uploaded, I restricted the upload to a small range of zoom levels. I’d like to upload more detailed zoom levels later.