Hubungan Jumlah Personil dengan Rataan Lama Operasi Penyelamatan

Dengan menggabungkan data personil Pemkar dan data rekaman penanggulangan bencana dan kebakaran tahun 2013 didapat grafik hubungan antara jumlah personil dengan waktu operasi penyelamatan per kecamatan.

Sumber data: Data Kejadian Bencana DKI Jakarta (periode 2013)

<!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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js