D3 Examples - Kabupaten Penerima Dana Pemberdayaan Masyarakat, PNPM 2014

Kabupaten Penerima Dana Pemberdayaan Masyarakat, PNPM 2014

Grafik peta di atas menampilkan proporsi besar dana PNPM yang diterima oleh masing-masing kabupaten di Indonesia di tahun 2014. Terdapat dua jenis dana yang tercatat untuk program PNPM ini dari Bank Dunia (World Bank), yaitu:

Dana Community Development Area (CDA),

Dana Civil Society Fund (CSF)

Catatan: warna merah menandakan data tidak tersedia atau tidak dapat disimpulkan (lihat "Catatan Pinggir").

Kredit grafik peta: Mike Bostock

Sumber data: PNPM Socrata (diunduh 18 Juli 2014)

Catatan Pinggir

Pada saat pemprosesan data terdapat beberapa ketidaksesuaian nama-nama kabupaten antara dataset PNPM dan data topologi ID_ADM2. Tabel berikut menampilkan perbandingan nama-nama tersebut dan resolusi yang diambil dalam membuat penyesuaian nama.

PNPM | ID_ADM2 | Resolusi ---- | ------- | -------- Kepulauan Meranti | -- | Bolaang Mongondow Timur | Bolaang Mongondow | Bolaang Mongondow Selatan | Bolaang Mongondow | Bolaang Mongondow Utara | Bolaang Mongondow | Kayong Utara | -- | Sawahlunto/Sijunjung | Sawahlunto | Ubah nama Sawahlunto/Sijunjung di PNPM menjadi Sawahlunto Nias Utara | Nias Selatan, Nias | Nias Barat | Nias Selatan, Nias | Manggarai Timur | Manggarai Barat, Manggarai | Lingga | Lingga (Kotamadya) | Ubah data Lingga di ID_ADM2 menjadi Kabupaten Lombok Utara | Lombok Barat, Lombok Tengah, Lombok Timur | Kota Tangerang Selatan | Kota Tangerang, Tangerang | Bengkulu Tengah | Bengkulu Utara, Bengkulu Selatan, Bengkulu | Labuhan Batu Utara | Labuhan Batu | Labuhan Batu Selatan | Labuhan Batu | Dharmas Raya | Dharmasraya | Ubah nama Dharmas Raya di PNPM menjadi Dharmasraya Anambas | -- | Pidie Jaya | -- | Tana Tidung | -- | Kutai Kertanegara | Kutai Kartanegara | Ubah nama Kutai Kertanegara di PNPM menjadi Kutai Kartanegara Sumba Tengah | Sumba Barat, Sumba Timur | Sumba Barat Daya | Sumba Barat, Sumba Timur Sigi | -- | Banjar | Banjar (Kotamadya) | Ubah data Banjar di ID_ADM2 menjadi Kabupaten Minahasa Tenggara | Minahasa Utara, Minahasa Selatan, Minahasa Kubu Raya | -- | Pesawaran | -- | Batu Bara | -- | Mesuji | -- | Buton Utara | Buton | GunungSitoli | -- | Padang Lawas Utara | -- | Padang Lawas | -- | Konawe | Konawe Selatan (Kotamadya) | Konawe Utara | Konawe Selatan (Kotamadya) | Konawe Selatan | Konawe Selatan (Kotamadya) | Ubah data Konawe Selatan di ID_ADM2 menjadi Kabupaten Sabu Raijua | -- | Bintan | -- | Kepulauan Sangihe | Kepulauan Sangihe Talaud | Ubah name Kepulauan Sangihe Talaud di ID_ADM2 menjadi Kepulauan Sangihe Bandung Barat | Bandung | Toraja Utara | -- | Buru Selatan | Buru | Empat Lawang | -- | Gorontalo Utara | Gorontalo | Nagekeo | -- | Pringsewu | -- | Tulang Bawang Barat | Tulang Bawang | Maluku Barat Daya | Maluku Tengah, Maluku Tenggara Barat, Maluku Tenggara | Musi Banyuasin | Musi Banyu Asin | Tojo Una-una | Tojo Una-Una | Polewali Mandar | Polewali Mamasa | Kab. Kep. Siau Tagolandang Biaro | -- |

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.buttons {
  text-align: center;
  width: auto;
}
​
.buttons .button {
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  border-bottom-color: #ccc;
  border-radius: 3px;
  border: solid 1px #ddd;
  background: #fff;
  color: #888;
}
​
.buttons .button.fund-active {
  box-shadow: inset 0 1px 4px rgba(0,0,0,.15);
  z-index: 2
}
​
.button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-align: center;
  line-height: 1.3em;
  margin: 4px -5px 4px 0;
  padding: 7px 0;
  position: relative;
  width: 96px;
  cursor: pointer;
}
​
.button:first-child {
  border-radius: 3px 0 0 3px;
}
​
.button:last-child {
  border-radius: 0 3px 3px 0;
}
​
.button.fund-active {
  background-color: #f0f0f0;
  border-color: #ccc;
  border-top-color: #bbb;
  color: #333;
}
​
.legend {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}
​
.legend path {
  display: none;
}
​
.legend line {
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.boundary {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}
​
.region:hover {
  opacity: 0.5;
}
​
</style>
<body>
<div class="buttons">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
​
var margin = {top: 100, right: 100, bottom: 100, left: 100},
    width = 1400 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;
​
var format = d3.format(".d");
​
var funds = [
  {
    label: "Dana CDA",
    dataset: d3.map(),
    color: d3.scale.threshold()
        .domain([0.5, 2, 5, 10, 20, 35, 50])
        .range(["#deebf7", "#c6dbef", "#9ecae1", "#6baed6", "#4292c6", "#2171b5", "#08519c", "#08306b"]),
    xscale: d3.scale.linear()
        .domain([0, 55])
        .range([0, 420])
  },
  {
    label: "Dana CSF",
    dataset: d3.map(),
    color: d3.scale.threshold()
        .domain([0.1, 0.2, 0.5, 1, 2, 3, 4])
        .range(["#deebf7", "#c6dbef", "#9ecae1", "#6baed6", "#4292c6", "#2171b5", "#08519c", "#08306b"]),
    xscale: d3.scale.linear()
        .domain([0, 4.4])
        .range([0, 420])
  }
];
​
var projection = d3.geo.mercator()
    .scale(1500)
    .translate([-2460, 175]);
​
var path = d3.geo.path()
    .projection(projection);
​
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);
​
var map = svg.append("g")
    .attr("transform", "translate(0,-20)");
​
var legend = svg.append("g")
    .attr("class", "legend")
    .attr("transform", "translate(30,420)");
​
var legendCaption = legend.append("text")
    .attr("class", "caption")
    .attr("y", -6)
    .text("Besar dana (dalam miliar rupiah)");
​
var xAxis = d3.svg.axis()
    .orient("bottom")
    .tickSize(13);
​
var buttons = d3.select(".buttons");
​
var button = buttons.selectAll(".button")
    .data(funds)
  .enter().append("button")
    .attr("class", "button")
    .text(function(d) { return d.label; });
​
var tooltip = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);
​
queue()
    .defer(d3.json, "/johardi/raw/e2eb227a477fe0e7fb2b/id.json")
    .defer(d3.csv, "pnpm2014.csv", function(d) {
      funds[0].dataset.set(d.id, +d.cda_fund);
      funds[1].dataset.set(d.id, +d.csf_fund);
    })
    .await(ready);
​
function ready(error, id) {
  var boundaries = map.selectAll("path")
      .data(topojson.feature(id, id.objects.regency).features)
    .enter().append("path")
      .attr("class", "region")
      .attr("d", path);
​
  map.append("path")
      .datum(topojson.mesh(id, id.objects.regency, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
​
  button.on("click", click);
  click(funds[0]);
​
  function click(d) {
    var color = d.color;
    var x = d.xscale;
​
    button.classed("fund-active", function(p) { return d === p; });
​
    boundaries.style("fill", function(regency) {
      var rate = d.dataset.get(regency.id);
      if (typeof rate == 'undefined') {
        return "#ff0000";
      }
      return color(rate);
    });
​
    var legendData = legend.selectAll("rect")
        .data(color.range().map(function(p, i) {
          return {
            x0: i ? x(color.domain()[i - 1]) : x.range()[0],
            x1: i < color.domain().length ? x(color.domain()[i]) : x.range()[1],
            color: p
          };
        }));
​
    legendData.enter().insert("rect")
        .attr("height", 8)
        .attr("x", function(p) { return p.x0; })
        .attr("width", function(p) { return p.x1 - p.x0; })
        .style("fill", function(p) { return p.color; });
​
    legendData.transition()
        .attr("x", function(p) { return p.x0; })
        .attr("width", function(p) { return p.x1 - p.x0; })
​
    xAxis.scale(x)
        .tickValues(color.domain())
        .tickFormat(function(p) { return p > color.domain()[0] ? format(p) : null; });
​
    legend.call(xAxis);
  }
}
​
d3.select(self.frameElement).style("height", 520 + "px");
d3.select(self.frameElement).style("width", 1260 + "px");
d3.select(self.frameElement).style("margin-left", -145 + "px");
​
</script>
    