So what I'm going to show you is the connection in a solar system of EVE universe.
Jita
Built with blockbuilder.org
license: mit |
So what I'm going to show you is the connection in a solar system of EVE universe.
Jita
Built with blockbuilder.org
solarSystemID | solarSystemName | x_1 | y_1 | z_1 | destination | x_2 | y_2 | z_2 | ||
---|---|---|---|---|---|---|---|---|---|---|
0 | 30000139 | Urlen | -1.03119342880052 | 1.072134013403432 | -1.794521048198568 | 30000141.0 | -0.701423584797024 | 0.6702886610419329 | -2.8287219485137887 | |
1 | 30000139 | Urlen | -1.03119342880052 | 1.072134013403432 | -1.794521048198568 | 30000144.0 | -1.420037135406464 | 0.4168408018975264 | -1.329060385334848 | |
2 | 30000140 | Maurasi | 0.3078214813919568 | -0.2233048689375064 | -0.7440365433307392 | 30000144.0 | -1.420037135406464 | 0.4168408018975264 | -1.329060385334848 | |
3 | 30000140 | Maurasi | 0.3078214813919568 | -0.2233048689375064 | -0.7440365433307392 | 30000142.0 | 0.0 | 0.0 | 0.0 | |
4 | 30000141 | Kisogo | -0.701423584797024 | 0.6702886610419329 | -2.8287219485137887 | |||||
5 | 30000142 | Jita | 0.0 | 0.0 | 0.0 | 30000144.0 | -1.420037135406464 | 0.4168408018975264 | -1.329060385334848 | |
6 | 30000142 | Jita | 0.0 | 0.0 | 0.0 | 30000143.0 | -1.4941292280533935 | 0.582690126584664 | -0.9559595563009872 | |
7 | 30000142 | Jita | 0.0 | 0.0 | 0.0 | 30000145.0 | -0.752644768545712 | 0.785131120092744 | -0.2979684807883952 | |
8 | 30000143 | Niyabainen | -1.4941292280533935 | 0.582690126584664 | -0.9559595563009872 | 30000144.0 | -1.420037135406464 | 0.4168408018975264 | -1.329060385334848 | |
9 | 30000143 | Niyabainen | -1.4941292280533935 | 0.582690126584664 | -0.9559595563009872 | 30000145.0 | -0.752644768545712 | 0.785131120092744 | -0.2979684807883952 | |
10 | 30000144 | Perimeter | -1.420037135406464 | 0.4168408018975264 | -1.329060385334848 | |||||
11 | 30000145 | New Caldari | -0.752644768545712 | 0.785131120092744 | -0.2979684807883952 |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet"> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
circle:hover { | |
fill: #F012BE; | |
} | |
.subtitle { | |
font-size: 40pt; | |
font-family: 'Open Sans', sans-serif; | |
alignment-baseline: middle; | |
fill: #001f3f; | |
} | |
div.tooltip { | |
position: absolute; | |
text-align: center; | |
width: 150px; | |
height: 30px; | |
vertical-align: middle; | |
line-height: 30px; | |
font-family:'Open Sans', sans-serif; | |
background: #FFDC00; | |
border: 0px; | |
border-radius: 8px; | |
pointer-events: none; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="option"> | |
<input name="updateButton" | |
type="button" | |
value="Update" | |
onclick="updateData()" /> | |
</div> | |
<script> | |
// Feel free to change or delete any of the code you see in this editor! | |
const xValue = d => d.x_1; | |
const yValue = d => d.y_1; | |
const zValue = d => d.z_1; | |
const dxValue = d => d.x_2; | |
const dyValue = d => d.y_2; | |
const dzValue = d => d.z_2; | |
const sysName = d => d.solarSystemName; | |
const sysID = d => d.solarSystemID; | |
const destination = d => d.destination; | |
const xScale = d3.scaleLinear(); | |
const yScale = d3.scaleLinear(); | |
const zScale = d3.scaleLinear(); | |
const svg = d3.select("body").append("svg") | |
.attr("width", 1000) | |
.attr("height", 500); | |
var temp = d3.select('body').append('div') | |
.attr('class', 'tooltip') | |
.style('opacity', 0); | |
const margin = { left: 120, right: 120, top: 20, bottom: 120 }; | |
const width = svg.attr('width'); | |
const height = svg.attr('height'); | |
const innerWidth = width - margin.left - margin.right; | |
const innerHeight = height - margin.top - margin.bottom; | |
const g = svg.append('g') | |
.attr('transform', `translate(${margin.left},${margin.top})`); | |
const xAxisG = g.append('g') | |
.attr('transform', `translate(0, ${innerHeight+50})`); | |
const yAxisG = g.append('g') | |
.attr('transform', `translate(0, 50)`); | |
g.append('text') | |
.attr('class', 'subtitle') | |
.attr('x', -50) | |
.attr('y', 20) | |
.style('font-weight', 'bold') | |
.text('Jita-Trade center of EVE universe'); | |
const xAxis = d3.axisBottom() | |
.scale(xScale) | |
.ticks(1) | |
.tickPadding(10) | |
.tickSize(5); | |
const yAxis = d3.axisLeft() | |
.scale(yScale) | |
.ticks(1) | |
.tickPadding(15) | |
.tickSize(5); | |
// xAxisG.append('text') | |
// .attr('class', 'axis-label') | |
// .attr('x', 0) | |
// .attr('y', 0) | |
// .text('X'); | |
// yAxisG.append('text') | |
// .attr('class', 'axis-label') | |
// .attr('x', 10) | |
// .attr('y', -60) | |
// .attr('transform', `rotate(-90)`) | |
// .style('text-anchor', 'middle') | |
// .text('Y'); | |
d3.csv('final.csv', data => { | |
xScale | |
.domain([-1.5,0.5]) | |
.range([0, innerWidth-60]) | |
.nice(); | |
yScale | |
.domain([-0.5,1.5]) | |
.range([innerHeight, 0]) | |
.nice(); | |
zScale | |
.domain(d3.extent(data, yValue)) | |
.range([3, 15]) | |
.nice(); | |
g.selectAll('circle').data(data) | |
.enter().append('circle') | |
.attr('cx', d => xScale(xValue(d))) | |
.attr('cy', d => yScale(yValue(d))) | |
.attr('r', 5) | |
.attr('fill', 'black') | |
.attr('fill-opacity', 0.6) | |
.on("mouseover", function(d) { | |
temp.transition() | |
.duration(200) | |
.style("opacity", 1); | |
temp.html(d.solarSystemName) | |
.style("left", (d3.event.pageX - 60) + "px") | |
.style("top", (d3.event.pageY + 20) + "px"); | |
}) | |
.on("mouseout", function(d) { | |
temp.transition() | |
.duration(500) | |
.style("opacity", 0); | |
}); | |
g.selectAll('path').data(data) | |
.enter().append('line') | |
.style("stroke", "black") | |
.attr("x1", d => xScale(xValue(d))) | |
.attr("y1", d => yScale(yValue(d))) | |
.attr("x2", d => xScale(dxValue(d))) | |
.attr("y2", d => yScale(dyValue(d))); | |
xAxisG.call(xAxis); | |
yAxisG.call(yAxis); | |
}); | |
function updateData() { | |
// Select the section we want to apply our changes to | |
var svg = d3.select("body").transition(); | |
d3.csv('final.csv', data => { | |
xScale | |
.domain([-1.5,0.5]) | |
.range([0, innerWidth-60]) | |
.nice(); | |
yScale | |
.domain([-0.5,1.5]) | |
.range([innerHeight, 0]) | |
.nice(); | |
zScale | |
.domain(d3.extent(data, yValue)) | |
.range([3, 15]) | |
.nice(); | |
svg.select('circle').data(data) | |
.enter() | |
.attr('cx', d => xScale(xValue(d))) | |
.attr('cz', d => zScale(yValue(d))) | |
.attr('r', 5) | |
.attr('fill', 'black') | |
.attr('fill-opacity', 0.6) | |
.on("mouseover", function(d) { | |
temp.transition() | |
.duration(200) | |
.style("opacity", 1); | |
temp.html(d.solarSystemName) | |
.style("left", (d3.event.pageX - 60) + "px") | |
.style("top", (d3.event.pageY + 20) + "px"); | |
}) | |
.on("mouseout", function(d) { | |
temp.transition() | |
.duration(500) | |
.style("opacity", 0); | |
}); | |
svg.select('line').data(data) | |
.enter() | |
.style("stroke", "black") | |
.attr("x1", d => xScale(xValue(d))) | |
.attr("y1", d => yScale(zValue(d))) | |
.attr("x2", d => xScale(dxValue(d))) | |
.attr("y2", d => yScale(dzValue(d))); | |
xAxisG.call(xAxis); | |
yAxisG.call(yAxis); | |
}); | |
} | |
</script> | |
</body> |