Skip to content
Commits on Source (1)
This diff is collapsed.
<html>
<head>
<meta charset="utf-8"/>
<style>
h1 {
float: left;
}
body {
background: #222;
margin: 0px;
width: 100%;
height: 100%;
}
table {
border-collapse: collapse;
max-width: 50%;
float: right;
}
#graph {
border: 1px solid #eee;
float: left;
}
table,
td,
tr,th {
color: #eee;
margin: auto;
border: 1px solid #eee;
text-align: center;
}
/* D3 stuff */
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<div id="graph"></div>
<table>
<tr>
<th>Num</th>
<th>Body</th>
<th>Type</th>
<th>Distance to arrival</th>
<th>Jump range</th>
</tr>
{% for sys in route %}
<tr>
<td>{{sys.num}}</td>
<td>{{sys.body}}</td>
<td style="color: {{sys.color}}">{{sys.star_type}}</td>
<td>{{sys.distance}}</td>
<td>{{sys.jump_dist}}</td>
</tr>
{% endfor %}
</table>
<script type="text/javascript">
function dist(a,b) {
var sum=0;
for (var i=0;i<a.length;++i) {
sum+=Math.pow(a[i]-b[i],2)
}
return Math.pow(sum,0.5);
}
var width=512;
var height=512;
var route={{route|tojson}};
var vis=d3.select("#graph")
.append("svg").attr("viewBox", [0, 0, width, height]);;
vis.attr("width", width)
.attr("height", height);
var g=vis.append("g");
vis.call(d3.zoom()
.extent([[0, 0], [width, height]])
.on("zoom", () => {
g.attr("transform", d3.event.transform);
}));
var lines=[];
for (var i=0;i<route.length-1;++i) {
lines.push({
x1: route[i].pos[1],
x2: route[i+1].pos[1],
y1: -route[i].pos[2],
y2: -route[i+1].pos[2],
dist: dist(route[i].pos,route[i+1].pos),
color: ({
'#99A0FF':'#99A0FF', // Neutron star
'#5D67EF':'#5D67EF' // White dwarf
}[route[i].color]||'#eee')
})
}
g.selectAll(".line")
.data(lines)
.enter()
.append("line")
.attr("x1", (l) => l.x1 )
.attr("y1", (l) => l.y1 )
.attr("x2", (l) => l.x2 )
.attr("y2", (l) => l.y2 )
.style("stroke", (l) => l.color )
.style("stroke-width", 5)
.append("title")
.text((l) => Math.round(l.dist*100)/100 +" Ly");
g.selectAll("circle .nodes")
.data(route)
.enter()
.append("svg:circle")
.attr("class", "nodes")
.attr("cx", (d) => d.pos[1])
.attr("cy", (d) => -d.pos[2])
.attr("r", 10)
.attr("fill", (d) => d.color)
.append("title")
.text((d) => d.body+" ("+d.star_type+")")
</script>
</body>
</html>
\ No newline at end of file