Administrative divisions of Tokyo from 1920

Generational changes in administrative divisions of Tokyo Metropolitan between 1920 and 2016. Tokyo has numerous outlying islands, but they don't show up on the canvas. GIS DATA source from Ministry of Land, Infrastructure, Transport and Tourism

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
svg {
    border: 1px solid #000000;
}

.map path {
  fill: white;
  stroke: black;
  stroke-width: 0.5;
}

#step-buttons {
  width: 800px;
  text-align: right;
}
</style>
<body>
<div class="map"></div>
<div id="step-buttons">
  <button id="step-prev-year">←</button>
  <span id="year-label">1920</span>
  <button id="step-next-year">→</button>
</div>
<p>GIS DATA: <a href="https://nlftp.mlit.go.jp/" target="_BLANK">nlftp.mlit.go.jp</a></p>
<p>NOTE: Isolated islands of Tokyo Metropolis don't show up on the window above.</p>

var canvas = d3.select(".map")
          .append("svg")
          .attr("width", svgWidth)
          .attr("height", svgHeight)

var jsonFiles = [
    "https://cdn.rawgit.com/unnoy/tokyo1920/master/data/tokyo/tokyo1920.json",
    "https://cdn.rawgit.com/unnoy/tokyo1920/master/data/tokyo/tokyo1950_m.json",
    "https://cdn.rawgit.com/unnoy/tokyo1920/master/data/tokyo/tokyo1955_m.json",
    "https://cdn.rawgit.com/unnoy/tokyo1920/master/data/tokyo/tokyo1960_m.json",
    "https://cdn.rawgit.com/unnoy/tokyo1920/master/data/tokyo/tokyo1965_m.json",
    "https://cdn.rawgit.com/unnoy/tokyo1920/master/data/tokyo/tokyo1970.json",
    "https://cdn.rawgit.com/unnoy/tokyo1920/master/data/tokyo/tokyo1975.json",
    "https://cdn.rawgit.com/unnoy/tokyo1920/master/data/tokyo/tokyo1980.json",
    "https://cdn.rawgit.com/unnoy/tokyo1920/master/data/tokyo/tokyo1985.json",
    "https://cdn.rawgit.com/unnoy/tokyo1920/master/data/tokyo/tokyo1995.json",
    "https://cdn.rawgit.com/unnoy/tokyo1920/master/data/tokyo/tokyo2000.json",
    "https://cdn.rawgit.com/unnoy/tokyo1920/master/data/tokyo/tokyo2005_m.json",
    "https://cdn.rawgit.com/unnoy/tokyo1920/master/data/tokyo/tokyo2011_m.json",
    "https://cdn.rawgit.com/unnoy/tokyo1920/master/data/tokyo/tokyo2016_m.json"
  ];
  
  var geoDatas = [];

var tokyo = canvas.append("g")
          .attr("id", "tokyo")

var cityLabel = canvas.append("text")
          .attr("id", "city-label")
          .attr("x", "520")
          .attr("y", "420")
          .attr("font-family", "sans-serif")
          .attr("font-size", "20px")
          .attr("fill", "black")

var jsonLabel = canvas.append("text")
          .attr("id", "json-label")
          .attr("x", "400")
          .attr("y", "20")
          .attr("font-family", "sans-serif")
          .attr("color", "grey")
          .attr("font-size", "10px")

// step current year
  var currentIndex = 0;
  document.getElementById("step-prev-year").addEventListener("click", function () {
    currentIndex--;
    if (0 > currentIndex) {
      currentIndex = jsonFiles.length - 1;
    }
    updateMap();
  },false);
  
  document.getElementById("step-next-year").addEventListener("click", function () {
    currentIndex++;
    updateMap();
  },false);

updateMap();
  var selectedCity = "_";
  function updateMap() {
    var data = geoDatas[currentIndex];
    if (!data) {
      currentIndex = 0;
      setTimeout(function () {
        updateMap();
      }, 500);
      return;
    }
    //"data/tokyo/tokyo1920_m.json"
    var src = jsonFiles[currentIndex];
    jsonLabel.text(src);
    var yearStr = "";
    //yearStr = src.replace(/[\/\.\_a-z]/g, "");
    yearStr = src.substr(src.match(/\d+\_?m?\.json$/).index,4);
    document.getElementById("year-label").innerHTML= "西暦" + yearStr + "年";

var mercator = d3.geo.mercator()
            //.center(d3.geo.centroid(data))
            .center([139.45, 35.68])
            .translate([svgWidth / 2, svgHeight / 2])
            .scale(40000)

//var projection = d3.geo.conicEquidistantJapan();

var path = d3.geo.path()
            .projection(mercator)

// add
    var cities = tokyo.selectAll("path")
            .data(data.features)

// new
    cities.enter()
            .append("path")
            .attr("d", path)
            .style("fill", function (d, i) {
              return "#aca";
              //console.log('new:'+i);
              //return "hsl(" + i + ", 80%, 60%)";
            })

// remove
    cities.exit().remove();

// update
    cities.attr("d", path)
            .style("fill", function (d, i) {
              if (cityExists(d)) {
                label = getCityName(d);
                cityLabel.text(label);
                return "blue";
              }
              return "#aca";
            })
            .on("mouseover", function (d, i) {
              var label = "";
              label = getCityName(d);
              cityLabel.text(label);

if(!cityExists(d)){
                d3.select(this)
                      .transition()
                      .style("fill", "hsl(" + i + ", 80%, 60%)")
              }
            }).on("mouseout", function (d, i) {
              if(!cityExists(d)){
                d3.select(this)
                      .transition()
                      .delay(500)
                      .duration(1500)
                      .style("fill", "#aca");
              }
            }).on("click", function (d, i) {
              selectedCity = d.properties["N03_004"];
              if (!selectedCity) {
                selectedCity = d.properties["N03_003"];
              }
              updateMap();
            })
            .transition()
            .duration(1500)
  }
  function getCityName(d) {
    var label = "";
    if (d.properties["N03_003"]) {
      label += d.properties["N03_003"];
    }
    if (d.properties["N03_004"]) {
      label += d.properties["N03_004"];
    }
    if (d.properties["N03_007"]) {
      label += "[" + d.properties["N03_007"] + "]";
    }
    return label;
  }

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

https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/2.1.0/d3-geo-projection.min.js