HN user

chrismandelics

24 karma
Posts1
Comments3
View on HN

Same here. I ran into a similar situation mapping municipal data (https://wwwww.buffalo.mandelics.com/w5/around-buffalo.html) plus I needed to be able to click a point and see the event(s) behind it.

I ended up doing a form of clustering:

- at low and medium zoom: quantize events into a grid, take each cell's centroid, and make more populous circles bigger on a logarithmic scale - clicking lists all relevant events - double-clicking zooms in a level - at high enough zoom, break up the multi-event circles by displacing them along a hexagonal spiral

I still get some overlaps from nearby centroids and overlapping hexes, but generally every point can be reached without infinite zoom.

Also worth noting: default JS `Array.sort()` converts everything to strings and compares them lexically -- so 80 comes before 9. It's a little faster to sort them as numbers: `.sort((a, b) => a - b)` takes me around 40 seconds in Chrome (11 seconds in Firefox).

Plain JS numeric code _can_ be really fast if you stick to typed arrays.

I tried the posted JS in Chrome on an aging thinkpad and each `testSort()` took as long as 125 seconds (32 seconds in Firefox). But when I replaced `Array` with `Float32Array` the runtime dropped to under 7 seconds (about 2 seconds in Firefox) -- in line with the wasm alternatives. Going further and filling an `Int32Array` with `(Math.random() * 2.0 - 1.0) * 100` (as in the AssemblyScript code) brought the Chrome runtime down to around 1.6 sec (still around 2 seconds in Firefox).