Skip to content

Instantly share code, notes, and snippets.

@YouthBread

YouthBread/.block

Last active September 22, 2017 11:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save YouthBread/25b4dc19a9f3f79d29f31dab957d0cfc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save YouthBread/25b4dc19a9f3f79d29f31dab957d0cfc to your computer and use it in GitHub Desktop.
Download ZIP
EVE Online - Jita
Raw
.block
license: mit
Raw
README.md

So what I'm going to show you is the connection in a solar system of EVE universe.

Jita

Built with blockbuilder.org

Raw
final.csv
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
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment