Some nights when I can’t get to sleep, I think about hard problems until I fall asleep. Last night I thought about what would be the way to arrange the mountains in a way that would look aesthetically pleasing but also algorithmically so it also isn’t manual.

There’s enough manual things I’m doing already with collecting the data that I want the rest of it to be algorithmic as much as possible.

I went and tried to play around with Observable. I’m a heavy user of d3, and think Observable is probably the best designed data-vis platform around, built by the creator of d3. I used it to prototype my initial rendering of the Japan outline so here I’m going to try use it to play with different layout algorithms.

The first thing though was just to get the data to load, so I built up a way to just draw the rectangles that represent the size of the resort. I draw out all the rectangles manually on my “data input days”, so it’s nice to see them all in one map, like a ski resort constellation.

It’s such a thing of beauty to see it all working. However, I encountered a weird bug and resulting knowledge.

All the bounding boxes for the ski resorts are drawn by hand myself. I have been steadily using an open source GeoJSON editor to allow me to draw shapes on a map that I then export into GeoJSON, stored in a database (Firestore). For this visualization, I exported all that data into a single GeoJSON file and loaded it in. Once loaded, I used d3-geo to map the lat lons to screen coordinates, output an SVG path and the label of the resort area on the map.

However, when I first did this, there were a few issues, one was that some areas would render as huge world size rectangles and second, some of the areas, the centroid could not be found using the regular path.centroid() methods. I was stumped as to why.

After a good night’s sleep, I imagined that maybe the Polygon vertices had directionality (aka winding rule). Since I had seen that you can define a hole that could be cut out of a polygon, I imagined that the polygons follow some sort of winding rule. And indeed, that was the reason, Since I had haphazardly draw these bounding box manually, sometimes I would draw the bounding box clockwise, sometimes anti-clockwise, and so all the anti-clockwise ones ended up being negative-space polygons causing d3-geo to get confused by them.

I used turfjs to convert the polygon into a LineString, detect whether it the clockwise-ness booleanClockwise and then reverse the order of the points if it was. That fixed the problem for me. And so now I have a beautiful collection of bounding boxes.