map.js

let width = 500;
let height = 500;

let svg = d3
  .select("body")
  .append("svg")
  .attr("viewBox", "0 0 " + width + " " + height);
let container = svg.append("g");

let zoomed = () => {
  container.attr("transform", d3.event.transform);
  container.selectAll(".stop").attr("r", 2.0 / d3.event.transform.k);
  container.selectAll(".home").attr("r", 3.0 / d3.event.transform.k);
};
let zoom = d3.zoom().scaleExtent([0.7, 5]).on("zoom", zoomed);
svg.call(zoom);

let maxTravelTime = 70 * 60;

//let hourLine = container.append("circle").attr("class", "hour").attr("cx", width/2).attr("cy", height/2).attr('r', 60*60/maxTravelTime * 250) // .attr('opacity', 0);
let hourLineSvgSize = ((60 * 60) / maxTravelTime) * width;

let createHourCircle = (href) => {
  return container
    .append("image")
    .attr("xlink:href", href)
    .attr("x", (width - hourLineSvgSize) / 2)
    .attr("y", (height - hourLineSvgSize) / 2)
    .attr("width", hourLineSvgSize)
    .attr("height", hourLineSvgSize);
};

let hourCircleBlank = createHourCircle("OneHourWithoutLabel.svg");
let hourCircle = createHourCircle("OneHour.svg").attr("opacity", 0);

let { stations, lines } = subway;

window.travelTimes = null;

let defaultStop = "EMBR"; // Embarcadero

let computeStationPositions = (originStationId, travelTimes) => {
  let originLat = stations[originStationId || defaultStop].lat;
  let originLon = stations[originStationId || defaultStop].lon;

  let positions = {};
  for (let stationId of Object.keys(stations)) {
    let { lat, lon } = stations[stationId];

    let deltaY = lat - originLat;
    let deltaX = (lon - originLon) * 0.767;
    let angle = Math.atan2(deltaY, deltaX) + (30 / 180) * Math.PI;
    let origDist = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));

    let dist = travelTimes
      ? travelTimes[stationId] / maxTravelTime
      : origDist * 5;
    positions[stationId] = {
      x: Math.cos(angle) * dist,
      y: Math.sin(angle) * dist,
    };
  }

  return positions;
};

let tooltip = document.createElement("div");
tooltip.setAttribute("class", "tooltip");
tooltip.style.display = "none";
document.body.appendChild(tooltip);

let shouldHideTooltip = true;
let addClickHandlers = (selection) => {
  selection
    .on("click", (d) => {
      setHomeStationId(d);
    })
    .on("mouseenter", (d) => {
      shouldHideTooltip = false;
      tooltip.style.top = d3.event.pageY + 10 + "px";
      tooltip.style.left = d3.event.pageX + 10 + "px";
      tooltip.style.display = "block";
      let innerHTML = "<strong>" + stations[d].name + "</strong><br/>";
      if (travelTimes) {
        let minutesAway = (travelTimes[d] / 60) | 0;
        innerHTML += minutesAway + " minutes away";
      }
      tooltip.innerHTML = innerHTML;
    })
    .on("mouseleave", (d) => {
      shouldHideTooltip = true;
      setTimeout(() => {
        if (shouldHideTooltip) tooltip.style.display = "none";
      }, 100);
    });
};

let setStationPositions = (stationPositions) => {
  let xValue = (stationId) => stationPositions[stationId].x;
  let yValue = (stationId) => stationPositions[stationId].y;
  let allStationIds = Object.keys(stations);
  let xScale = d3.scaleLinear().range([0, width]).domain([-1, 1]);
  let yScale = d3.scaleLinear().range([height, 0]).domain([-1, 1]);
  let xMap = (x) => xScale(xValue(x));
  let yMap = (y) => yScale(yValue(y));
  let stationPositionIsReasonable = (stationId) => {
    let x = xValue(stationId);
    let y = yValue(stationId);
    return x > -5 && x < 5 && y > -5 && y < 5;
  };

  let lineFunc = d3.line().x(xMap).y(yMap).curve(d3.curveNatural);
  let createLine = (subwayLine) => {
    return lineFunc(subwayLine.stations.filter(stationPositionIsReasonable));
  };

  let lineSelection = container.selectAll(".line").data(Object.values(lines));
  lineSelection
    .enter()
    .append("path")
    .attr("class", "line")
    .attr("stroke", (l) => l.color)
    .attr("stroke-width", 3)
    .merge(lineSelection)
    .transition()
    .attr("d", createLine)
    .attr("fill", "none");

  let stopSelection = container.selectAll(".stop").data(Object.keys(stations));
  let merged = stopSelection
    .enter()
    .append("circle")
    .attr("class", "stop")
    .attr("r", "2")
    .attr("fill", "black")
    .merge(stopSelection);
  merged.transition().attr("cx", xMap).attr("cy", yMap);
  addClickHandlers(merged);

  let homeSelection = container.selectAll(".home").data([1]);
  merged = homeSelection
    .enter()
    .append("circle")
    .attr("class", "home")
    .attr("r", "3")
    .attr("fill", "white")
    .attr("stroke", "black")
    .attr("stroke-width", 2)
    .merge(homeSelection);
  merged
    .transition()
    .attr("cx", () => xScale(0))
    .attr("cy", () => yScale(0));
  addClickHandlers(merged);
};

let updateMap = (homeStationId, schedule) => {
  if (homeStationId) {
    hourCircleBlank.transition().attr("opacity", 0);
    hourCircle.transition().attr("opacity", 1);
    document.getElementById("initial").style.display = "none";
    document.getElementById("explanation").style.display = "block";
  }

  if (homeStationId && schedule) {
    computeTravelTimes(homeStationId, schedule, (times) => {
      window.travelTimes = times;
      setStationPositions(computeStationPositions(homeStationId, times));
    });
  } else {
    setStationPositions(computeStationPositions(null, null));
  }
};

window.homeStationId = null;
window.schedule = "weekday_8am";

let setSchedule = (schedule) => {
  window.schedule = schedule;
  updateMap(window.homeStationId, window.schedule);
};
let setHomeStationId = (homeStationId) => {
  window.homeStationId = homeStationId;
  updateMap(window.homeStationId, window.schedule);
};

updateMap(null, null);
// preload 8am:
getSchedule(window.schedule, (data) => {});

$(() => {
  $("#timePicker li").click((e) => {
    let schedule = e.target.getAttribute("data-schedule");
    $("#timePicker li").removeClass("selected");
    $(e.target).addClass("selected");
    setSchedule(schedule);
  });
});