/* --------------------
  初期の設定
-------------------- */
 
 /* 描画エリアのサイズ */
var width = 900;
var height = 600;

/* 表示領域の用意 */
var svgContainer = d3.select("#main").append("svg")
            .attr("width", width).attr("height", height);

var mapContainer = svgContainer.append("g").attr("class", "mapBlock");
var dataContainer = svgContainer.append("g").attr("class", "dataBlock");
var legendContainer = svgContainer.append("g").attr("id", "legendBlock")
                      .attr('transform', 'translate(' + 800 + "," + 60 + ')')
                      .attr("width", 300).attr("height", 60);

/* 地図投影法 */
var projection = d3.geo.mercator()
          .scale(1200)
          .center([140.467551, 37.750299]); //中心の座標。経度緯度の順。

/* 地形データをSVGに変換するときに呼び出す */
var path = d3.geo.path().projection(projection);

/* スケール */
var rScale = d3.scale.linear().domain([0, 14000]).range(["#FFF", "#00F"]);



 
 
/* --------------------
  データファイルの読み込み
-------------------- */
 
queue()
    .defer(d3.json, "japan.json")
    .defer(d3.tsv,  "population.tsv")
    .defer(d3.tsv,  "capital.tsv")
    .await(mainFunc);
 
 
 
 
/* --------------------
  ファイル読み込み後に実行
-------------------- */
 
function mainFunc(_error, _topojson, _population, _capital) {
 
 
  
  
     /* 地図とデータpopulationの描画の描画 */
    function renderMap() {

          var _prev = new Array();

          //初回のみ実行
          mapContainer.selectAll("path")
                  .data(topojson.feature(_topojson, _topojson.objects.japan).features)
                  .enter()
                  .append("path")
                  .attr("id", function(d) {
                      return d.properties.nam_ja;
                  })
                  .attr("d", path)
                  .style("stroke", "#333")
                  .style("stroke-width", "0.2px")
                  .style("fill", "#FFF");
      
                //プルダウンの変更がある度に実行
          mapContainer.selectAll("path")
                  .style("fill", function(d, i) {
                      //変化させる前の色
                      return rScale( parseInt(_prev[i]) )
                  })
                  .transition()
                  .duration(2000)
                  .style("fill", function(d, i) {
                      //変化させた後の色
                      // var _value = selectedPopulation[0][ d.properties.nam_ja ];
                      // _prev[i] = _value;
                      // return rScale( parseInt(_value) )
                      return "#CCC";
                  });
    };

    renderMap(); //一時的に記述しておく

 
};