Here’s a visual representation of the current system, but also not really. It’s just an SVG rendering of hard-coded data. Most of the data needed to generate this kind of thing doesn’t even exist yet, which is my next step.

I’m using D3js, which is a javascript library dedicated to using SVG (scalable vector graphics, which doesn’t really matter for this discussion, although I might bring it up later). The good news is that D3 can render SVG. The bad news is that it’s really the least of what it’s intended for. It’s actually dedicated to creating graphics from data. That sounds like what I want, but I don’t know if my data is in a form that I can pass to D3 for this, so I’m just setting it up by hand. However, since this is a game about economics, D3 may earn its keep later on if I have to draw graphs and charts.

Unfortunately, it doesn’t really do all that well with straight-up SVG but I need to use a library because out of the box, javascript and SVG don’t play well. SVG Has it’s own DOM (document object model, which describes how the HTML code and stuff “works”) which is not natively compatible with the DOM that javascript interacts with. Because of this, I needed some way of translating the javascript data I have to the SVG I want. Bottom line is that I can’t do SVG without a translator, which made me sad.

If you squint you can see numbers beneath the diamonds up there, and those are the system IDs on the other side of the jump gates. These diamonds are the jump gates, FYI. They retain their click-ability, so I can still jump from system to system. I had an issue clearing and re-rendering the map initially because, again, SVG doesn’t play well with javascript, but D3 has a way to handle it — again, via an ill-documented and dusty old method that I had to dig up from a third party site.