D3 Examples - Hubungan Jumlah Personil dengan Rataan Lama Operasi Penyelamatan

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
body {
   font: 11px sans-serif;
}
​
.axis path,
.axis line {
   fill: none;
   stroke: #000;
   shape-rendering: crispEdges;
}
​
.dot {
   stroke: #000;
}
​
.tooltip {
   background-color: white;
   position: absolute;
   width: 160px;
   height: 28px;
   pointer-events: none;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 700 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;
​
var x = d3.scale.linear().range([0, width]),
    y = d3.scale.linear().range([height, 0]),
    r = d3.scale.linear().range([3, 20]);
​
var xAxis = d3.svg.axis().scale(x).tickFormat(d3.format('.0f')).orient("bottom"),
    yAxis = d3.svg.axis().scale(y).orient("left");
​
var plot = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
var tooltip = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);
​
d3.csv("data.csv", function(error, data) {
   data.forEach(function(d) {
      d["jumlah_pos"] = +d["jumlah_pos"];  // convert to number
      d["jumlah_insiden"] = +d["jumlah_insiden"];
      d["waktu_respon"] = +d["waktu_respon"];
      d["total_personil"] = +d["total_personil"];
      d["total_kendaraan"] = +d["total_kendaraan"];
      d["waktu_operasi"] = +d["waktu_operasi"];
   });
   data = data.filter(function(d) {
      if(d["jumlah_pos"] == 0 || d["total_personil"] == 0) {
         return false;
      }
      return true;
   });
​
   x.domain([d3.min(data, function(d) { return d["total_personil"]; })-1, d3.max(data, function(d) { return d["total_personil"]; })+1]);
   y.domain([d3.min(data, function(d) { return d["waktu_operasi"]; })-1, d3.max(data, function(d) { return d["waktu_operasi"]; })+1]);
​
   plot.append("g")
         .attr("class", "x axis")
         .attr("transform", "translate(0, " + height + ")")
      .call(xAxis)
         .append("text")
         .attr("class", "label")
         .attr("x", width)
         .attr("y", -6)
         .style("text-anchor", "end")
         .text("Jumlah personil");
​
   plot.append("g")
         .attr("class", "y axis")
      .call(yAxis)
         .append("text")
         .attr("class", "label")
         .attr("transform", "rotate(-90)")
         .attr("y", 6)
         .attr("dy", ".71em")
         .style("text-anchor", "end")
         .text("Rataan lama operasi (menit)");
​
   // draw dots
   plot.selectAll(".dot")
      .data(data)
         .enter().append("circle")
         .attr("class", "dot")
         .attr("r", 3.5)
         .attr("cx", function(d) { return x(d["total_personil"]); })
         .attr("cy", function(d) { return y(d["waktu_operasi"]); })
         .style("fill", "black") 
         .on("mouseover", function(d) {
            tooltip.transition()
               .duration(200)
               .style("opacity", .9);
            tooltip.html("<b>" + d["kecamatan"] + "</b><br/>" + 
               d["total_personil"] + " personil<br />" + 
               "Rata-rata operasi: " + d["waktu_operasi"] + " menit")
         .style("left", (d3.event.pageX + 10) + "px")
         .style("top", (d3.event.pageY - 28) + "px");
         })
         .on("mouseout", function(d) {
            tooltip.transition()
               .duration(500)
               .style("opacity", 0);
         });
});
</script>
</body>
</html>
    