Amsterdam Rail Infrastructure Map

RailAmsterdam

English

Map made using D3.js of all tram/metro/train lines and stations and stops in Amsterdam. It's open-source under GNU General Public License v3.0.

Nederlands

Kaart van alle tram/metro/trein lijnen en haltes/stations in Amsterdam en omstreken gemaakt met D3.js en open data van de gemeente Amsterdam en NS. Open source onder GNU General Public License v3.0

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .path {
    stroke-linejoin: round;
  }
  .label {
    font-size: small;
    text-anchor: start;
    fill: black;
  }
  body {
    text-align: center;
  }
  .buurt:hover {
    opacity: 0.65;
  }
  /*Lines*/
 .buurt-borders {
    fill: none;
    stroke: #fff;
    stroke-width: 0.4px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
    opacity: 0.7;
  }
  .stadsdeel-borders {
    fill: none;
    stroke: black;
    stroke-width: 4px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
    opacity: 0.3;
  }
  .spoor {
    fill: none;
    stroke-linejoin: round;
  }
  .train {
    stroke: black;
    stroke-width: 2;
    opacity: 0.5;
  }
  .tram {
  }
  .metro {
     stroke-dasharray: 5,1;
  }
  /*Points*/
  .station {
    fill: #ffb310;
    r: 4;
    stroke: #092869;
    stroke-width: 2;
    z-index: 3;
  }
  .stationnaam{
    z-index: 4;
    fill: black;
    font-size: x-small;
    text-anchor: middle;
  }
  .station:hover {
    stroke: #ffb310;
  }
  .halte {
    r: 1.5;
    fill: white;
    opacity: 0.8;
    z-index: -1;
  }
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>

<h1>Spoor Infrastructuur Regio Amsterdam</h1>

<p> Bron: Gemeenste Amsterdam, NS</p>
<script>
var margin = {top: 40, right: 40, bottom: 40, left: 40};

var svg = d3.select("#map"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Should really change this to 'clipExtent' instead of center
var projection = d3.geoAlbers() 
  .center([4.9, 52.366667])
  .parallels([51.5, 51.49])
  .rotate(120)
  .scale(250000)
  .translate([width / 2, height / 2]);

var path = d3.geoPath()
  .projection(projection);

var stadsdeel = {"A": "Centrum","B": "Westpoort", "E": "West", "M": "Oost", "K": "Zuid", "F": "Nieuw west", "N": "Noord", "T": "Zuidoost"}

var colorScale = d3.scaleOrdinal(d3.schemeCategory20)
    colorStadsdelen = d3.scaleOrdinal(d3.schemePastel2); //d3.schemeGreys
    colorLines = d3.scaleSequential(d3.schemeCategory20);

svg.append("text")
  .attr("x", 0)
  .attr("y", 15)
  .attr("font-size", "large")
  .attr("text-decoration", "underline")
  .attr("font-weight", "bold")
  .text("Legenda");

var y0 = 30;
var spacingy = 20
var x0 = 5
var spacingx = 55

/*Legenda*/
svg.append("line")
  .attr("class", "tram")
  .attr("stroke", colorScale(1))
  .attr("stroke-width", 7)
  .attr("y1", y0)
  .attr("y2", y0)
  .attr("x1", x0)
  .attr("x2", spacingx);
svg.append("text")
  .attr("x", spacingx + 5)
  .attr("y", y0 + 5)
  .attr("class", "label")
  .text("Tramlijn");

svg.append("line")
  .attr("class", "metro")
  .attr("stroke", colorScale())
  .attr("stroke-width", 7)
  .attr("y1", y0 + spacingy )
  .attr("y2", y0 + spacingy )
  .attr("x1", x0)
  .attr("x2", spacingx);
svg.append("text")
  .attr("x", spacingx + 5)
  .attr("y", y0 + spacingy + 5)
  .attr("class", "label")
  .text("Metrolijn");

svg.append("line")
  .attr("class", "train")
  .attr("y1", y0 + spacingy * 2)
  .attr("y2", y0 + spacingy * 2)
  .attr("x1", x0)
  .attr("x2", 50);
svg.append("text")
  .attr("x", spacingx + 5)
  .attr("y", y0 + spacingy * 2+ 5)
  .attr("class", "label")
  .text("Treinspoor");

svg.append("circle")
  .attr("class", "station")
  .attr("cx", x0 + 22)
  .attr("cy", y0 + spacingy * 3);
svg.append("text")
  .attr("class", "label")
  .attr("x", spacingx + 5)
  .attr("y", y0 + spacingy * 3 + 5)
  .text("Treinstation");

svg.append("circle")
  .attr("fill", "white")
  .attr("stroke", "black")
  .attr("r", "1.5")
  .attr("cx", x0 + 22)
  .attr("cy", y0 + spacingy * 4);
svg.append("text")
  .attr("class", "label")
  .attr("x", spacingx + 5)
  .attr("y", y0 + spacingy * 4 + 5)
  .text("Tram/metro halte");

d3.queue()
    .defer(d3.json, "buurten.json")
    .defer(d3.json, "trammetro.json")
    .defer(d3.json, "trammetrostations.geojson")
    .defer(d3.json, "spoor.geojson")
    .defer(d3.csv,  "treinstations.csv")
    .await(ready);

function ready(error, buurten, trammetrotopo, trammetrostations, spoor, treinstations) {
  if (error) throw error;

/* Areas */
  var stadsdelen = topojson.feature(buurten, buurten.objects.buurten).features;

// Draw the buurten
  svg.selectAll(".buurt")
      .data(stadsdelen)
    .enter().insert("g")
      .append("path")
        .attr("class", "buurt")
        .attr("d", path)
        // .attr("fill", "#faebc4")
        .attr("fill", function(d) { return colorStadsdelen(d.properties.Stadsdeel_code[0]) })
      .append("title")
        .text(function(d) { return stadsdeel[d.properties.Stadsdeel_code] + ": " + d.properties.Buurtcombinatie });

// Draw borders around buurten
  svg.append("path")
      .attr("class", "buurt-borders")
      .attr("d", path(topojson.mesh(buurten, buurten.objects.buurten, function(a, b) { return a !== b; })));

// Draw borders around stadsdelen
  svg.append("path")
      .attr("class", "stadsdeel-borders")
      .attr("d", path(topojson.mesh(buurten, buurten.objects.buurten, function(a, b) { return stadsdeel[a.properties.Stadsdeel_code] !== stadsdeel[b.properties.Stadsdeel_code]; })));

/* Lines */
  // Draw the tram/metro tracks
  var trammetro = topojson.feature(trammetrotopo, trammetrotopo.objects.trammetro);

// Get the number of tracks for each line
  trammetro.features.forEach(function(d) { d.properties.tracks = d.properties.Lijn.split(/ \| /g).length; });

colorLines.domain([0, d3.max(trammetro.features, function(d) { return d.properties.tracks; })]);

// Draw the train tracks
  svg.selectAll(".train")
      .data(spoor.features)
    .enter().insert("path")
        .attr("class", "spoor train")
        .attr("d", path)
      .append("title")
          .text("Treinspoor");;

/* Points */
  
  // Draw the points for the stations
  var station = svg.selectAll(".treinstations")
    .data(treinstations)
    .enter().append("circle")
      .attr("transform", function(d) { return "translate(" + projection([d["0"], d["1"]]) + ")"; })
      .attr("class", "station");
  
  // Draw name next to station point    
  svg.selectAll(".stationnaam")
      .data(treinstations)
      .enter().append("text")
        .text(function(d) { return d.name; }) //.split(" ")
        .attr("class", "stationnaam")
        .attr("x", function(d) { return projection([d["0"], d["1"]])[0] - d.name.length/3})
        .attr("y", function(d) { return projection([d["0"], d["1"]])[1] - 7})

// Draw the points for the stations
  svg.selectAll(".trammetrostations")
    .data(trammetrostations.features)
    .enter().append("circle")
      .attr("transform", function (d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
      .attr("class", function (d) { return "halte " + d.properties.Modaliteit.toLowerCase() });

};
</script>

Modified http://d3js.org/d3.v4.min.js to a secure url

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

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js

https://d3js.org/d3-geo-projection.v1.min.js

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

https://npmcdn.com/@turf/turf/turf.min.js