D3 Examples - Train Viz

xxxxxxxxxx
 
<!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="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script-->
<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>
​
    