|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 |
- $(function() {
- $("#map").html("<p>Loading map data...</p>");
- $.getJSON( "map/data.json", function(data) {
- $("#map").empty();
- var svg = d3.select("#map").append("svg")
- .attr("width", 1000)
- .attr("height", 1000); // TODO: dynamic
-
- var xmin = Infinity, xmax = -Infinity,
- ymin = Infinity, ymax = -Infinity;
- for (var sid in data["galaxy"]) {
- var system = data["galaxy"][sid];
- var x = system["coords"][0];
- var y = system["coords"][2];
- if (x < xmin) xmin = x;
- if (x > xmax) xmax = x;
- if (y < ymin) ymin = y;
- if (y > ymax) ymax = y;
- }
-
- var width = xmax - xmin;
- var height = ymax - ymin;
- var scale = 1000;
-
- svg.attr("viewBox", "0 0 " + scale + " " + scale);
-
- svg.selectAll("circle")
- .data(Object.values(data["galaxy"]))
- .enter()
- .append("circle")
- .attr("cx", (d) => {
- var x = d["coords"][0];
- return (x - xmin) / width * scale;
- })
- .attr("cy", (d) => {
- var y = d["coords"][2];
- return (y - ymin) / height * scale;
- })
- .attr("r", 1)
- .attr("class", (d) => {
- var sec = d["security"];
- var klass = sec < 0.05 ? "null" :
- Number(sec).toFixed(1).replace(".", "_");
- return "system sec-" + klass;
- });
- });
- });
|