JS: displaying an infinitely long coordinating system (grid)

Question

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)

Answer 1

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.

Answer 2

There exist books about this topic, e.g.

• Supercharged JavaScript Graphics, see http://shop.oreilly.com/product/0636920013044.do