D3 Examples - Kepemilikan Tanah Tempat Tinggal, BPS 2010

Kepemilikan Tanah Tempat Tinggal, BPS 2010

Grafik batang di atas menampilkan sepuluh provinsi teratas berdasarkan jenis sertifikat kepemilikan tanah, diurutkan menurut persentase populasi kepemilikan. Berdasarkan Badan Pusat Statistik, terdapat 4 jenis bukti kepemilikan tanah tempat tinggal:

Sertifikat Hak Milik (SHM) atas nama Anggota Rumah Tangga (ART),

Sertifikat Hak Milik bukan atas nama ART,

Sertifikat lain (cth. SHGB, SHP, SSRS), dan

Lainnya (cth. Girik, Akte Jual Beli Notaris/PPAT, dll).

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  background: #fcfcfa;
  color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 1em auto 4em auto;
  position: relative;
  width: 700px;
}
​
svg {
  font: 10px sans-serif;
}
​
#menu {
  font-size: 13px;
}
​
.bar rect {
  fill: steelblue;
}
​
.bar:hover rect {
  fill: brown;
}
​
.value {
  fill: white;
}
​
.axis path, .axis line {
  fill: none;
  stroke: none;
  shape-rendering: crispEdges;
}
​
.x.axis line {
  stroke: #fff;
  stroke-opacity: .8;
}
​
.y.axis line {
  stroke: #000;
}
​
</style>
<body>
<p id="menu">Jenis: <select></select>
<script src="https://d3js.org/d3.v2.min.js"></script>
<script>
​
var margin = {top: 20, right: 40, bottom: 10, left: 160},
    width = 750,
    height = 250 - margin.top - margin.bottom;
​
var format = d3.format(".1%"),
    states,
    house;
​
var x = d3.scale.linear()
    .range([0, width]);
​
var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], .1);
​
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("top")
    .tickSize(-height - margin.bottom)
    .tickFormat(format);
​
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .style("margin-left", -margin.left + "px")
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
svg.append("g")
    .attr("class", "x axis");
​
svg.append("g")
    .attr("class", "y axis")
  .append("line")
    .attr("class", "domain")
    .attr("y2", height);
​
var menu = d3.select("#menu select")
    .on("change", change);
​
d3.csv("ppat2010.csv", function(data) {
  states = data;
​
  var houses = d3.keys(states[0]).filter(function(key) {
    return key != "Nama Provinsi" && key != "Total Kepemilikan";
  });
​
  states.forEach(function(state) {
    houses.forEach(function(house) {
      state[house] = state[house] / state['Total Kepemilikan'];
    });
  });
​
  menu.selectAll("option")
      .data(houses)
    .enter().append("option")
      .text(function(d) { return d; });
​
  menu.property("value", "SHM atas nama ART");
​
  redraw();
});
​
var altKey;
​
d3.select(window)
    .on("keydown", function() { altKey = d3.event.altKey; })
    .on("keyup", function() { altKey = false; });
​
function change() {
  clearTimeout(timeout);
  d3.transition()
      .duration(altKey ? 7500 : 750)
      .each(redraw);
}
​
function redraw() {
  var house1 = menu.property("value"),
      top = states.sort(function(a, b) { return b[house1] - a[house1]; }).slice(0, 10);
      console.log(top);
  y.domain(top.map(function(d) { return d['Nama Provinsi']; }));
  
  var bar = svg.selectAll(".bar")
      .data(top, function(d) { return d['Nama Provinsi']; });
  
  var barEnter = bar.enter().insert("g", ".axis")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(0," + (y(d['Nama Provinsi']) + height) + ")"; })
      .style("fill-opacity", 0);
  
  barEnter.append("rect")
      .attr("width", house && function(d) { return x(d[house]); })
      .attr("height", y.rangeBand());
​
  barEnter.append("text")
      .attr("class", "label")
      .attr("x", -3)
      .attr("y", y.rangeBand() / 2)
      .attr("dy", ".35em")
      .attr("text-anchor", "end")
      .text(function(d) { return d['Nama Provinsi']; });
​
  barEnter.append("text")
      .attr("class", "value")
      .attr("x", house && function(d) { return x(d[house]) - 3; })
      .attr("y", y.rangeBand() / 2)
      .attr("dy", ".35em")
      .attr("text-anchor", "end");
​
  x.domain([0, top[0][house = house1]]);
​
  var barUpdate = d3.transition(bar)
      .attr("transform", function(d) { return "translate(0," + (d.y0 = y(d['Nama Provinsi'])) + ")"; })
      .style("fill-opacity", 1);
​
  barUpdate.select("rect")
      .attr("width", function(d) { return x(d[house]); });
​
  barUpdate.select(".value")
      .attr("x", function(d) { return x(d[house]) - 3; })
      .text(function(d) { return format(d[house]); });
​
  var barExit = d3.transition(bar.exit())
      .attr("transform", function(d) { return "translate(0," + (d.y0 + height) + ")"; })
      .style("fill-opacity", 0)
      .remove();
​
  barExit.select("rect")
      .attr("width", function(d) { return x(d[house]); });
​
  barExit.select(".value")
      .attr("x", function(d) { return x(d[house]) - 3; })
      .text(function(d) { return format(d[house]); });
​
  d3.transition(svg).select(".x.axis")
      .call(xAxis);
}
​
var timeout = setTimeout(function() {
  menu.property("value", "SHM atas nama ART").node().focus();
  change();
}, 5000);
​
d3.select(self.frameElement).style("height", 310 + "px");
​
</script>
    