Search code examples
javascripthtmlwebcoordinate-systemsinfinity

JS: displaying an infinitely long coordinating system (grid)

I would like to display an infinitely long coordinating system/grid (X and Y axes), which contains an endless amount of square (something like DIVs), using JavaScript. I don't have any idea where to start. It seems to me like a really hard problem to solve. There are so many factors of which I don't have an idea to build them, such as:

  • structuring them in an HTML element tree
  • using the right elements (probably SVG elements)
  • giving the grid a fluid scroll
  • coordinating the loading of each element (if it has to be displayed)

I am sure there are JavaScript libraries, that can help me doing it, but I don't know any of these.

What would be a good way to start with?

Here is the concept of my grid:

(Y axis)
^
|  |      |      |
|--+------+------+---
| E| SQURE| SQURE| SQ
|  |      |      |
|--+------+------+---
| E| SQURE| SQURE| SQ
|  |      |      |
|--+------+------+---
| E| SQURE| SQURE| SQ
+--------------------> (X axis)
Solution

  • While in the comments you said something similar to graphing, I would really give something like kineticjs a peek. It uses canvas's and could be a bit of overkill for what you are attempting but it's a great resource that has many uses but since you've requested a grid, here is a question over that as well Kinetic.js – creating a grid and combine with something like: Jquery drag and drop and snap to grid in kineticJS or Snap to grid operation using images,kinetic.js,javascript? to get the snapping you're looking for.