🏠 back to Observable

Is possible to build sandbox game's land map with D3.js ?

Hello to my friend :wave:t2:
Do you know, which package is used ( see in bottom picture) to build map in a sandbox game?
Does javascript have any package such as sandbox game’s canvas map to have most of the features and minimap on the top left position in website?

https://www.sandbox.game/en/map/?liteMap=false&currentX=1308&currentY=873&zoom=1

Like this? d3.js zoom & minimap / sungryeol park(max) / Observable

Yes , it has zoom and minimap.
But This texture map have these features:
1- A grid with a colorful square
2- Set a image on part of map that includes collection of squares by location coordinates
3- After click on each square , open a tooltip which includes location with x and y coordinates

I hadn’t heard of The Sandbox, but it seems to be built by a 28-person team and I’d imagine that there’s a lot of their own custom code behind that. They do seem to have some open-source repositories on GitHub; I don’t know if any of that includes the land map, but you could try looking around in this big repo.

In general, I think you could build something a lot like that with D3 — you can draw grids of colorful squares with D3, and open tooltips on click events, and so on — but I think you’d probably have to build a ton of the pieces yourself. D3’s a very “low-level” library; it helps you work with HTML and SVG elements in fewer lines of code, and it has modules for more advanced behaviors and transformations and layouts like zoom and pan and treemaps, but D3 doesn’t offer entire pre-built interfaces like the one you’re describing.

I know this isn’t a super helpful message, but it’s the best I can do! I’m not sure if you’re trying to build your own version of that entire interface. But I think if I were you, I’d try to think of one super narrow specific part of the interface that you’d like to do differently than The Sandbox does it, and start there.

2 Likes