D3 Examples - Analisis Variasi ANOVA Waktu Respon Pemkar per Semester

Analisis Variasi ANOVA Waktu Respon Pemkar per Semester
Grafik di atas memperlihatkan perbandingan lama respon satuan pemadam kebakaran di tiap semester untuk masing-masing wilayah kota Jakarta. Setiap titik mengindikasikan kejadian bencana atau kebakaran di Jakarta yang disebar menurut luas kelurahan tempat kejadian dan menit respon.
Dengan menggunakan analisis perbandingan variasi ANOVA di antar semester dapat disimpulkan bahwa: Tidak ada perbedaan signifikan dalam hal performa satuan pemadam kebakaran di semua wilayah dan hal ini layak dipertimbangkan untuk memajukan kualitas layanan pemadam kebakaran Jakarta.
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
body {
   font: 11px sans-serif;
}
​
div {
   width: 30%;
   float: left;
}
​
.axis path,
.axis line {
   fill: none;
   stroke: #000;
   shape-rendering: crispEdges;
}
​
.x.axis line {
   stroke: #fff;
   stroke-opacity: .8;
}
​
.dot {
   stroke: #fff;
}
​
.tooltip {
   background-color: #f8f8f8;
   position: absolute;
   padding: 2px;
   width: 150px;
   height: 28px;
   pointer-events: none;
}
</style>
<body>
<div style="margin-top:15px; width:100%">
<div id="plotJU">
   <h1>Jakarta Utara</h1>
   <p>Rata-rata lama respon: 14.58 menit.<br />
      Analisis ANOVA: F(1,62) = 0.1 (p > .05)</p>
</div>
<div id="plotJT">
   <h1>Jakarta Timur</h1>
   <p>Rata-rata lama respon: 7.20 menit.<br />
      Analisis ANOVA: F(1,75) = 3.228 (p > .05)</p>
</div>
<div id="plotJS">
   <h1>Jakarta Selatan</h1>
   <p>Rata-rata lama respon: 11.07 menit.<br />
      Analisis ANOVA: F(1,85) = 1.328 (p > .05)</p>
</div>
<div id="plotJB">
   <h1>Jakarta Barat</h1>
   <p>Rata-rata lama respon: 6.75 menit.<br />
      Analisis ANOVA: F(1,90) = 3.132 (p > .05)</p>
</div>
<div id="plotJP">
   <h1>Jakarta Pusat</h1>
   <p>Rata-rata lama respon: 7.20 menit.<br />
      Analisis ANOVA: F(1,40) = 0.67 (p > .05)</p>
</div>
</div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 0, bottom: 30, left: 40},
    width = 350 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;
​
var x = d3.scale.linear().domain([0, 3000]).range([0, width]),
    y = d3.scale.log().range([height, 0]),
    r = d3.scale.linear().range([3, 20]);
​
var xAxis = d3.svg.axis().scale(x).tickFormat(function (d) { return ''; }).orient("bottom"),
    yAxis = d3.svg.axis().scale(y).ticks(10, '.0f').orient("left");
​
var plotJU = d3.select("#plotJU").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 plotJT = d3.select("#plotJT").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 plotJS = d3.select("#plotJS").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 plotJB = d3.select("#plotJB").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 plotJP = d3.select("#plotJP").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["semester"] = +d["semester"];  // convert to number
      d["jumlah_insiden"] = +d["jumlah_insiden"];
      d["menit_respon"] = +d["menit_respon"];
      d["waktu_operasi"] = +d["waktu_operasi"];
   });
​
   y.domain([d3.min(data, function(d) { return d["menit_respon"]; })-1, d3.max(data, function(d) { return d["menit_respon"]; })+1]);
​
   plot1(data);
   plot2(data);
   plot3(data);
   plot4(data);
   plot5(data);
});
​
function plot1(data) {
   data = data.filter(function(d) {
      if(d["wilayah"] == "Jakarta Utara") {
         return true;
      }
      return false;
   });
​
   plotJU.append("g")
         .attr("class", "x axis")
         .attr("transform", "translate(0, " + height + ")")
      .call(xAxis)
         .append("text")
         .attr("class", "x label")
         .attr("x", width)
         .attr("y", -6)
         .style("text-anchor", "end")
         .text("Luas wilayah");
​
   plotJU.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("Menit respon");
​
   // draw dots
   plotJU.selectAll(".dot")
      .data(data)
         .enter().append("circle")
         .attr("class", "dot")
         .attr("r", 4)
         .attr("cx", function(d) { return x(d["luas"]); })
         .attr("cy", function(d) { return y(d["menit_respon"]); })
         .style("fill", function(d) {
            if (d["semester"] == 1) {
               return "#990066";
            }
            else if (d["semester"] == 2) {
               return "#ffcc33";
            }
         }) 
         .on("mouseover", function(d) {
            tooltip.transition()
               .duration(100)
               .style("opacity", .9);
            tooltip.html("<b>" + d["kelurahan"] + "</b><br/>" +
               "Waktu respon: " + d["menit_respon"] + " menit")
            .style("left", (d3.event.pageX + 10) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
         })
         .on("mouseout", function(d) {
            tooltip.transition()
               .duration(100)
               .style("opacity", 0);
         });
}
​
function plot2(data) {
      data = data.filter(function(d) {
      if(d["wilayah"] == "Jakarta Timur") {
         return true;
      }
      return false;
   });
​
   plotJT.append("g")
         .attr("class", "x axis")
         .attr("transform", "translate(0, " + height + ")")
      .call(xAxis)
         .append("text")
         .attr("class", "x label")
         .attr("x", width)
         .attr("y", -6)
         .style("text-anchor", "end")
         .text("Luas wilayah");
​
   plotJT.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("Menit respon");
​
   // draw dots
   plotJT.selectAll(".dot")
      .data(data)
         .enter().append("circle")
         .attr("class", "dot")
         .attr("r", 4)
         .attr("cx", function(d) { return x(d["luas"]); })
         .attr("cy", function(d) { return y(d["menit_respon"]); })
         .style("fill", function(d) {
            if (d["semester"] == 1) {
               return "#990066";
            }
            else if (d["semester"] == 2) {
               return "#ffcc33";
            }
         }) 
         .on("mouseover", function(d) {
            tooltip.transition()
               .duration(100)
               .style("opacity", .9);
            tooltip.html("<b>" + d["kelurahan"] + "</b><br/>" +
               "Waktu respon: " + d["menit_respon"] + " menit")
            .style("left", (d3.event.pageX + 10) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
         })
         .on("mouseout", function(d) {
            tooltip.transition()
               .duration(100)
               .style("opacity", 0);
         });
}
​
function plot3(data) {
   data = data.filter(function(d) {
      if(d["wilayah"] == "Jakarta Selatan") {
         return true;
      }
      return false;
   });
​
   plotJS.append("g")
         .attr("class", "x axis")
         .attr("transform", "translate(0, " + height + ")")
      .call(xAxis)
         .append("text")
         .attr("class", "x label")
         .attr("x", width)
         .attr("y", -6)
         .style("text-anchor", "end")
         .text("Luas wilayah");
​
   plotJS.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("Menit respon");
​
   // draw dots
   plotJS.selectAll(".dot")
      .data(data)
         .enter().append("circle")
         .attr("class", "dot")
         .attr("r", 4)
         .attr("cx", function(d) { return x(d["luas"]); })
         .attr("cy", function(d) { return y(d["menit_respon"]); })
         .style("fill", function(d) {
            if (d["semester"] == 1) {
               return "#990066";
            }
            else if (d["semester"] == 2) {
               return "#ffcc33";
            }
         }) 
         .on("mouseover", function(d) {
            tooltip.transition()
               .duration(100)
               .style("opacity", .9);
            tooltip.html("<b>" + d["kelurahan"] + "</b><br/>" +
               "Waktu respon: " + d["menit_respon"] + " menit")
            .style("left", (d3.event.pageX + 10) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
         })
         .on("mouseout", function(d) {
            tooltip.transition()
               .duration(100)
               .style("opacity", 0);
         });
}
​
function plot4(data) {
   data = data.filter(function(d) {
      if(d["wilayah"] == "Jakarta Barat") {
         return true;
      }
      return false;
   });
​
   plotJB.append("g")
         .attr("class", "x axis")
         .attr("transform", "translate(0, " + height + ")")
      .call(xAxis)
         .append("text")
         .attr("class", "x label")
         .attr("x", width)
         .attr("y", -6)
         .style("text-anchor", "end")
         .text("Luas wilayah");
​
   plotJB.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("Menit respon");
​
   // draw dots
   plotJB.selectAll(".dot")
      .data(data)
         .enter().append("circle")
         .attr("class", "dot")
         .attr("r", 4)
         .attr("cx", function(d) { return x(d["luas"]); })
         .attr("cy", function(d) { return y(d["menit_respon"]); })
         .style("fill", function(d) {
            if (d["semester"] == 1) {
               return "#990066";
            }
            else if (d["semester"] == 2) {
               return "#ffcc33";
            }
         }) 
         .on("mouseover", function(d) {
            tooltip.transition()
               .duration(100)
               .style("opacity", .9);
            tooltip.html("<b>" + d["kelurahan"] + "</b><br/>" +
               "Waktu respon: " + d["menit_respon"] + " menit")
            .style("left", (d3.event.pageX + 10) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
         })
         .on("mouseout", function(d) {
            tooltip.transition()
               .duration(100)
               .style("opacity", 0);
         });
}
​
function plot5(data) {
   data = data.filter(function(d) {
      if(d["wilayah"] == "Jakarta Pusat") {
         return true;
      }
      return false;
   });
​
   plotJP.append("g")
         .attr("class", "x axis")
         .attr("transform", "translate(0, " + height + ")")
      .call(xAxis)
         .append("text")
         .attr("class", "x label")
         .attr("x", width)
         .attr("y", -6)
         .style("text-anchor", "end")
         .text("Luas wilayah");
​
   plotJP.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("Menit respon");
​
   // draw dots
   plotJP.selectAll(".dot")
      .data(data)
         .enter().append("circle")
         .attr("class", "dot")
         .attr("r", 4)
         .attr("cx", function(d) { return x(d["luas"]); })
         .attr("cy", function(d) { return y(d["menit_respon"]); })
         .style("fill", function(d) {
            if (d["semester"] == 1) {
               return "#990066";
            }
            else if (d["semester"] == 2) {
               return "#ffcc33";
            }
         }) 
         .on("mouseover", function(d) {
            tooltip.transition()
               .duration(100)
               .style("opacity", .9);
            tooltip.html("<b>" + d["kelurahan"] + "</b><br/>" +
               "Waktu respon: " + d["menit_respon"] + " menit")
            .style("left", (d3.event.pageX + 10) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
         })
         .on("mouseout", function(d) {
            tooltip.transition()
               .duration(100)
               .style("opacity", 0);
         });
}
​
d3.select(self.frameElement).style("height", "800px");
d3.select(self.frameElement).style("width", 1050 + "px");
d3.select(self.frameElement).style("margin-left", -60 + "px");
d3.select(self.frameElement).style("padding-left", 30 + "px");
​
</script>
</body>
</html>
    