Train Viz

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  background-color: black;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  line-height: 50px;
  background-color: rgba(50, 100, 50, 0.95);
  padding-left: 80px;
  z-index: 10;
}

#title {
  font-size: 30px;
  font-family: fantasy, sans-serif;
  font-weight:  bold;
  text-shadow: 2px 3px rgba(100, 130, 100, 0.9);
}

#options {
  display: inline-block;
}

#options input {
  padding: 5px;
  border-radius: 4px;
  margin: 20px;
  margin-top: 8px;
  vertical-align: top
}

#container {
  margin: 0 auto;
  margin-top: 55px;
  font-family: sans;
}

.spinner {
  position: absolute;
  left: 50%;
  top: 50%;
}

#hl {
  fill: #333;
}

.stop text {
  text-anchor: end;
  font-size: 14px;
  fill: #C33;
  font-weight: bold;
  font-family: Courier New, mono;
}

.stop circle {
  fill: #0F9;
  stroke: #099;
}

.stop .under {
  stroke: #099;
}

.stop .layover {
  fill: #0F9;
}

.train circle {
  fill: #09F;
}

.train-bg {
  stroke: #AA3;
}

.train-info {
  fill: white;
}

.details {
  position: absolute;
  left: 350px;
  background-color: #711;
  color: white;
  width: 350px;
  min-height: 100px;
  padding: 6px;
  border-radius: 2px;

}

.details-title {
  font-weight: bold;
  line-height: 20px;
}

.details .train-num {
  margin-right: 6px;
}

</style>
<body>
<div id="header"><span id="title">TS</span><div id="options"></div></div>
<div id="container"></div>

<script src="./d3.v3.min.js"></script>
<script src="./railroad-data.js"></script>
<script src="./railroad-diagram.js"></script>
<script src="./core.js"></script>
</body>

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/topojson.v1.min.js