shimizu · September 7, 2020 08:33
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/election.tsv b/election.tsv
diff --git a/event.tsv b/event.tsv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="jp">
  <head>
    <style>
      html, body {
        margin:0px;
        padding:0px;
      }  
      #stage {
        width: 99.8%;
        height: 500px;
        border: 1px solid gray;
      }

      .heads circle, .legendLayer circle{
        stroke:black;
      }

      .投票率{
        fill:red;
      }
      .比較第一党議席率{
        fill:blue;
      }

      .adminLabel , .legendLabel, .warekiLabel{
        font-size: 11px;
      }
      .eventLabel {
        font-size: 10px;
      }



      .axis--y line{
        stroke-dasharray: 1;    
      }

    </style>    
  </head>
  <body>
    <div id="stage"></div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>    
    <script src="index.js"></script>

  </body>
 </html>
diff --git a/index.js b/index.js
 !(function(){
  var tPrs = d3.timeParse("%Y年%m月%d日");
  var dateStart = new Date(1889, 1, 1);
  var dateEnd = new Date(2019, 1, 1);
  
  var index = { election: 0, wareki: 1, event: 2, seats: "比較第一党議席率", vote: "投票率" };
  var chartMargin = { top: 60, left: 40, bottom: 120, right: 20 };
  
  
  d3
    .queue()
    .defer(d3.tsv, "election.tsv")
    .defer(d3.tsv, "wareki.tsv")
    .defer(d3.tsv, "event.tsv")
    .awaitAll(main);
  
  function main(error, data) {
    data[index.election].forEach(castNumber);
    data[index.wareki].forEach(castNumber);
    data[index.event].forEach(castNumber);
  
    data[index.election].forEach(castElectionData);
    data[index.wareki].forEach(castDate);
    data[index.event].forEach(castDate);
  
    var stage = d3.select("#stage").datum(data);
  
    var addVotePinhead = createPinhead(index.vote);
    var addSeatsPinhead = createPinhead(index.seats);
  
    stage
      .call(initStage)
      .call(initScale)
      .call(addLegend)
      .call(addYAxis)
      .call(addXAxis)
      .call(addPinNeck)
      .call(addVotePinhead)
      .call(addSeatsPinhead)
      .call(addWareki)
      .call(addPointEvent)
      .call(addRangeEvent)
      .call(addAdministration)
      .call(addZoom);
  }
  
  function castNumber(d) {
    Object.keys(d).forEach(function(key) {
      if (!isNaN(+d[key])) d[key] = +d[key];
    });
  }
  function castDate(d) {
    d.sdate = tPrs(d.sdate);
    d.edate = tPrs(d.edate);
  }
  function castElectionData(d) {
    var dateObje = tPrs(d["投票年"] + d["投票日"]);
    var adminEndDate = tPrs(d["任期満了西暦"] + d["任期満了日"]);
    d.sdate = dateObje;
    d.edate = adminEndDate ? adminEndDate : null;
  }
  
  function initStage(_selection) {
    var svg = _selection.append("svg");
  
    var clipRect = svg
      .append("defs")
      .append("clipPath")
      .attr("id", "clip")
      .append("rect");
  
    var legendLayer = svg.append("g").classed("legendLayer", true);
    var axisLayer = svg.append("g").classed("axisLayer", true);
    var charLayer = svg.append("g").classed("chartLayer", true);
  
    var parentNode = _selection.node();
    var parentWidth = parentNode.clientWidth;
    var parentHeight = parentNode.clientHeight;
  
    var chartWidth = parentWidth - (chartMargin.left + chartMargin.right);
    var chartHeight = parentHeight - (chartMargin.top + chartMargin.bottom);
  
    svg.attr("width", parentWidth).attr("height", parentHeight);
  
    clipRect.attr("width", chartWidth).attr("height", parentHeight);
  
    axisLayer
      .attr("width", chartWidth)
      .attr("height", chartHeight)
      .attr(
        "transform",
        "translate(" + [chartMargin.left, chartMargin.top] + ")"
      );
    charLayer
      .attr("width", chartWidth)
      .attr("height", chartHeight)
      .attr("transform", "translate(" + [chartMargin.left, chartMargin.top] + ")")
      .attr("clip-path", "url(#clip)");
  }
  
  function initScale(_selection) {
    var chartWidth = _selection.select(".chartLayer").attr("width");
    var chartHeight = _selection.select(".chartLayer").attr("height");
  
    var xScale = d3
      .scaleTime()
      .domain([dateStart, dateEnd])
      .range([0, chartWidth]);
  
    var yScale = d3
      .scaleLinear()
      .domain([0, 100])
      .range([chartHeight, 0]);
  
    _selection._xScale = xScale;
    _selection._yScale = yScale;
  }
  
  function addLegend(_selection) {
    var legendLayer = _selection.select(".legendLayer");
  
    var g = legendLayer
      .selectAll("g")
      .data([index.vote, index.seats])
      .enter()
      .append("g")
      .attr("transform", function(d, i) {
        return (
          "translate(" + [chartMargin.left + i * 80, chartMargin.top / 2] + ")"
        );
      });
  
    g
      .append("circle")
      .attr("r", 5.5)
      .attr("y", -4)
      .attr("class", function(d) {
        return d;
      });
  
    g
      .append("text")
      .attr("class", "legendLabel")
      .attr("dominant-baseline", "middle")
      .attr("x", 6 + 3)
      .text(function(d) {
        return d;
      });
  }
  
  function addZoom(_selection) {
    var xScale = _selection._xScale;
    var yScale = _selection._yScale;
    var chartWidth = _selection.select(".chartLayer").attr("width");
  
    var zoom = d3
      .zoom()
      .scaleExtent([1, 32])
      .on("zoom", zoomed);
  
    zoom
      .translateExtent([[0, 0], [chartWidth, 0]])
      .extent([[0, 0], [chartWidth, 0]]);
  
    _selection
      .select("svg")
      .call(zoom)
      .transition()
      .duration(1500)
      .call(
        zoom.transform,
        d3.zoomIdentity
          .scale(chartWidth / (xScale(dateEnd) - xScale(dateStart)))
          .translate(xScale(dateStart), 0)
      );
  
    function zoomed() {
      var t = d3.event.transform;
      var xt = t.rescaleX(xScale);
  
      _selection._xScale = xt;
      _selection._update();
    }
  }
  
  function addXAxis(_selection) {
    var axisLayer = _selection.select(".axisLayer");
    var g = axisLayer.append("g").attr("class", "axis--x");
  
    var height = axisLayer.attr("height");
  
    _selection._xAxis = d3.axisTop(_selection._xScale);
  
    g.attr("transform", "translate(" + [0, 0] + ")");
    g.call(_selection._xAxis);
    g.selectAll(".domain").style("display", "none");
  
    var update = function() {
      var t = d3.event.transform;
      var tFmt = d3.timeFormat("%Y-%m");
      if (t.k < 30) tFmt = d3.timeFormat("%Y");
      _selection._xAxis.scale(_selection._xScale).tickFormat(function(d) {
        return tFmt(d);
      });
      g.call(_selection._xAxis);
    };
  
    bindUpdate(_selection, update);
  }
  
  function addYAxis(_selection) {
    var axisLayer = _selection.select(".axisLayer");
    var g = axisLayer.append("g").attr("class", "axis--y");
  
    var width = axisLayer.attr("width");
  
    _selection._yAxis = d3
      .axisLeft(_selection._yScale)
      .tickSizeOuter(0)
      .tickSizeInner(-width)
      .tickValues([30, 50, 70])
      .tickFormat(function(d) {
        return d + "%";
      });
  
    g.attr("transform", "translate(" + [0, 0] + ")");
  
    g.call(_selection._yAxis);
  
    g.selectAll(".domain").style("display", "none");
  }
  
  function createPinhead(_index) {
    return function(_selection) {
      var data = _selection.datum();
      var election = data[index.election];
  
      var chartLayer = _selection.select(".chartLayer");
      var pinChart = chartLayer.selectAll(".pinChart").data([election]);
  
      var enterPinChart = pinChart
        .enter()
        .append("g")
        .classed("pinChart", true);
  
      var g = d3
        .select(".pinChart")
        .append("g")
        .attr("class", "heads " + _index);
  
      var chartHeight = chartLayer.attr("height");
  
      var yProp = function(d) {
        return _selection._yScale(d[_index]);
      };
      var hFn = function(d) {
        return chartHeight - yProp(d);
      };
      var yFn = function(d) {
        return yProp(d);
      };
  
      var neckWidth = 1;
  
      var selectHeads = g.selectAll("circle").data(function(d) {
        return d;
      });
  
      var enterHeads = selectHeads.enter().append("circle"); //.style("opacity", 0);
  
      var heads = selectHeads
        .merge(enterHeads)
        .attr("r", 6)
        .attr("cy", yFn);
  
      heads
        .transition()
        .duration(1000)
        .delay(function(d, i) {
          return i * 100;
        })
        .style("opacity", 1);
  
      var update = function() {
        heads.attr("cx", function(d) {
          return _selection._xScale(d.sdate);
        });
      };
  
      bindUpdate(_selection, update);
    };
  }
  
  function addPinNeck(_selection) {
    var data = _selection.datum();
    var election = data[index.election];
  
    var chartLayer = _selection.select(".chartLayer");
    var pinChart = chartLayer.selectAll(".pinChart").data([election]);
  
    var enterPinChart = pinChart
      .enter()
      .append("g")
      .classed("pinChart", true);
  
    d3
      .select(".pinChart")
      .append("g")
      .attr("class", "necks");
  
    var neckWidth = 1;
    var chartHeight = chartLayer.attr("height");
  
    var voteProp = function(d) {
      return +_selection._yScale(d[index.vote]);
    };
    var seatsProp = function(d) {
      return +_selection._yScale(d[index.seats]);
    };
  
    var yFn = function(d) {
      var extent = d3.extent([voteProp(d), seatsProp(d)]);
      return extent[0];
    };
  
    var hFn = function(d) {
      var extent = d3.extent([voteProp(d), seatsProp(d)]);
      return extent[1] - extent[0];
    };
  
    var selectNecks = pinChart
      .merge(enterPinChart)
      .select(".necks")
      .selectAll(".neck")
      .data(function(d) {
        return d;
      });
  
    var enterNecks = selectNecks
      .enter()
      .append("rect")
      .attr("class", "neck"); //.style("opacity", 0);
  
    var necks = selectNecks
      .merge(enterNecks)
      .attr("width", neckWidth)
      .attr("height", hFn)
      .attr("y", yFn);
  
    necks
      .transition()
      .duration(1000)
      .delay(function(d, i) {
        return i * 100;
      })
      .style("opacity", 1);
  
    var update = function() {
      necks.attr("x", function(d) {
        return _selection._xScale(d.sdate) - neckWidth / 2;
      });
    };
  
    bindUpdate(_selection, update);
  }
  
  function addWareki(_selection) {
    var chartLayer = _selection.select(".chartLayer");
    var chartHeight = chartLayer.attr("height");
    var chartWidth = chartLayer.attr("width");
    var Y = 0;
    var data = _selection.datum();
    var wareki = data[index.wareki];
  
    var chartLayer = _selection.select(".chartLayer");
    var g = chartLayer.append("g").attr("class", "warekiLayer");
  
    var line = g
      .selectAll(".warekiLine")
      .data(wareki)
      .enter()
      .append("path")
      .attr("class", "warekiLine")
      .attr("stroke", "black")
      .attr("fill", "none");
  
    var pathGen = function(d) {
      var sx = _selection._xScale(d.sdate);
      var ex = d.edate == null ? chartWidth : _selection._xScale(d.edate);
      var str = "M ";
      str += [sx, Y].join(" ");
      str += "L ";
      str += [ex, Y].join(" ");
      if (d.edate) {
        str += "L ";
        str += [ex, Y + 12].join(" ");
      }
      return str;
    };
  
    var label = g
      .selectAll(".warekiLabel")
      .data(wareki)
      .enter()
      .append("text")
      .attr("class", "warekiLabel")
      .attr("text-anchor", "middle")
      .attr("y", 12);
  
    var labelGen = function(d) {
      var sx = _selection._xScale(d.sdate);
      return "translate(" + [sx, Y] + ")";
    };
  
    var labelDx = function(d) {
      var sx = _selection._xScale(d.sdate);
      var ex = d.edate == null ? chartWidth : _selection._xScale(d.edate);
      var center = (ex - sx) / 2;
      return center;
    };
  
    var update = function() {
      line.attr("d", pathGen);
  
      label
        .attr("transform", labelGen)
        .attr("x", labelDx)
        .text(function(d) {
          return d["name"];
        });
    };
  
    bindUpdate(_selection, update);
  }
  
  function addPointEvent(_selection) {
    var chartLayer = _selection.select(".chartLayer");
    var Y = chartLayer.attr("height") ;
    var data = _selection.datum();
    var event = data[index.event];
    var eventPoint = event.filter(function(d) {
      return d.edate == null;
    });
  
    var g = chartLayer.append("g").attr("class", "pointEventLayer");
  
    var circle = g
      .selectAll(".pointEventLayer")
      .data(eventPoint)
      .enter()
      .append("circle")
      .attr("class", "eventCircle")
      .attr("r", 2)
      .attr("cy", function(d) {
        return d.paragraph;
      });
  
    var circleGen = function(d) {
      var sx = _selection._xScale(d.sdate);
      return "translate(" + [sx, Y] + ")";
    };
  
    var label = g
      .selectAll(".eventiLabel")
      .data(eventPoint)
      .enter()
      .append("text")
      .attr("class", "eventLabel")
      .attr("dominant-baseline", "middle")
      .attr("text-anchor", "start")
      .attr("x", 6)
      .attr("y", function(d, i) {
        return d.paragraph;
      });
  
    var labelGen = function(d) {
      var sx = _selection._xScale(d.sdate);
      return "translate(" + [sx, Y] + ")";
    };
  
    var update = function() {
      circle.attr("transform", circleGen);
      label.attr("transform", labelGen).text(function(d) {
        return d["event"];
      });
    };
  
    bindUpdate(_selection, update);
  }
  
  function addRangeEvent(_selection) {
    var chartLayer = _selection.select(".chartLayer");
    var Y = chartLayer.attr("height") - 42;
    var data = _selection.datum();
    var event = data[index.event];
    var eventRange = event.filter(function(d) {
      return d.edate != null;
    });
  
    var g = chartLayer.append("g").attr("class", "rangeEventLayer");
  
    var line = g
      .selectAll(".warekiLine")
      .data(eventRange)
      .enter()
      .append("path")
      .attr("class", "warekiLine")
      .attr("stroke", "black")
      .attr("fill", "none");
  
    var pathGen = function(d, i) {
      var sx = _selection._xScale(d.sdate);
      var ex = _selection._xScale(d.edate);
      var str = "M ";
      var y = Y + d.paragraph;
  
      str += [sx, y].join(" ");
      str += "L ";
      str += [ex, y].join(" ");
      return str;
    };
  
    var sCircle = g
      .selectAll(".eventSCircle")
      .data(eventRange)
      .enter()
      .append("circle")
      .attr("class", "eventSCircle")
      .attr("r", 2);
  
    var eCircle = g
      .selectAll(".eventECircle")
      .data(eventRange)
      .enter()
      .append("circle")
      .attr("class", "eventECircle")
      .attr("r", 2);
  
    var sCircleGen = function(d) {
      var sx = _selection._xScale(d.sdate);
      var y = Y + d.paragraph;
      return "translate(" + [sx, y] + ")";
    };
  
    var eCircleGen = function(d, i) {
      var sx = _selection._xScale(d.edate);
      var y = Y + d.paragraph;
      return "translate(" + [sx, y] + ")";
    };
  
    var label = g
      .selectAll(".eventLabel")
      .data(eventRange)
      .enter()
      .append("text")
      .attr("class", "eventLabel")
      .attr("text-anchor", "middle")
      .attr("y", 12);
  
    var labelGen = function(d, i) {
      var sx = _selection._xScale(d.sdate);
      var y = Y + d.paragraph;
      return "translate(" + [sx, y] + ")";
    };
  
    var labelDx = function(d) {
      var sx = _selection._xScale(d.sdate);
      var ex = _selection._xScale(d.edate);
      var center = (ex - sx) / 2;
      return center;
    };
  
    var update = function() {
      line.attr("d", pathGen);
      sCircle.attr("transform", sCircleGen);
      eCircle.attr("transform", eCircleGen);
  
      label
        .attr("transform", labelGen)
        .attr("x", labelDx)
        .text(function(d) {
          return d["event"];
        });
    };
  
    bindUpdate(_selection, update);
  }
  
  function addAdministration(_selection) {
    var chartLayer = _selection.select(".chartLayer");
    var Y = chartLayer.attr("height") - 60;
    var data = _selection.datum();
    var election = data[index.election];
  
    var g = chartLayer.append("g").attr("class", "adminLayer");
  
    var line = g
      .selectAll(".adminLine")
      .data(election)
      .enter()
      .append("path")
      .attr("class", "adminLine")
      .attr("stroke", "black")
      .attr("fill", "none");
  
    var pathGen = function(d) {
      var sx = _selection._xScale(d.sdate);
      var ex = _selection._xScale(d.edate);
      var str = "M ";
      str += [sx, Y - 10].join(" ");
      str += "L ";
      str += [sx, Y].join(" ");
      str += "L ";
      str += [ex, Y].join(" ");
      str += "L ";
      str += [ex, Y - 10].join(" ");
      return str;
    };
  
    var label = g
      .selectAll(".adminLabel")
      .data(election)
      .enter()
      .append("text")
      .attr("class", "adminLabel")
      .attr("text-anchor", "middle")
      .attr("y", 12);
  
    var labelGen = function(d) {
      var sx = _selection._xScale(d.sdate);
      return "translate(" + [sx, Y] + ")";
    };
  
    var labelDx = function(d) {
      var sx = _selection._xScale(d.sdate);
      var ex = _selection._xScale(d.edate);
      var center = (ex - sx) / 2;
      return center;
    };
  
    var update = function() {
      var t = d3.event.transform;
      line.attr("d", pathGen);
      label
        .attr("transform", labelGen)
        .attr("x", labelDx)
        .text(function(d) {
          if (t.k > 3) return d["内閣"];
        });
    };
  
    bindUpdate(_selection, update);
  }
  
  function bindUpdate(_selection, update) {
    if (!_selection._updateFanctions) _selection._updateFanctions = [];
  
    _selection._updateFanctions.push(update);
  
    _selection._update = function(data) {
      _selection._updateFanctions.forEach(function(f) {
        f(data);
      });
    };
  }

 }());

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/wareki.tsv b/wareki.tsv
回	実施内閣	内閣	和暦	投票年	投票日	曜	投票率	解散	任期満了和暦	任期満了西暦	任期満了日	比較第一党	議席数	比較第一党議席率	備考
第1回	山縣1	第1次山縣内閣	明治23年	1890年	7月1日	火曜	93.91	解散	明治24年	1891年	12月25日	立憲自由党	130	43.33	議院内閣制度導入。初の衆議院議員総選挙
第2回	松方1	第1次松方内閣	明治25年	1892年	2月15日	月曜	91.59	解散	明治26年	1893年	12月30日	立憲自由党	94	31.33
第3回	伊藤2	第2次伊藤内閣	明治27年	1894年	3月1日	金曜	88.76	解散	明治27年	1894年	6月2日	立憲自由党	120	40
第4回	伊藤2	第2次伊藤内閣	明治27年	1894年	9月1日	土曜	84.84	解散	明治30年	1897年	12月25日	立憲自由党	107	35.66
第5回	伊藤3	第3次伊藤内閣	明治31年	1898年	3月15日	火曜	87.5	解散	明治31年	1898年	6月10日	立憲自由党	105	35	進歩党が104議席で第2党
第6回	大隈1	第1次大隈内閣	明治31年	1898年	8月10日	水曜	79.91	任期満了	明治35年	1902年	8月10日	憲政本党	124	41.33
第7回	桂1	第1次桂内閣	明治35年	1902年	8月10日	日曜	88.39	解散	明治35年	1902年	12月28日	立憲政友会	191	50.79	秘密投票を導入
第8回	桂1	第1次桂内閣	明治36年	1903年	3月1日	日曜	86.17	解散	明治36年	1903年	12月11日	立憲政友会	175	46.54
第9回	桂1	第1次桂内閣	明治37年	1904年	3月1日	火曜	86.06	任期満了	明治41年	1908年	3月1日	立憲政友会	133	35.09
第10回	西園寺1	第1次西園寺内閣	明治41年	1908年	5月15日	金曜	85.29	任期満了	明治45年	1912年	5月15日	立憲政友会	187	49.34
第11回	西園寺2	第2次西園寺内閣	明治45年	1912年	5月15日	水曜	89.58	解散	大正3年	1914年	12月25日	立憲政友会	209	54.85
第12回	大隈2	第2次大隈内閣	大正4年	1915年	3月25日	木曜	92.13	解散	大正6年	1917年	1月25日	立憲同志会	153	40.15
第13回	寺内	寺内内閣	大正6年	1917年	4月20日	金曜	91.92	解散	大正9年	1920年	2月26日	立憲政友会	165	43.3
第14回	原	原内閣	大正9年	1920年	5月10日	月曜	86.73	解散	大正13年	1924年	1月31日	立憲政友会	278	59.91
第15回	清浦	清浦内閣	大正13年	1924年	5月10日	土曜	91.18	解散	昭和3年	1928年	1月21日	憲政会	151	32.54
第16回	田中義一	田中義一内閣	昭和3年	1928年	2月20日	金曜	80.36	解散	昭和5年	1930年	1月21日	立憲政友会	218	46.78	男子普通選挙開始。立憲民政党が216議席で第2党
第17回	濱口	濱口内閣	昭和5年	1930年	2月20日	木曜	83.34	解散	昭和7年	1932年	1月21日	立憲民政党	273	58.58
第18回	犬養	犬養内閣	昭和7年	1932年	2月20日	土曜	81.68	解散	昭和11年	1936年	1月21日	立憲政友会	301	64.59
第19回	岡田	岡田内閣	昭和11年	1936年	2月20日	木曜	78.65	解散	昭和12年	1937年	3月31日	立憲民政党	205	43.99
第20回	林	林内閣	昭和12年	1937年	4月30日	金曜	73.31	任期満了	昭和17年	1942年	4月30日	立憲民政党	179	38.41	食い逃げ解散。立憲政友会が175議席で第2党
第21回	東條	東條内閣	昭和17年	1942年	4月30日	木曜	83.16	解散	昭和20年	1945年	12月18日	大政翼賛会	381	81.75	翼賛選挙。特例として任期を1年延長した上での任期満了
第22回	幣原	幣原内閣	昭和21年	1946年	4月10日	水曜	72.08	解散	昭和22年	1947年	3月31日	日本自由党	141	30.25	男女普通選挙開始
第23回	吉田1	第1次吉田内閣	昭和22年	1947年	4月25日	金曜	67.95	解散	昭和23年	1948年	12月23日	日本社会党	143	30.68	旧憲法下最後の総選挙。片山内閣成立
第24回	吉田2	第2次吉田内閣	昭和24年	1949年	1月23日	日曜	74.04	解散	昭和27年	1952年	8月28日	民主自由党	264	56.65	新憲法下最初の総選挙。馴れ合い解散
第25回	吉田3	第3次吉田内閣	昭和27年	1952年	10月1日	水曜	76.43	解散	昭和28年	1953年	3月14日	自由党	240	51.5	抜き打ち解散
第26回	吉田4	第4次吉田内閣	昭和28年	1953年	4月19日	日曜	74.22	解散	昭和30年	1955年	1月24日	自由党吉田派	199	42.7	バカヤロー解散
第27回	鳩山一郎1	第1次鳩山一郎内閣	昭和30年	1955年	2月27日	日曜	75.84	解散	昭和33年	1958年	4月25日	日本民主党	185	39.61	天の声解散
第28回	岸1	第1次岸内閣	昭和33年	1958年	5月22日	木曜	76.99	解散	昭和35年	1960年	10月24日	自由民主党	287	61.45	話し合い解散。55年体制初の総選挙
第29回	池田1	第1次池田内閣	昭和35年	1960年	11月20日	日曜	73.51	解散	昭和38年	1963年	10月23日	自由民主党	296	63.38
第30回	池田2	第2次池田内閣	昭和38年	1963年	11月21日	木曜	71.14	解散	昭和41年	1966年	12月27日	自由民主党	283	60.59
第31回	佐藤1	第1次佐藤内閣	昭和42年	1967年	1月29日	日曜	73.99	解散	昭和44年	1969年	12月2日	自由民主党	277	56.99	黒い霧解散
第32回	佐藤2	第2次佐藤内閣	昭和44年	1969年	12月27日	土曜	68.51	解散	昭和47年	1972年	11月13日	自由民主党	288	59.25
第33回	田中角栄1	第1次田中角栄内閣	昭和47年	1972年	12月10日	日曜	71.76	任期満了	昭和51年	1976年	12月9日	自由民主党	271	55.19
第34回	三木	三木内閣	昭和51年	1976年	12月5日	日曜	73.45	解散	昭和54年	1979年	9月7日	自由民主党	249	48.72	ロッキード選挙。日本国憲法下で初の任期満了による衆議院議員総選挙
第35回	大平1	第1次大平内閣	昭和54年	1979年	10月7日	日曜	68.01	解散	昭和55年	1980年	5月19日	自由民主党	248	48.53
第36回	大平2	第2次大平内閣	昭和55年	1980年	6月22日	日曜	74.57	解散	昭和58年	1983年	11月28日	自由民主党	284	55.57	ハプニング解散。衆参同日選挙、大平正芳首相急逝
第37回	中曽根1	第1次中曽根内閣	昭和58年	1983年	12月18日	日曜	67.94	解散	昭和61年	1986年	6月2日	自由民主党	250	48.92	田中判決解散
第38回	中曽根2改2	第2次中曽根内閣 (第2次改造)	昭和61年	1986年	7月6日	日曜	71.4	解散	平成2年	1990年	1月24日	自由民主党	300	58.59	死んだふり解散。衆参同日選挙
第39回	海部1	第1次海部内閣	平成2年	1990年	2月18日	日曜	73.31	解散	平成5年	1993年	6月18日	自由民主党	275	53.71
第40回	宮澤改	宮澤内閣 (改造)	平成5年	1993年	7月18日	日曜	67.26	解散	平成8年	1996年	9月27日	自由民主党	223	43.63	嘘つき解散。55年体制崩壊、細川内閣成立
第41回	橋本1	第1次橋本内閣	平成8年	1996年	10月20日	日曜	59.65	解散	平成12年	2000年	6月2日	自由民主党	239	47.8	この回より小選挙区比例代表並立制
第42回	森1	第1次森内閣	平成12年	2000年	6月25日	日曜	62.49	解散	平成15年	2003年	10月10日	自由民主党	233	48.54	神の国解散。比例区の定数削減
第43回	小泉1改2	第1次小泉内閣 (第2次改造)	平成15年	2003年	11月9日	日曜	59.86	解散	平成17年	2005年	8月8日	自由民主党	237	49.37
第44回	小泉2改	第2次小泉内閣 (改造)	平成17年	2005年	9月11日	日曜	67.51	解散	平成21年	2009年	7月21日	自由民主党	296	61.66	郵政解散
第45回	麻生	麻生内閣	平成21年	2009年	8月30日	日曜	69.28	解散	平成24年	2012年	11月16日	民主党	308	64.16	民主党第1党で民社国連立政権による鳩山由紀夫内閣成立、自民党第1党から転落
第46回	野田改3	野田内閣 (第3次改造)	平成24年	2012年	12月16日	日曜	59.32	解散	平成26年	2014年	11月21日	自由民主党	294	61.25	近いうち解散。自民党第1党で自公連立政権による第2次安倍内閣成立、民主党第1党から転落
第47回	安倍2改	第2次安倍内閣 (改造)	平成26年	2014年	12月14日	日曜	52.66	解散	平成29年	2017年	9月28日	自由民主党	291	61.26	アベノミクス解散
第48回	安倍3改3	第3次安倍内閣 (第3次改造)	平成29年	2017年	10月22日	日曜	53.68					自由民主党	284	61.08	18歳選挙権導入後最初の衆議院議員総選挙
sdate	edate	event	type	paragraph
1889年2月11日		大日本帝国憲法公布	法律	0
1894年7月25日	1895年11月30日	日清戦争	戦争	0
1904年2月8日	1905年9月5日	日露戦争	戦争	0
1914年7月28日	1918年11月11日	第一次世界大戦	戦争	0
1920年3月1日		戦後恐慌	経済	0
1923年9月11日		関東大震災	震災	12
1923年10月1日		震災恐慌	経済	24
1924年3月26日		普通選挙法公布	法律	36
1924年4月22日		治安維持法公布	法律	48
1927年3月1日		昭和金融恐慌	経済	60
1929年10月24日		世界恐慌	経済	72
1939年9月1日	1945年9月2日	第二次世界大戦	戦争	0
1945年8月14日	1952年4月28日	米軍(GHQ)占領時代	戦争	18
1954年12月1日	1973年11月30日	高度経済成長期	経済	0
1991年3月1日	2002年1月31日	失われた10年	経済	0
1991年3月1日		バブル崩壊	経済	0
2008年9月15日		リーマン・ショック	経済	0
	<!DOCTYPE html>
	<html lang="jp">
	<head>
	<style>
	html, body {
	margin:0px;
	padding:0px;
	}
	#stage {
	width: 99.8%;
	height: 500px;
	border: 1px solid gray;
	}

	.heads circle, .legendLayer circle{
	stroke:black;
	}

	.投票率{
	fill:red;
	}
	.比較第一党議席率{
	fill:blue;
	}

	.adminLabel , .legendLabel, .warekiLabel{
	font-size: 11px;
	}
	.eventLabel {
	font-size: 10px;
	}



	.axis--y line{
	stroke-dasharray: 1;
	}

	</style>
	</head>
	<body>
	<div id="stage"></div>

	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
	<script src="index.js"></script>

	</body>
	</html>
	!(function(){
	var tPrs = d3.timeParse("%Y年%m月%d日");
	var dateStart = new Date(1889, 1, 1);
	var dateEnd = new Date(2019, 1, 1);

	var index = { election: 0, wareki: 1, event: 2, seats: "比較第一党議席率", vote: "投票率" };
	var chartMargin = { top: 60, left: 40, bottom: 120, right: 20 };


	d3
	.queue()
	.defer(d3.tsv, "election.tsv")
	.defer(d3.tsv, "wareki.tsv")
	.defer(d3.tsv, "event.tsv")
	.awaitAll(main);

	function main(error, data) {
	data[index.election].forEach(castNumber);
	data[index.wareki].forEach(castNumber);
	data[index.event].forEach(castNumber);

	data[index.election].forEach(castElectionData);
	data[index.wareki].forEach(castDate);
	data[index.event].forEach(castDate);

	var stage = d3.select("#stage").datum(data);

	var addVotePinhead = createPinhead(index.vote);
	var addSeatsPinhead = createPinhead(index.seats);

	stage
	.call(initStage)
	.call(initScale)
	.call(addLegend)
	.call(addYAxis)
	.call(addXAxis)
	.call(addPinNeck)
	.call(addVotePinhead)
	.call(addSeatsPinhead)
	.call(addWareki)
	.call(addPointEvent)
	.call(addRangeEvent)
	.call(addAdministration)
	.call(addZoom);
	}

	function castNumber(d) {
	Object.keys(d).forEach(function(key) {
	if (!isNaN(+d[key])) d[key] = +d[key];
	});
	}
	function castDate(d) {
	d.sdate = tPrs(d.sdate);
	d.edate = tPrs(d.edate);
	}
	function castElectionData(d) {
	var dateObje = tPrs(d["投票年"] + d["投票日"]);
	var adminEndDate = tPrs(d["任期満了西暦"] + d["任期満了日"]);
	d.sdate = dateObje;
	d.edate = adminEndDate ? adminEndDate : null;
	}

	function initStage(_selection) {
	var svg = _selection.append("svg");

	var clipRect = svg
	.append("defs")
	.append("clipPath")
	.attr("id", "clip")
	.append("rect");

	var legendLayer = svg.append("g").classed("legendLayer", true);
	var axisLayer = svg.append("g").classed("axisLayer", true);
	var charLayer = svg.append("g").classed("chartLayer", true);

	var parentNode = _selection.node();
	var parentWidth = parentNode.clientWidth;
	var parentHeight = parentNode.clientHeight;

	var chartWidth = parentWidth - (chartMargin.left + chartMargin.right);
	var chartHeight = parentHeight - (chartMargin.top + chartMargin.bottom);

	svg.attr("width", parentWidth).attr("height", parentHeight);

	clipRect.attr("width", chartWidth).attr("height", parentHeight);

	axisLayer
	.attr("width", chartWidth)
	.attr("height", chartHeight)
	.attr(
	"transform",
	"translate(" + [chartMargin.left, chartMargin.top] + ")"
	);
	charLayer
	.attr("width", chartWidth)
	.attr("height", chartHeight)
	.attr("transform", "translate(" + [chartMargin.left, chartMargin.top] + ")")
	.attr("clip-path", "url(#clip)");
	}

	function initScale(_selection) {
	var chartWidth = _selection.select(".chartLayer").attr("width");
	var chartHeight = _selection.select(".chartLayer").attr("height");

	var xScale = d3
	.scaleTime()
	.domain([dateStart, dateEnd])
	.range([0, chartWidth]);

	var yScale = d3
	.scaleLinear()
	.domain([0, 100])
	.range([chartHeight, 0]);

	_selection._xScale = xScale;
	_selection._yScale = yScale;
	}

	function addLegend(_selection) {
	var legendLayer = _selection.select(".legendLayer");

	var g = legendLayer
	.selectAll("g")
	.data([index.vote, index.seats])
	.enter()
	.append("g")
	.attr("transform", function(d, i) {
	return (
	"translate(" + [chartMargin.left + i * 80, chartMargin.top / 2] + ")"
	);
	});

	g
	.append("circle")
	.attr("r", 5.5)
	.attr("y", -4)
	.attr("class", function(d) {
	return d;
	});

	g
	.append("text")
	.attr("class", "legendLabel")
	.attr("dominant-baseline", "middle")
	.attr("x", 6 + 3)
	.text(function(d) {
	return d;
	});
	}

	function addZoom(_selection) {
	var xScale = _selection._xScale;
	var yScale = _selection._yScale;
	var chartWidth = _selection.select(".chartLayer").attr("width");

	var zoom = d3
	.zoom()
	.scaleExtent([1, 32])
	.on("zoom", zoomed);

	zoom
	.translateExtent([[0, 0], [chartWidth, 0]])
	.extent([[0, 0], [chartWidth, 0]]);

	_selection
	.select("svg")
	.call(zoom)
	.transition()
	.duration(1500)
	.call(
	zoom.transform,
	d3.zoomIdentity
	.scale(chartWidth / (xScale(dateEnd) - xScale(dateStart)))
	.translate(xScale(dateStart), 0)
	);

	function zoomed() {
	var t = d3.event.transform;
	var xt = t.rescaleX(xScale);

	_selection._xScale = xt;
	_selection._update();
	}
	}

	function addXAxis(_selection) {
	var axisLayer = _selection.select(".axisLayer");
	var g = axisLayer.append("g").attr("class", "axis--x");

	var height = axisLayer.attr("height");

	_selection._xAxis = d3.axisTop(_selection._xScale);

	g.attr("transform", "translate(" + [0, 0] + ")");
	g.call(_selection._xAxis);
	g.selectAll(".domain").style("display", "none");

	var update = function() {
	var t = d3.event.transform;
	var tFmt = d3.timeFormat("%Y-%m");
	if (t.k < 30) tFmt = d3.timeFormat("%Y");
	_selection._xAxis.scale(_selection._xScale).tickFormat(function(d) {
	return tFmt(d);
	});
	g.call(_selection._xAxis);
	};

	bindUpdate(_selection, update);
	}

	function addYAxis(_selection) {
	var axisLayer = _selection.select(".axisLayer");
	var g = axisLayer.append("g").attr("class", "axis--y");

	var width = axisLayer.attr("width");

	_selection._yAxis = d3
	.axisLeft(_selection._yScale)
	.tickSizeOuter(0)
	.tickSizeInner(-width)
	.tickValues([30, 50, 70])
	.tickFormat(function(d) {
	return d + "%";
	});

	g.attr("transform", "translate(" + [0, 0] + ")");

	g.call(_selection._yAxis);

	g.selectAll(".domain").style("display", "none");
	}

	function createPinhead(_index) {
	return function(_selection) {
	var data = _selection.datum();
	var election = data[index.election];

	var chartLayer = _selection.select(".chartLayer");
	var pinChart = chartLayer.selectAll(".pinChart").data([election]);

	var enterPinChart = pinChart
	.enter()
	.append("g")
	.classed("pinChart", true);

	var g = d3
	.select(".pinChart")
	.append("g")
	.attr("class", "heads " + _index);

	var chartHeight = chartLayer.attr("height");

	var yProp = function(d) {
	return _selection._yScale(d[_index]);
	};
	var hFn = function(d) {
	return chartHeight - yProp(d);
	};
	var yFn = function(d) {
	return yProp(d);
	};

	var neckWidth = 1;

	var selectHeads = g.selectAll("circle").data(function(d) {
	return d;
	});

	var enterHeads = selectHeads.enter().append("circle"); //.style("opacity", 0);

	var heads = selectHeads
	.merge(enterHeads)
	.attr("r", 6)
	.attr("cy", yFn);

	heads
	.transition()
	.duration(1000)
	.delay(function(d, i) {
	return i * 100;
	})
	.style("opacity", 1);

	var update = function() {
	heads.attr("cx", function(d) {
	return _selection._xScale(d.sdate);
	});
	};

	bindUpdate(_selection, update);
	};
	}

	function addPinNeck(_selection) {
	var data = _selection.datum();
	var election = data[index.election];

	var chartLayer = _selection.select(".chartLayer");
	var pinChart = chartLayer.selectAll(".pinChart").data([election]);

	var enterPinChart = pinChart
	.enter()
	.append("g")
	.classed("pinChart", true);

	d3
	.select(".pinChart")
	.append("g")
	.attr("class", "necks");

	var neckWidth = 1;
	var chartHeight = chartLayer.attr("height");

	var voteProp = function(d) {
	return +_selection._yScale(d[index.vote]);
	};
	var seatsProp = function(d) {
	return +_selection._yScale(d[index.seats]);
	};

	var yFn = function(d) {
	var extent = d3.extent([voteProp(d), seatsProp(d)]);
	return extent[0];
	};

	var hFn = function(d) {
	var extent = d3.extent([voteProp(d), seatsProp(d)]);
	return extent[1] - extent[0];
	};

	var selectNecks = pinChart
	.merge(enterPinChart)
	.select(".necks")
	.selectAll(".neck")
	.data(function(d) {
	return d;
	});

	var enterNecks = selectNecks
	.enter()
	.append("rect")
	.attr("class", "neck"); //.style("opacity", 0);

	var necks = selectNecks
	.merge(enterNecks)
	.attr("width", neckWidth)
	.attr("height", hFn)
	.attr("y", yFn);

	necks
	.transition()
	.duration(1000)
	.delay(function(d, i) {
	return i * 100;
	})
	.style("opacity", 1);

	var update = function() {
	necks.attr("x", function(d) {
	return _selection._xScale(d.sdate) - neckWidth / 2;
	});
	};

	bindUpdate(_selection, update);
	}

	function addWareki(_selection) {
	var chartLayer = _selection.select(".chartLayer");
	var chartHeight = chartLayer.attr("height");
	var chartWidth = chartLayer.attr("width");
	var Y = 0;
	var data = _selection.datum();
	var wareki = data[index.wareki];

	var chartLayer = _selection.select(".chartLayer");
	var g = chartLayer.append("g").attr("class", "warekiLayer");

	var line = g
	.selectAll(".warekiLine")
	.data(wareki)
	.enter()
	.append("path")
	.attr("class", "warekiLine")
	.attr("stroke", "black")
	.attr("fill", "none");

	var pathGen = function(d) {
	var sx = _selection._xScale(d.sdate);
	var ex = d.edate == null ? chartWidth : _selection._xScale(d.edate);
	var str = "M ";
	str += [sx, Y].join(" ");
	str += "L ";
	str += [ex, Y].join(" ");
	if (d.edate) {
	str += "L ";
	str += [ex, Y + 12].join(" ");
	}
	return str;
	};

	var label = g
	.selectAll(".warekiLabel")
	.data(wareki)
	.enter()
	.append("text")
	.attr("class", "warekiLabel")
	.attr("text-anchor", "middle")
	.attr("y", 12);

	var labelGen = function(d) {
	var sx = _selection._xScale(d.sdate);
	return "translate(" + [sx, Y] + ")";
	};

	var labelDx = function(d) {
	var sx = _selection._xScale(d.sdate);
	var ex = d.edate == null ? chartWidth : _selection._xScale(d.edate);
	var center = (ex - sx) / 2;
	return center;
	};

	var update = function() {
	line.attr("d", pathGen);

	label
	.attr("transform", labelGen)
	.attr("x", labelDx)
	.text(function(d) {
	return d["name"];
	});
	};

	bindUpdate(_selection, update);
	}

	function addPointEvent(_selection) {
	var chartLayer = _selection.select(".chartLayer");
	var Y = chartLayer.attr("height") ;
	var data = _selection.datum();
	var event = data[index.event];
	var eventPoint = event.filter(function(d) {
	return d.edate == null;
	});

	var g = chartLayer.append("g").attr("class", "pointEventLayer");

	var circle = g
	.selectAll(".pointEventLayer")
	.data(eventPoint)
	.enter()
	.append("circle")
	.attr("class", "eventCircle")
	.attr("r", 2)
	.attr("cy", function(d) {
	return d.paragraph;
	});

	var circleGen = function(d) {
	var sx = _selection._xScale(d.sdate);
	return "translate(" + [sx, Y] + ")";
	};

	var label = g
	.selectAll(".eventiLabel")
	.data(eventPoint)
	.enter()
	.append("text")
	.attr("class", "eventLabel")
	.attr("dominant-baseline", "middle")
	.attr("text-anchor", "start")
	.attr("x", 6)
	.attr("y", function(d, i) {
	return d.paragraph;
	});

	var labelGen = function(d) {
	var sx = _selection._xScale(d.sdate);
	return "translate(" + [sx, Y] + ")";
	};

	var update = function() {
	circle.attr("transform", circleGen);
	label.attr("transform", labelGen).text(function(d) {
	return d["event"];
	});
	};

	bindUpdate(_selection, update);
	}

	function addRangeEvent(_selection) {
	var chartLayer = _selection.select(".chartLayer");
	var Y = chartLayer.attr("height") - 42;
	var data = _selection.datum();
	var event = data[index.event];
	var eventRange = event.filter(function(d) {
	return d.edate != null;
	});

	var g = chartLayer.append("g").attr("class", "rangeEventLayer");

	var line = g
	.selectAll(".warekiLine")
	.data(eventRange)
	.enter()
	.append("path")
	.attr("class", "warekiLine")
	.attr("stroke", "black")
	.attr("fill", "none");

	var pathGen = function(d, i) {
	var sx = _selection._xScale(d.sdate);
	var ex = _selection._xScale(d.edate);
	var str = "M ";
	var y = Y + d.paragraph;

	str += [sx, y].join(" ");
	str += "L ";
	str += [ex, y].join(" ");
	return str;
	};

	var sCircle = g
	.selectAll(".eventSCircle")
	.data(eventRange)
	.enter()
	.append("circle")
	.attr("class", "eventSCircle")
	.attr("r", 2);

	var eCircle = g
	.selectAll(".eventECircle")
	.data(eventRange)
	.enter()
	.append("circle")
	.attr("class", "eventECircle")
	.attr("r", 2);

	var sCircleGen = function(d) {
	var sx = _selection._xScale(d.sdate);
	var y = Y + d.paragraph;
	return "translate(" + [sx, y] + ")";
	};

	var eCircleGen = function(d, i) {
	var sx = _selection._xScale(d.edate);
	var y = Y + d.paragraph;
	return "translate(" + [sx, y] + ")";
	};

	var label = g
	.selectAll(".eventLabel")
	.data(eventRange)
	.enter()
	.append("text")
	.attr("class", "eventLabel")
	.attr("text-anchor", "middle")
	.attr("y", 12);

	var labelGen = function(d, i) {
	var sx = _selection._xScale(d.sdate);
	var y = Y + d.paragraph;
	return "translate(" + [sx, y] + ")";
	};

	var labelDx = function(d) {
	var sx = _selection._xScale(d.sdate);
	var ex = _selection._xScale(d.edate);
	var center = (ex - sx) / 2;
	return center;
	};

	var update = function() {
	line.attr("d", pathGen);
	sCircle.attr("transform", sCircleGen);
	eCircle.attr("transform", eCircleGen);

	label
	.attr("transform", labelGen)
	.attr("x", labelDx)
	.text(function(d) {
	return d["event"];
	});
	};

	bindUpdate(_selection, update);
	}

	function addAdministration(_selection) {
	var chartLayer = _selection.select(".chartLayer");
	var Y = chartLayer.attr("height") - 60;
	var data = _selection.datum();
	var election = data[index.election];

	var g = chartLayer.append("g").attr("class", "adminLayer");

	var line = g
	.selectAll(".adminLine")
	.data(election)
	.enter()
	.append("path")
	.attr("class", "adminLine")
	.attr("stroke", "black")
	.attr("fill", "none");

	var pathGen = function(d) {
	var sx = _selection._xScale(d.sdate);
	var ex = _selection._xScale(d.edate);
	var str = "M ";
	str += [sx, Y - 10].join(" ");
	str += "L ";
	str += [sx, Y].join(" ");
	str += "L ";
	str += [ex, Y].join(" ");
	str += "L ";
	str += [ex, Y - 10].join(" ");
	return str;
	};

	var label = g
	.selectAll(".adminLabel")
	.data(election)
	.enter()
	.append("text")
	.attr("class", "adminLabel")
	.attr("text-anchor", "middle")
	.attr("y", 12);

	var labelGen = function(d) {
	var sx = _selection._xScale(d.sdate);
	return "translate(" + [sx, Y] + ")";
	};

	var labelDx = function(d) {
	var sx = _selection._xScale(d.sdate);
	var ex = _selection._xScale(d.edate);
	var center = (ex - sx) / 2;
	return center;
	};

	var update = function() {
	var t = d3.event.transform;
	line.attr("d", pathGen);
	label
	.attr("transform", labelGen)
	.attr("x", labelDx)
	.text(function(d) {
	if (t.k > 3) return d["内閣"];
	});
	};

	bindUpdate(_selection, update);
	}

	function bindUpdate(_selection, update) {
	if (!_selection._updateFanctions) _selection._updateFanctions = [];

	_selection._updateFanctions.push(update);

	_selection._update = function(data) {
	_selection._updateFanctions.forEach(function(f) {
	f(data);
	});
	};
	}

	}());
sdate	edate	name
1868年1月25日	1912年7月30日	明治
1912年7月30日	1926年12月25日	大正
1926年12月25日	1989年1月7日	昭和
1989年1月8日		平成