index.html

<script type="text/javascript">

  //
  // Death Stranding Zipline Network Tool
  //
  // MIT License (See LICENSE for details)
  // Copyright 2019 Stephen McNabb
  //

  // Replace this array with one that contains your zipline details
  var ziplines = [
    { x: 2501.47, y: 1769.26, level: 2, mine: true },
    { x: 2256.21, y: 1532.69, level: 2, mine: true },
    { x: 2098.16, y: 1738.26, level: 2, mine: false },
    { x: 1868.41, y: 1933.32, level: 2, mine: false },
    { x: 1725.90, y: 1959.42, level: 2, mine: true },
    { x: 1981.51, y: 1315.58, level: 2, mine: true },
    { x: 1673.95, y: 1158.86, level: 2, mine: true },
    { x: 1398.52, y: 942.17, level: 2, mine: true },
    { x: 1188.99, y: 661.21, level: 2, mine: true },
    { x: 936.83, y: 424.57, level: 2, mine: true },
    { x: 2150.22, y: 1218.30, level: 2, mine: false },
    { x: 1239.35, y: 1243.91, level: 2, mine: true },
    { x: 1686.03, y: 809.38, level: 2, mine: false },
    { x: 943.85, y: 89.92, level: 2, mine: true },
    { x: 1159.81, y: 13.38, level: 2, mine: true },
    { x: 1270.88, y: -165.79, level: 2, mine: false },
    { x: 1414.22, y: -372.23, level: 2, mine: false },
    { x: 1658.30, y: -291.09, level: 2, mine: false },
    { x: 1834.95, y: -149.79, level: 2, mine: true },
    { x: 1969.72, y: -14.25, level: 2, mine: true },
    { x: 1832.78, y: -532.50, level: 2, mine: true },
    { x: 2057.08, y: -727.86, level: 2, mine: true },
    { x: 2133.50, y: -885.40, level: 2, mine: false },
    { x: 1354.33, y: -717.59, level: 2, mine: true },
    { x: 1140.22, y: -905.50, level: 2, mine: false },
    { x: 982.34, y: -896.10, level: 2, mine: false },
    { x: 1314.26, y: -1051.39, level: 2, mine: true },
    { x: 799.95, y: -840.66, level: 2, mine: false },
    { x: 740.76, y: -718.99, level: 2, mine: true },
    { x: 736.50, y: -652.41, level: 2, mine: true },
    { x: 603.56, y: 339.03, level: 2, mine: true },
    { x: 276.01, y: 331.54, level: 2, mine: true },
    { x: 15.52, y: 341.24, level: 2, mine: true },
    { x: -231.17, y: 448.12, level: 2, mine: true },
    { x: -476.10, y: 423.94, level: 2, mine: true },
    { x: -758.30, y: 364.30, level: 2, mine: false },
    { x: -970.08, y: 312.22, level: 2, mine: true },
    { x: -1205.83, y: 246.41, level: 2, mine: true },
    { x: 139.70, y: 152.14, level: 2, mine: true },
    { x: 64.73, y: -90.71, level: 2, mine: true },
    { x: 101.58, y: -428.54, level: 2, mine: false },
    { x: 111.48, y: -756.24, level: 2, mine: true },
    { x: 88.16, y: -1104.85, level: 2, mine: true },
    { x: 144.90, y: -1450.60, level: 2, mine: true },
    { x: -143.46, y: -1326.01, level: 2, mine: false },
    { x: -426.64, y: -1186.10, level: 2, mine: true },
    { x: -1390.90, y: 536.62, level: 2, mine: true },
    { x: -1702.73, y: 617.53, level: 2, mine: true },
    { x: -2027.39, y: 520.82, level: 2, mine: false },
    { x: -2210.33, y: 648.79, level: 2, mine: true },
    { x: -1957.64, y: 832.64, level: 2, mine: true },
    { x: -2272.08, y: 988.35, level: 2, mine: false },
    { x: -2403.12, y: 1283.38, level: 2, mine: false },
    { x: -1982.34, y: 1182.65, level: 2, mine: true },
    { x: -2200.37, y: 1472.96, level: 2, mine: false },
    { x: -2001.17, y: 1532.77, level: 2, mine: true },
    { x: -1867.41, y: 1731.70, level: 2, mine: true },
    { x: -1754.34, y: 1900.18, level: 2, mine: true },
    { x: -1379.59, y: 361.87, level: 2, mine: true },
    { x: -1429.90, y: 90.58, level: 2, mine: true },
    { x: -1020.79, y: 44.28, level: 2, mine: true },
    { x: -958.46, y: -145.42, level: 2, mine: true },
    { x: -714.92, y: -63.87, level: 2, mine: true },
    { x: -654.62, y: -173.98, level: 2, mine: true },
    { x: -1216.80, y: -312.54, level: 2, mine: true },
    { x: -1061.57, y: -466.38, level: 2, mine: false },
    { x: -1152.58, y: -564.48, level: 2, mine: true },
    { x: -1161.57, y: -824.54, level: 2, mine: true },
    { x: -878.54, y: -803.42, level: 2, mine: true },
    { x: -1222.44, y: -1123.42, level: 2, mine: true },
    { x: -1264.37, y: -1306.20, level: 2, mine: false },
    { x: -1475.84, y: -625.93, level: 2, mine: true },
    { x: -1734.69, y: -623.14, level: 2, mine: false },
    { x: -1810.61, y: -724.78, level: 2, mine: true },
    { x: -924.67, y: -934.90, level: 2, mine: true },
    { x: -673.46, y: -1079.11, level: 2, mine: true },
    { x: -965.60, y: -679.97, level: 2, mine: false },
    { x: -1579.59, y: -908.93, level: 2, mine: false },
    { x: -1755.12, y: -966.14, level: 2, mine: false },
    { x: -1849.49, y: -1180.32, level: 2, mine: true },
    { x: -2061.64, y: -1445.60, level: 2, mine: true },
    { x: -2241.91, y: -1517.29, level: 2, mine: true },
    { x: -2484.40, y: -1767.70, level: 2, mine: false },
    { x: -2566.73, y: -1987.72, level: 2, mine: true },
    { x: -1123.41, y: 430.78, level: 2, mine: false },
    { x: -1057.32, y: 611.29, level: 2, mine: false },
    { x: -1095.78, y: 853.93, level: 2, mine: false },
    { x: -962.59, y: 1050.97, level: 2, mine: true },
    { x: -785.92, y: 1003.04, level: 2, mine: false },
    { x: -495.21, y: 1051.51, level: 2, mine: true },
    { x: -339.92, y: 965.49, level: 2, mine: true },
    { x: -262.01, y: 766.39, level: 2, mine: true },
    { x: -208.90, y: 710.16, level: 2, mine: true },
    { x: 915.86, y: 1317.25, level: 2, mine: false },
    { x: 638.93, y: 1330.77, level: 2, mine: true },
    { x: 466.72, y: 1429.84, level: 2, mine: false },
    { x: 198.54, y: 1409.23, level: 2, mine: true },
    { x: 110.27, y: 1687.45, level: 2, mine: true },
    { x: -30.55, y: 1339.29, level: 2, mine: true },
    { x: -80.13, y: 1216.15, level: 2, mine: true },
    { x: -118.70, y: 909.62, level: 2, mine: false },
    { x: -177.55, y: 1580.26, level: 2, mine: false },
    { x: -339.33, y: 1566.53, level: 2, mine: true },
    { x: -631.02, y: 1477.45, level: 2, mine: true },
    { x: -863.34, y: 1583.48, level: 2, mine: true },
    { x: -1098.73, y: 1761.78, level: 2, mine: false },
    { x: -1420.29, y: 1898.68, level: 2, mine: true },
    { x: 643.47, y: -613.75, level: 2, mine: false },
    { x: 363.97, y: -681.64, level: 2, mine: true },
    { x: 1041.23, y: -193.01, level: 2, mine: false },
    { x: 868.62, y: -345.26, level: 2, mine: true }
  ];

  // #############################################################################
  // You shouldn't need to change anything below this line
  // #############################################################################

  // Prepper details
  var preppers = [
    { x: 2587.29, y: 2013.84, name: "Lake Knot City", short: "LKC" },
    { x: 1751.89, y: 1971.61, name: "Peter Englert", short: "PTR" },
    { x: 2193.54, y: 1189.78, name: "The Engineer", short: "ENG" },
    { x: 1226.28, y: 1318.63, name: "The Craftsman", short: "CFT" },
    { x: 1695.03, y: 702.07, name: "The Elder", short: "ELD" },
    { x: 1054.34, y: 409.51, name: "Distribution Center South of Lake Knot City", short: "DCS" },
    { x: 36.47, y: -73.98, name: "Weather Station", short: "WTR" },
    { x: 91.08, y: -1619.15, name: "Timefall Farm", short: "FRM" },
    { x: 1140.46, y: 29.07, name: "The Collector", short: "COL" },
    { x: 2002.74, y: -24.41, name: "The Film Director", short: "DIR" },
    { x: 1620.10, y: -275.70, name: "The Junk Dealer", short: "JNK" },
    { x: 2153.55, y: -910.83, name: "The Chiral Artist's Studio", short: "ART" },
    { x: 717.90, y: -663.17, name: "The Cosplayer", short: "COS" },
    { x: 1024.51, y: -982.48, name: "Mama's Lab", short: "MAM" },
    { x: 1378.90, y: -1284.69, name: "South Knot City", short: "SKC" },
    { x: 186.75, y: 1641.40, name: "Waystation North of Mountain Knot City", short: "WNM" },
    { x: -341.64, y: 2226.21, name: "Incinerator West of Lake Knot City", short: "INC" },
    { x: -1741.90, y: 2037.95, name: "Distribution Center North of Mountain Knot City", short: "DCN" },
    { x: -2443.74, y: 1291.08, name: "The Novelist's Son", short: "NOV" },
    { x: -2169.54, y: 602.02, name: "The Photographer", short: "PHT" },
    { x: -1100.09, y: 270.64, name: "Mountain Knot City", short: "MKC" },
    { x: -920.12, y: 1063.61, name: "The Mountaineer", short: "MNT" },
    { x: -318.60, y: 990.34, name: "The Spiritualist", short: "SPT" },
    { x: -221.06, y: 726.37, name: "The First Prepper", short: "1ST" },
    { x: -1427.25, y: 56.98, name: "The Doctor", short: "DOC" },
    { x: -647.17, y: -146.53, name: "The Robotocist", short: "RBT" },
    { x: -1213.11, y: -221.44, name: "Heartman's Lab", short: "HRT" },
    { x: -1831.92, y: -704.12, name: "The Evo-devo Biologist", short: "EVO" },
    { x: -898.98, y: -790.65, name: "The Geologist", short: "GEO" },
    { x: -1243.72, y: -1247.38, name: "The Paleontologist", short: "PLN" },
    { x: -421.59, y: -1164.98, name: "The Veteran Porter", short: "VET" },
    { x: -2558.54, y: -2015.51, name: "Chiral Relay", short: "RLY" }
  ];

</script>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>IrishStevo's Death Stranding Zipline Network</title>
  <script src="d3.min.js"></script>
  <style type="text/css">
    body {
      background-color: #2c2d2f;
      font-family: "Arial";
      color: #fbe3b9;
    }
    #title {
      margin: auto;
      width: 1000px;
      text-align: center;
    }
    #container {
      margin: auto;
      background-color: #293462;
      width: 1000px;
      height: 1000px;
      border: 1px solid #fbe3b9;
    }
    .prepper {
      fill: #fbe3b9;
      font-size: 0.6em;
    }
    .line {
      stroke: #8186d5;
    }
    .zipline_mine {
      fill: #8186d5;
    }
    .zipline_not_mine {
      fill: #ec9b3b;
    }
  </style>
</head>

<body>
  <div id="title"><h1>IrishStevo's Death Stranding Zipline Network</h1></div>
  <div id="container"></div>
</body>

</html>

<script type="text/javascript">

  // SVG dimensions
  var width = 1000, height = 1000;

  // Create the main SVG
  var svg = d3.select("#container")
              .append("svg:svg")
              .attr("width", width)
              .attr("height", height);

  // Setup scales to map game co-ordinates to dimensions
  var xScale = d3.scaleLinear()
    .domain([-3584.00, 3584.00])
    .range([0, width]);
  var yScale = d3.scaleLinear()
    .domain([3584.00, -3584.00])
    .range([0, height]);

  // Draw the prepper circles
  svg.selectAll("circles")
    .data(preppers)
    .enter()
    .append("svg:circle")
    .attr("class", "prepper")
    .attr("cx", function(d) { return Math.round(xScale(d.x)); })
    .attr("cy", function(d) { return Math.round(yScale(d.y)); })
    .attr("r", "7px")
    .append("svg:title")
    .text(function(d) { return d.name });

  // Calculate which ziplines will connect
  // Does not take in to account any obstacles between ziplines
  var links = [];
  var shortest = 1000000;
  var longest = 0;
  for (i = 0; i < ziplines.length; i++) {
    for (j = i + 1; j < ziplines.length; j++) {
      var length = Math.floor(Math.hypot(ziplines[i].x - ziplines[j].x, ziplines[i].y - ziplines[j].y));
      var required_length = (ziplines[i].level + ziplines[j].level > 2 ? 350 : 300);
      if (length <= required_length) {
        links.push({source: ziplines[i], target: ziplines[j]});
        if (length > longest) {
          longest = length;
        }
        if (length < shortest) {
          shortest = length;
        }
      }
    }
  }

  // Draw lines between the connected ziplines
  svg.selectAll(".line")
    .data(links)
    .enter()
    .append("line")
    .attr("class", "line")
    .attr("x1", function(d) { return xScale(d.source.x) })
    .attr("y1", function(d) { return yScale(d.source.y) })
    .attr("x2", function(d) { return xScale(d.target.x) })
    .attr("y2", function(d) { return yScale(d.target.y) });

  // Draw the zipline circles
  svg.selectAll("circles")
    .data(ziplines)
    .enter()
    .append("svg:circle")
    .attr("class", function(d) { return (d.mine ? "zipline_mine" : "zipline_not_mine") })
    .attr("cx", function(d) { return Math.round(xScale(d.x)) })
    .attr("cy", function(d) { return Math.round(yScale(d.y)) })
    .attr("r", "5px")
    .append("svg:title")
    .text(function(d) { return "X: " + d.x + ", Y: " + d.y + ", Level: " + d.level });

  // Label the prepper circles
  svg.selectAll("text")
    .data(preppers)
    .enter()
    .append("text")
    .attr("class", "prepper")
    .attr("x", function(d) { return Math.round(xScale(d.x)) + 7; })
    .attr("y", function(d) { return Math.round(yScale(d.y)) - 7; })
    .text(function(d) { return d.short; });

  // Add some stats
  var mine = ziplines.filter(d => d.mine == true).length;
  svg.append("text")
    .attr("x", 20)
    .attr("y", 30)
    .attr("class", "zipline_mine")
    .text("My Zipline Count: " + mine +
      " (" + (mine * 500).toLocaleString('en') + " / 41,220 Max Bandwidth)");
  svg.append("text")
    .attr("x", 20)
    .attr("y", 50)
    .attr("class", "zipline_not_mine")
    .text("Borrowed Zipline Count: " + ziplines.filter(d => d.mine == false).length);
  svg.append("text")
    .attr("x", 20)
    .attr("y", 70)
    .attr("class", "zipline_mine")
    .text("Connected Ziplines Count: " + links.length);
  svg.append("text")
    .attr("x", 20)
    .attr("y", 90)
    .attr("class", "zipline_mine")
    .text("Shortest Connection: " + shortest + "m");
  svg.append("text")
    .attr("x", 20)
    .attr("y", 110)
    .attr("class", "zipline_mine")
    .text("Longest Connection: " + longest + "m");

</script>