add ehime-color

ehime-color/README.md

@@ -0,0 +1,20 @@
+Ehime Color
+====
+Color Mapping any data on Ehime Prefecture area map.
+
+Nagoya Color を元に改変して作成
+
+topojson データについて：
+出展： 国土数値情報　行政区域データ
+N03-160101_38_GML.zip 平成28年 世界測地系 愛媛
+中の Shape形式を変換することにより作成
+
+CSVデータについて
+出展： 愛媛県統計情報データベース
+大分類（保健・衛生）中分類（患者数）市町村別伝染病及び食中毒患者数 <CC-BY> (平成24年度)
+http://www.pref.ehime.jp/toukeidb/toukeidb.kensaku.cyutoukei?strDaiCd=070&strCyuCd=290&strRoot=bunruikensaku&strKensakuRoot=%E5%A4%A7%E5%88%86%E9%A1%9E%EF%BC%88%E4%BF%9D%E5%81%A5%E3%83%BB%E8%A1%9B%E7%94%9F%EF%BC%89%E4%B8%AD%E5%88%86%E9%A1%9E%EF%BC%88%E6%82%A3%E8%80%85%E6%95%B0%EF%BC%89
+
+## Data Format
+| City/Town   | Data Label1 | Data Label2 | ... |
+|-------------|-------------|-------------|-----|
+| cityName    | Data        | Data        | ... |

ehime-color/data.csv

@@ -0,0 +1,28 @@
+市町,結核/実数,食中毒/実数,結核/人口１０万対,食中毒/人口１０万対
+区,世帯数,人口総数,女,男
+松山市,59,120,11.4,23.2
+今治市,20,-,12.2,-
+宇和島市,17,7,20.8,8.6
+八幡浜市,8,12,21.5,32.3
+新居浜市,17,46,14.1,38.1
+西条市,12,20,10.8,18.0
+大洲市,3,-,6.5,-
+伊予市,4,-,10.7,-
+四国中央市,14,-,15.7,-
+西予市,6,49,14.7,119.6
+東温市,6,-,17.2,-
+上島町,1,-,13.5,-
+久万高原町,3,27,32.4,291.6
+松前町,2,30,6.6,99.6
+砥部町,2,-,9.2,-
+内子町,3,-,17.2,-
+伊方町,1,-,9.7,-
+松野町,1,-,23.4,-
+鬼北町,4,-,35.4,-
+愛南町,6,1,25.9,4.3
+宇摩,14,-,15.7,-
+新居浜西条,29,66,12.5,28.4
+今治,21,-,12.3,-
+松山,76,177,11.7,27.2
+八幡浜大洲,21,61,13.8,40.2
+宇和島,28,8,23.2,6.6

ehime-color/main.css

@@ -0,0 +1,76 @@
+
+svg
+{
+  display: block;
+  margin: auto;
+}
+.clearfix::after
+{
+  content: "";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+.menu
+{
+  margin: 10px;
+  position: fixed;
+  top: 0;
+  text-align: left;
+  width: auto;
+}
+#attrMenu
+{
+  right: 0;
+  background-color:rgba(32,32,32,0.5);
+}
+#colorMenu
+{
+  left: 0;
+}
+.menu *
+{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.menu ul
+{
+  list-style: none;
+}
+.menu ul.vertical
+{
+}
+.menu ul.vertical > li
+{
+  margin: 1px 0;
+}
+.menu ul.horizontal
+{
+
+}
+.menu ul.horizontal > li
+{
+  float: left;
+}
+.menu ul a
+{
+  height: 100%;
+  width: 100%;
+  display: block;
+  background-color: #FFF;
+}
+a:link,a:visited
+{
+  color: rgb(153,153,153);
+}
+a:hover,a:active
+{
+  color: #FFF;
+  background-color: rgba(32,32,32,0.8);
+}
+a
+{
+  text-decoration: none;
+}

ehime-color/main.js

@@ -0,0 +1,245 @@
+//# require=d3,topojson,colorbrewer
+
+function update(data) {
+  show(data.toMap({ typed: true }));
+}
+
+/**
+ * Created by yuuu on 14/12/22.
+ * Edited by osoken on 16/12/15.
+ */
+
+!(function(d3,colorbrewer)
+{
+  var colormenu ={};
+  var dispatcher = d3.dispatch('change');
+  var flatCB = d3.entries(colorbrewer).map(function(d){return d3.entries(d.value).map(function(dd){return {name:d.key+': '+dd.key, parette:dd.value};});}).reduce(function(a,b){return a.concat(b);});
+  var selected = flatCB[0];
+  var selection, display, selector;
+
+  colormenu.open = function()
+  {
+    selector.transition().style('height', '320px');
+  }
+  colormenu.close = function()
+  {
+    selector.transition().style('height', '0px');
+  }
+  colormenu.init = function(root)
+  {
+    selection = root.append('div');
+    display = selection.append('ul');
+    selector = selection.append('ul');
+    display.attr('class','clearfix')
+      .on('click',function()
+      {
+        d3.event.stopPropagation();
+        colormenu.open();
+      }).selectAll('li')
+      .data(selected.parette)
+      .enter().append('li').style({'width':'16px','height':'16px','background-color':function(d){return d;},'float':'left','display':'block'});
+    selector.on('mouseout', function()
+      {
+        dispatcher.change(selected);
+      })
+      .style('height', '0px')
+      .style('overflow-x', 'hidden')
+      .style('overflow-y', 'scroll');
+    selector.selectAll('li').data(flatCB).enter().append('li')
+      .on('mouseover', function(d)
+      {
+        dispatcher.change(d);
+      })
+      .on('click',function(d){
+        d3.event.stopPropagation();
+        selected = d;
+        colormenu.close();
+        display.selectAll('li').remove();
+        display.selectAll('li')
+          .data(selected.parette)
+          .enter().append('li').style({'width':'16px','height':'16px','background-color':function(d){return d;},'float':'left','display':'block'});
+        dispatcher.change(selected);
+      })
+      .append('ul').attr('class','clearfix').selectAll('li').data(function(d){return d.parette;})
+      .enter().append('li').style({'width':'16px','height':'16px','background-color':function(d){return d;},'float':'left','display':'block'});
+  }
+  colormenu.parette = function()
+  {
+    return selected;
+  }
+  colormenu.nColor = function()
+  {
+    return selected.parette.length;
+  }
+  colormenu.on = function(event, listener)
+  {
+    return dispatcher.on(event, listener);
+  };
+  if (typeof define === "function" && define.amd) define(colormenu); else if (typeof module === "object" && module.exports) module.exports = colormenu;
+  this.colormenu = colormenu;
+}(d3,colorbrewer));
+
+
+var width = root.clientWidth;
+var height = root.clientHeight;
+
+d3.select('#e2d3-chart-area')
+  .on('click', function()
+  {
+    colormenu.close();
+  });
+
+var svg = d3.select("#e2d3-chart-area").append("svg")
+  .attr("width", width)
+  .attr("height", height);
+
+var mapLayer = svg.append('g');
+var infoLayer = svg.append('g');
+
+var attrMenu = d3.select('#e2d3-chart-area').append('div')
+  .attr('id', 'attrMenu')
+  .attr('class', 'menu clearfix');
+
+var attrList = attrMenu.append('ul').attr('class', 'vertical');
+
+var colorMenu = d3.select('#e2d3-chart-area').append('div')
+  .attr('id', 'colorMenu')
+  .attr('class', 'menu clearfix');
+
+colormenu.init(colorMenu);
+
+var tooltip = infoLayer.append('g')
+  .attr('transform','translate(100,100)')
+  .attr('opacity',1.0);
+
+var tooltipRect = tooltip.append('rect')
+  .attr('stroke-width',1)
+  .attr('stroke','rgba(255,255,255,0.75)')
+  .attr('fill','rgba(255,255,255,0.75)');
+
+var tooltipInfo = tooltip.append('g');
+
+var tooltipTitle = tooltipInfo.append('text')
+  .attr('id', 'tooltiptitle')
+  .attr('text-anchor','middle')
+  .style('font-family','Meiryo')
+  .attr('font-size', 24);
+
+var tooltipData = tooltipInfo.append('g')
+  .attr('transform', 'translate(0,28)');
+
+var projection = d3.geo.mercator()
+  .center([132.765667, 33.541611])
+  .scale(Math.min(width, height) * 30)
+  .translate([width / 2, height / 2]);
+
+var path = d3.geo.path()
+  .projection(projection);
+
+var topo = {};
+
+var placeName = 'ehime';
+
+var topoSelection = null;
+
+d3.json(baseUrl + "/ehime.topojson", function(error, o) {
+  topoSelection = mapLayer.selectAll(".states")
+    .data(topojson.feature(o, o.objects[placeName]).features)
+    .enter().append("path")
+    .attr("stroke", "gray")
+    .attr("stroke-width", "0.5")
+    .attr("id", function(d) {
+      return "state_" + d.properties.id;
+    })
+    .attr("class", 'states')
+    .attr("fill", "#fff")
+    .attr("d", path);
+  topo = o;
+
+  reload();
+});
+
+function show(data) {
+  if (data && topo.objects) {
+    var labels = data.header;
+
+    topo.objects[placeName].geometries.forEach(function(d)
+    {
+      d.properties.data = {};
+      d.properties.data = data[d.properties.N03_004] || {};
+      d.properties.name = (d.properties.N03_001 || '') +
+        (d.properties.N03_002 || '') +
+        (d.properties.N03_003 || '') +
+        (d.properties.N03_004 || '');
+    });
+    var discretizer = d3.scale.quantize().range(d3.range(colormenu.nColor()));
+    var attr = labels[0];
+    var refill = function(label, parette)
+    {
+      discretizer.range(d3.range(parette.length))
+        .domain(
+          d3.extent(
+            topo.objects[placeName].geometries,
+            function(d) {
+              return isNaN(d.properties.data[label])?0:(+d.properties.data[label]);
+            }
+          )
+        );
+      mapLayer.selectAll('path')
+        .transition()
+        .attr('fill', function(d){
+          return parette[discretizer(
+            isNaN(d.properties.data[label])?0:(+d.properties.data[label])
+          )]}
+        );
+    }
+    attrList.selectAll('li').remove();
+    attrList.selectAll('li').data(labels).enter().append('li')
+        .append('a')
+        .attr('class', 'label-selector')
+        .style('background-color', function(d){return (attr==d)?'#000':'none';})
+        .attr('href', '#')
+        .text(function(d){return d;})
+        .on('click', function(d) {
+          d3.event.preventDefault();
+          d3.selectAll('a.label-selector').style('background-color', '#FFF');
+          d3.select(this).style('background-color', '#000');
+          attr = d;
+          refill(d, colormenu.parette().parette);
+        });
+    topoSelection.on('mouseover', function(d)
+    {
+      tooltip.style('display','block');
+      tooltip.attr('transform','translate('+d3.event.pageX+','+(d3.event.pageY+40)+')');
+      tooltipTitle.text(d.properties.name);
+      tooltipData.selectAll('text').remove();
+      tooltipData.selectAll('text')
+        .data(d3.entries(d.properties.data))
+        .enter().append('text')
+        .text(function(d){return d.key+': '+d.value;})
+        .style('font-family','Meiryo')
+        .attr('font-size', 16)
+        .attr('y', function(d,i){return i*20;})
+        .attr('text-anchor','middle');
+      tooltipRect.attr(tooltipInfo.node().getBBox());
+      tooltip.attr('opacity', 1.0);
+    })
+    .on('mousemove', function(d)
+    {
+      tooltip.attr('transform','translate('+d3.event.pageX+','+(d3.event.pageY+40)+')');
+    })
+    .on('mouseout', function(d)
+    {
+      tooltip.attr('opacity', 0.0);
+      tooltip.style('display','none');
+    });
+    if (labels.length > 0)
+    {
+      refill(attr, colormenu.parette().parette);
+    }
+    colormenu.on('change', function(parette)
+    {
+      refill(attr, parette.parette);
+    });
+  }
+}

tags.yml

@@ -38,6 +38,7 @@ map:
   - saga-color
   - yamaguchi-map
   - population-map-iran
+  - ehime-color
 globe:
   - see-through-globe
   - leaflet-timeline
@@ -97,4 +98,3 @@ tbd:
   - piechart-javascript
   - react-javascript
   - multi-series-line-chart
-