Saga Event Time Machine

佐賀イベントタイムマシン

2016-12-10,11 Code for Saga データの見える化による地域課題解決ハッカソン@佐賀大学の成果です。

開発：Timeflyers（タイムフライヤーズ） Tatsuo Sugimoto, Shujiro Matsunaga, Satoshi Tsutsui, Kosei Hara

データソース：あそぼーさが, 気象庁, Mapbox

var logo = L.control({position: 'topright'});
  logo.onAdd = function(map) {
    var div = L.DomUtil.create('div', 'logo');
    // div.innerHTML= "<img src='logo.png'/>";
    div.innerHTML = ["<div id='logo'>", titleStr, "</div><div class='desc'>", descStr, "</div>"].join('');
    return div;
  };
  logo.addTo(map);

// d3.select('.leaflet-top.leaflet-right')
  //   .append('div')
  //   .attr('class', 'leaflet-control-attribution leaflet-control')
  //   .text('test');

var months = d3.range(13); // 0 .. 12
  // months.unshift(0);

// set month
  d3.select('#months').selectAll('div.month')
    .data(months)
    .enter()
    .append('div')
    .attr('class', 'month')
    .attr('month', function(d){return d;})
    // .style('background-color', function(d,i){if(i%2==0){return '#333';}})
    .text(function(d){
      if (d == 0) {
        return '';//'\f092';
      }
      return d + '月';
    })
    .on('click', function(){
      var e = d3.select(this);
      var m = e.attr('month');
      updateMonth(m);
    });

// set high
  d3.select('#high').selectAll('div.high')
    .data(months)
    .enter()
    .append('div')
    .attr('class', 'high')
    .attr('month', function(d){return d;});

// set rain
  d3.select('#rain').selectAll('div.rain')
    .data(months)
    .enter()
    .append('div')
    .attr('class', 'rain')
    .attr('month', function(d){return d;});

// set snow
  d3.select('#snow').selectAll('div.snow')
    .data(months)
    .enter()
    .append('div')
    .attr('class', 'snow')
    .attr('month', function(d){return d;});

var highColor = d3.scaleSequential(d3.interpolateOranges);
  var rainColor = d3.scaleSequential(d3.interpolateBlues);
  var snowColor = d3.scaleSequential(d3.interpolateBlues);

d3.csv('weather.csv', function(data) {

data.forEach(function(d){
      d.month = +d.month;
      d.high = +d.high;
      d.rain = +d.rain;
      d.snow = +d.snow;
      d.rainday = +d.rainday;
      d.snowday = +d.snowday;
    });

highColor.domain(d3.extent(data, function(d){return d.high;}));
    rainColor.domain(d3.extent(data, function(d){return d.rainday;}));
    snowColor.domain(d3.extent(data, function(d){return d.snowday;}));

data.unshift({
      month: 0,
      high: 0,
      rain: 0,
      snow: 0,
      rainday: 0,
      snowday: 0
    });

weatherData = data;

var thermometerStr = '';
    var raindropStr = '';
    var snowflakeStr = '';
    var hotStr = '';

d3.selectAll('div.high')
      .data(data)
      .text(function(d,i){
        if (i == 0) { return thermometerStr; }
        else if (d.high >= 30.0) {
          // return hotStr;
        } else {
          return ''; //d.high;
        }
      })
      .style('background-color', function(d){ return highColor(d.high); });

d3.selectAll('div.rain')
      .data(data)
      .text(function(d,i){
        if (i == 0) { return raindropStr; }
        else if (d.snowday > 0){
          return snowflakeStr;
        } else {
          return '';
        }
      })
      .style('background-color', function(d){ return rainColor(d.rainday); });

d3.selectAll('div.snow')
      .data(data)
      // .text(function(d){return d.rain;})
      .text(function(d,i){
        if (i == 0) { return ''; }
        return d.snowday;
      })
      .style('background-color', function(d){ return snowColor(d.snowday); })
      .style('color', function(d, i){
        if (i == 0) {
          return '#000';
        }
        return rainColor(d.snowday);
      });

});

d3.csv('events.csv', function(data){
    eventData = data;
    updateMonth(currentMonth);
  });

function updateMonth(month) {

currentMonth = month;
    var monthWeatherData = weatherData[currentMonth];
    var monthEventData = eventData.filter(function(d){
      return (d.month == currentMonth);
    })

d3.select('#map .leaflet-layer')
      .style('filter', 'hue-rotate(' + (currentMonth / 12.0 * 360.0) + 'deg)')

d3.selectAll('div.month').classed('on', false);
    // d3.selectAll('div.high').classed('on', false);
    // d3.selectAll('div.rain').classed('on', false);
    d3.select('div.month[month="'+currentMonth+'"]').classed('on', true);
    // d3.select('div.high[month="'+currentMonth+'"]').classed('on', true);
    // d3.select('div.rain[month="'+currentMonth+'"]').classed('on', true);

// set desc
    var weatherStr = `${ currentMonth }月は${ monthEventData.length }件のイベントが登録されています。<br />
    平均最高気温は${ monthWeatherData.high }℃です。<br />
    ひと月のあいだに${ d3.format('d')(monthWeatherData.rainday) }日ほど雨が降りそうです。`;
    if (monthWeatherData.snowday > 0) {
      weatherStr += `<br />
      また、雪が降ることもあります。`;
    }
    if (monthWeatherData.high >= 30) {
      weatherStr += `<br />
      とても暑いので屋外の活動に注意してください。`;
    }
    if (currentMonth === '0') {
      weatherStr = descStr;
    }
    d3.select('div.desc').html(weatherStr);

markers.forEach(function(element, index, array){
      map.removeLayer(element);
    });
    markers = [];

monthEventData.forEach(function(element, index, array){
      var marker = L.marker([element.latitude, element.longtitude]).addTo(map);
      marker.bindPopup(`${ element.start } – ${ element.end }<br />
        <strong>${ element.title }</strong><br />
        ${ element.place }`);
      markers.push(marker);
    });

}
</script>

</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.js

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