EVE Online - Jita

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

Jita

<!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 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>

https://d3js.org/d3.v4.min.js