Skip to content

Instantly share code, notes, and snippets.

@soedomoto

soedomoto/README.md

Last active February 16, 2016 03:05
Show Gist options
  • Save soedomoto/92ff483233f4d1e5f244 to your computer and use it in GitHub Desktop.
Save soedomoto/92ff483233f4d1e5f244 to your computer and use it in GitHub Desktop.
Download ZIP
Buble Chart
Raw
README.md

Bubble Chart

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title> D3 Test </title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style>
body {
font-family: 'Open sans',verdana,arial,sans-serif;
font-size: 10pt
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script>
var width = 834;
var height = 370;
var margin = 70;
var labelX = 'In-Migration (000)';
var labelY = 'Out-Migration (000)';
var islands = {}
d3.csv("migration.csv",
function(d) {
islands[+d.island_code] = d.island;
return {
x: +d.inmigration/1000,
y: +d.outmigration/1000,
size: +d.poppulation,
label: d.prov_name,
c: +d.island_code
};
},
function(error, data) {
var x = d3.scale.linear().domain([
d3.min(data, function (d) { return d.x; }),
d3.max(data, function (d) { return d.x; })
]).range([0, width]);
var y = d3.scale.linear().domain([
d3.min(data, function (d) { return d.y; }),
d3.max(data, function (d) { return d.y; })
]).range([height, 0]);
var svg = d3.select('body')
.append('svg')
.attr('class', 'chart')
.attr("width", width + margin + margin)
.attr("height", height + margin + margin)
.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")");
// X Axis
var xAxis = d3.svg.axis().scale(x);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.text(labelX)
.attr("x", width + 20)
.attr("y", margin - 40)
.attr("dy", ".71em")
.style("text-anchor", "end");
// Y Axis
var yAxis = d3.svg.axis().scale(y).orient("left");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.text(labelY)
.attr("transform", "rotate(-90)")
.attr("x", 20)
.attr("y", -margin)
.attr("dy", ".71em")
.style("text-anchor", "end");
// Bubbles
var scale = d3.scale.sqrt().domain([
d3.min(data, function (d) { return d.size; }),
d3.max(data, function (d) { return d.size; })
]).range([5, 100]);
var color = d3.scale.category10();
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) { return x(d.x); })
.attr("cy", function (d) { return y(d.y); })
.attr("r", function (d) { return scale(d.size); })
.attr("text", function (d) { return d.label })
.style("fill", function (d) { return color(d.c); })
.attr("opacity", 0.7)
svg.selectAll("circle")
.each(function(d, i) {
circle = d3.select(this)
svg.append("text")
.text(circle.attr("text"))
.attr("dx", +circle.attr("cx") - (+circle.attr("r")/2))
.attr("dy", +circle.attr("cy") + 3);
})
}
);
</script>
</body>
</html>
Raw
migration.csv
prov_code prov_name island_code island poppulation inmigration outmigration
11 Nanggroe Aceh Darussalam 1 Sumatera 4494410 213553 264194
12 Sumatera Utara 1 Sumatera 12982204 521847 2298140
13 Sumatera Barat 1 Sumatera 4846909 344254 1151433
14 Riau 1 Sumatera 5538367 1911760 314303
15 Jambi 1 Sumatera 3092265 738961 181189
16 Sumatera Selatan 1 Sumatera 7450394 1017990 779239
17 Bengkulu 1 Sumatera 1715518 347651 110893
18 Lampung 1 Sumatera 7608405 1463929 713809
19 Kepulauan Bangka Belitung 1 Sumatera 1223296 206705 114379
21 Kepulauan Riau 1 Sumatera 1679163 801073 84751
31 DKI Jakarta 3 Jawa 9607787 4077515 3000081
32 Jawa Barat 3 Jawa 43053732 5225271 2514344
33 Jawa Tengah 3 Jawa 32382657 902711 6829637
34 D I Yogyakarta 3 Jawa 3457491 562384 901539
35 Jawa Timur 3 Jawa 37476757 925510 3864218
36 Banten 3 Jawa 10632166 2766750 552987
51 Bali 5 Bali 3890757 406921 269245
52 Nusa Tenggara Barat 5 Nusa Tenggara 4500212 115832 197243
53 Nusa Tenggara Timur 5 Nusa Tenggara 4683827 185083 268998
61 Kalimantan Barat 6 Kalimantan 4395983 293229 226982
62 Kalimantan Tengah 6 Kalimantan 2212089 526737 92935
63 Kalimantan Selatan 6 Kalimantan 3626616 487245 312390
64 Kalimantan Timur 6 Kalimantan 3553143 1308485 148585
71 Sulawesi Utara 7 Sulawesi 2270596 206139 217774
72 Sulawesi Tengah 7 Sulawesi 2635009 452792 122195
73 Sulawesi Selatan 7 Sulawesi 8034776 364288 1409614
74 Sulawesi Tenggara 7 Sulawesi 2232586 447484 177075
75 Gorontalo 7 Sulawesi 1040164 64585 117058
76 Sulawesi Barat 7 Sulawesi 1158651 172113 89607
81 Maluku 8 Maluku 1533506 123165 211980
82 Maluku Utara 8 Maluku 1038087 107681 62813
91 Papua Barat 9 Papua 760422 250196 48955
94 Papua 9 Papua 2833381 435773 87545
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment