D3 Examples - Disabilities Data Demo

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
  <meta charset="utf-8">
  <title>Disibilities</title>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.10.0/d3-legend.min.js"></script>
  <style>
  .country path {
    fill: #ECECEC;
  }
  
  .country path:hover {
    /*stroke: #FFFFFF;*/
    stroke-width: 1px;
    fill-opacity: 0.7;
  }
  
  .country text {
    fill: black;
    font-size: 8px;
  }
  
  div {
    font-family: 'Open Sans', sans-serif;
  }
  
  div#tooltip {
    position: absolute;
    z-index: 10;
    width: 100px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding: 0px 10px 0px 10px;
    background: #F7F7F7;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  }
  
  div#tooltip p {
    line-height: 1.2em;
    text-align: center
  }
  
  div#tooltip hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  p#tooltip-country-name {
    color: #666666;
    font-size: 14px;
    font-weight: 600;
  }
  
  p#tooltip-tax {
    font-size: 10px;
    font-weight: 800;
    color: #666666;
    font-weight: 300;
  }
  
  span#tooltip-legend-icon {
    font-size: 16px;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
  }
  
  span#tooltip-value {
    vertical-align: 0.1em;
  }
  
  .horizontalLegend {
    font-size: 10px;
    font-weight: 600;
  }
  
  .horizontalLegend .legendTitle {
    transform: translate(0, 15px);
    font-size: 12px;
    font-weight: 800;
  }
  </style>
</head>
​
<body>
  <div id="menu">
    Type Selection:
    <select>
      <option>TYPE_1</option>
      <option>TYPE_2</option>
      <option>TYPE_3</option>
      <option>TYPE_4</option>
      <option>TYPE_5</option>
      <option>TYPE_6</option>
      <option>TYPE_7</option>
      <option>TYPE_8</option>
      <option>TYPE_9</option>
    </select>
  </div>
  <div id="chart"></div>
  <script>
  var width = 960,
    height = 600;
​
  var data;
​
  var svg = d3.select("div#chart").append("svg")
    .attr("width", width)
    .attr("height", height);
​
  // 新增 d3-legend
  svg.append("g")
    .attr("class", "horizontalLegend")
    .attr("transform", "translate(400,520)");
​
  var projection = d3.geo.mercator()
    .center([121, 24])
    .scale(7000)
    .translate([400, 200]);
​
  // 顏色尺度
  var color = d3.scale.linear()
    .range(["#FFE4B5", "#F64403"]);
​
  var path = d3.geo.path()
    .projection(projection);
​
  var menu = d3.select("div#menu select")
    .on("change", change);
​
  var tooltip = d3.select("div#chart")
    .append("div")
    .attr("id", "tooltip")
    .style("visibility", "hidden");
​
  d3.json("towns_codet_topojson.json", function(error, taiwan) {
    if (error) return console.error(error);
​
    data = topojson.feature(taiwan, taiwan.objects.towns).features
​
    menu.property("value", "TYPE_1");
​
    redraw()
​
  });
​
  function change() {
    d3.transition()
      .duration(0)
      .each(redraw);
  }
​
  function redraw() {
    var selectedType = menu.property("value"); // 用這個方法來擷取下拉式選單裡被選中的障礙類別
​
    var sortedData = data.sort(function(a, b) {
      return b["properties"][selectedType] - a["properties"][selectedType];
    });
​
    // 幫顏色尺度指定資料範圍
    // 在這邊，sortedData[0]["properties"][selectedType]] 剛好會是最大值
    color.domain([0, sortedData[0]["properties"][selectedType]]);
​
    // Data Join
    var country = svg.selectAll(".country")
      .data(data, function(d) {
        return d["properties"]["NAME"];
      })
​
    // Enter
    var countryEnter = country.enter().insert("g", ".horizontalLegend")
      .attr("class", "country")
      .style("fill-opacity", 0);
​
    // Enter - Country Path
    countryEnter.append("path")
      .attr("id", function(d) {
        return d.id;
      })
      .attr("d", path);
​
    // // Enter - Country Name
    // countryEnter.append("text")
    //     .attr("class", "label")
    //     .attr("transform", function(d) {
    //         var centroid = path.centroid(d),
    //             x = centroid[0],
    //             y = centroid[1];
    //         return "translate(" + x + "," + y + ")";
    //     }).attr("dy", ".35em")
    //     .attr("text-anchor", "start");
​
    // Mouse Events
    country.select("path")
      .on("mouseover", function() {
        return tooltip.style("visibility", "visible");
      }).on("mousemove", function(d) {
        return tooltip
          .style("top", (d3.event.pageY - 10) + "px")
          .style("left", (d3.event.pageX + 10) + "px")
          .html(tooltipHtml(d["properties"]["NAME"], d["properties"][selectedType]));
      }).on("mouseout", function() {
        return tooltip.style("visibility", "hidden");
      });
​
    // Legend (With D3-Legend)
    var legend = d3.select(".horizontalLegend")
​
    var legendLinear = d3.legend.color()
      .shapeWidth(30)
      .cells(11)
      .orient("horizontal")
      .scale(color)
      .title("Number of People");
​
    legend.call(legendLinear);
​
    // Update
    var countryUpdate = d3.transition(country)
      .style("fill-opacity", 1);
​
    // Update - Country Path
    countryUpdate.select("path")
      .style("fill", function(d) {
        return d["properties"][selectedType] == undefined ? "" : color(d["properties"][selectedType]);
      });
​
    // // Update - Country Name
    // countryUpdate.select(".label")
    //     .text(function(d) {
    //         return d["properties"]["NAME"];
    //     });
​
​
    // Exit
    var countryExit = d3.transition(country.exit())
      .style("fill-opacity", 0)
      .remove();
​
    // Exit - Country Path
    countryExit.select("path")
      .style("fill", function(d) {
        return color(d["properties"][selectedType]);
      });
​
    // Exit - Country Name
    countryExit.select(".label")
      .text(function(d) {
        return d["properties"]["NAME"];
      });
​
  }
​
  function tooltipHtml(country, people) {
    var code = '<p id="tooltip-country-name">' + country + '</p><hr>' + '<p id="tooltip-tax"><span id="tooltip-legend-icon" style="color: ' + (people == undefined ? "#ECECEC" : color(people)) + '; ">●</span><span id="tooltip-value"> ' + (people == undefined ? "No Data." : people) + '</span></p>'
    return code;
  }
  </script>
</body>
​
    