I need some guidance on a problem that I'm recently struggling with.

I have a data structure that looks something like this:

plus other 10000+ lines

Each line corresponds to an area of n meters in size, defining the resolution of the map. In the example bellow, each "pixel" is 300 meters.

This data should generate an image that looks like this:

I tried to plot this data on a map with OpenLayers. I managed to transform the data into a geojson format, where each line is a Point on a FeatureCollection, but I couldn't change the generated circles size, shape or color. Besides that, my browser couldn't handle drawing that much information, and everything got very slow :).

I read somewhere that this should be possible with a tool like GDAL (which I'm not familiar at all), but I have no idea of how this could be done.

The backend of this application will be in PHP, so I think that i could dump this data in a specific format, execute a command line tool (or something like that), and the resulting data (probably a geotiff, I wasn't abble to create such file) would be shown to the user using OpenLayers, Leaflet or other type of map visualization library, like geotiff.js (which I read that can display georeferenced images).