Rendering a dataset project

I noticed a while ago that Carto’s careers page has a number of coding tests, that I presume they use/have used as part of their recruiting process. A bunch of these seemed interesting and like good projects to give a go for some learning and fun.

One of the first ones I had a crack at was rendering a dataset in the browser.

The basic idea is:

  • Get the data from Carto using their SQL API
  • Then render the data in a web browser BUT without using a mapping/rendering library. So Leaflet, Google Maps, d3, three.js are out. But Canvas, SVG, WebGL are allowed.

You can check out what I came up with at https://colinrossiv.github.io/renderdataset (it’s a big dataset, so depending on your connection the initial load might take a bit).

From the bonus functionality, I implemented zoom, but didn’t get around to panning.

Adding in panning functionality, and working to improve the initial load times are two things I would like to work on more if I revisit this project in future.

I plan to add some more to this post about some of the choices and decisions I made in my code, but I was keen to get this post up so I can share it first.