D3 Examples - EVE Online

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