Skip to content

Instantly share code, notes, and snippets.

@shotahorii

shotahorii/README.md

Last active December 27, 2015 13:28
Show Gist options
  • Save shotahorii/7333026 to your computer and use it in GitHub Desktop.
Save shotahorii/7333026 to your computer and use it in GitHub Desktop.
Download ZIP
patternables.com
Raw
README.md

Original data: 人口推計(2012年) 年齢(各歳), 男女別人口及び人口性比－総人口, 日本人人口(平成24年10月1日現在)
Source: e-Stat

Raw
data.csv
age male female
0 535 509
1 548 519
2 534 510
3 534 510
4 549 524
5 547 522
6 543 518
7 542 517
8 562 537
9 573 545
10 588 561
11 597 568
12 604 573
13 603 575
14 613 585
15 610 583
16 607 578
17 627 594
18 633 601
19 623 593
20 633 601
21 625 596
22 636 606
23 650 621
24 668 637
25 681 653
26 695 665
27 721 695
28 743 717
29 751 727
30 751 732
31 761 739
32 795 772
33 816 792
34 850 826
35 871 847
36 915 888
37 957 929
38 1009 980
39 1025 999
40 1007 979
41 979 956
42 952 929
43 935 918
44 914 900
45 912 896
46 711 704
47 879 870
48 823 813
49 802 795
50 775 770
51 762 758
52 767 766
53 779 781
54 757 763
55 736 742
56 772 780
57 799 808
58 798 810
59 844 865
60 889 915
61 941 971
62 1009 1047
63 1100 1148
64 1087 1141
65 1029 1084
66 637 682
67 674 737
68 813 898
69 781 869
70 795 892
71 765 866
72 684 786
73 585 683
74 611 729
75 613 745
76 596 743
77 551 707
78 500 662
79 478 657
80 446 631
81 405 597
82 360 555
83 325 527
84 291 494
85 256 459
86 223 430
87 179 379
88 139 324
89 105 286
90 83 249
91 65 211
92 54 186
93 35 126
94 28 108
95 22 87
96 16 70
97 10 49
98 8 38
99 5 26
100+ 7 44
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
fill: black;
font-size: 10px;
}
.bar_male {
fill: darkblue;
}
.bar_female {
fill: orange;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
//define parameters.
var margin =40;
var w = 800-2*margin;
var h = 1200-2*margin;
//generate a svg with the given size, and store a reference to the svg.
var svg = d3.select("body")
.append("svg")
.attr({
width:w+2*margin,
height:h+2*margin
})
.append("g")
.attr("transform", "translate("+margin+","+margin+")");
//parameters
var centre = 40;
var hw = w/2 - centre/2;
var mx = hw;
var fx = hw+centre;
//scales
var yScale = d3.scale.ordinal()
.rangeRoundBands([0, h], .05);
var mxScale = d3.scale.linear()
.range([mx, 0]);
var fxScale = d3.scale.linear()
.range([fx, w]);
//create axises.
var mxAxis = d3.svg.axis()
.scale(mxScale)
.orient("bottom");
var fxAxis = d3.svg.axis()
.scale(fxScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("right");
//read data.
//note that this method is 'asynchronised'. So it returns immediately.
//This means that the program goes on regardless of the loading.
//Therefore, all functions related to the data must be written in this method.
d3.csv("data.csv")
.row(function(d){return {age: d.age, male: +d.male, female: +d.female};})
.get(function(error, rows){
console.log(rows);
//set domains of the scales.
yScale.domain(rows.map(function(d){return d.age;}));
var maximum = d3.max(rows, function(d){return d3.max([d.male, d.female]);});
mxScale.domain([0, maximum]);
fxScale.domain([0, maximum]);
//draw y axis
svg.append("g")
.attr({
class: "axis",
transform: "translate("+mx+",0)"
})
.call(yAxis)
.append("text")
.attr({
x: 10,
y: -5
})
.style("text-anchor", "start")
.text("age");
//draw x axises
svg.append("g")
.attr({
class: "axis",
transform: "translate(0, "+h+")"
})
.call(mxAxis)
.append("text")
.attr({
x: 0,
y: 30
})
.style("text-anchor", "start")
.text("male population (thousands)");
svg.append("g")
.attr({
class: "axis",
transform: "translate(0, "+h+")"
})
.call(fxAxis)
.append("text")
.attr({
x: w,
y: 30
})
.style("text-anchor", "end")
.text("female population (thousands)");
//draw bars.
svg.selectAll(".bar_male")
.data(rows)
.enter()
.append("rect")
.attr({
class: "bar_male",
x: function(d){return mxScale(d.male);},
width: function(d){return mx-mxScale(d.male);},
y: function(d){return yScale(d.age);},
height: yScale.rangeBand()
});
svg.selectAll(".bar_female")
.data(rows)
.enter()
.append("rect")
.attr({
class: "bar_female",
x: fx,
width: function(d){return fxScale(d.female)-fx;},
y: function(d){return yScale(d.age);},
height: yScale.rangeBand()
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment