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).

Kredit grafik: Mike Bostock.

Sumber data: Badan Pusat Statistics.

<!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);
}

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>

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

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