Skip to content

Instantly share code, notes, and snippets.

@miyu80

miyu80/README.md

Last active August 29, 2015 14:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save miyu80/dbcf7254d26bd3e89594 to your computer and use it in GitHub Desktop.
Save miyu80/dbcf7254d26bd3e89594 to your computer and use it in GitHub Desktop.
Download ZIP
独身男性ここに在り…？
Raw
README.md

総務省国勢調査

各都道府県の男性の未婚率から女性の未婚率を引いた差分です。
男性の方が全国的に未婚率が高めですが　　 その未婚率の差にも地域差があります。

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<title></title>
<head>
<style type="text/css">
text.categoryLabel.on {
font-weight: bold;
}
</style>
</head>
<body>
<script>
var width = 960,
height = 960;
w = width
h = height
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var g = svg.append("g");
var mapfilepath ='http://bl.ocks.org/sugi2000/raw/f5cb73861573aab98187/japan0001.json';
//var mapfilepath = 'japan0001.json';
var kencsvpath = 'mikonmw.csv';
var zoom = d3.behavior.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed);
svg.call(zoom)
.call(zoom.event);
svg.append('rect')
.attr('x','0')
.attr('y','0')
.attr('width','80')
.attr('height','300')
.attr('fill','hsl(200,81%,89%)')
//laod ken csv
d3.csv(kencsvpath, function(error, dataset) {
svg.append('rect')
.attr('class', 'highlight')
.attr('x', 0)
.attr('y', -100)
.attr('width', '80')
.attr('height', '37.5')
.attr('fill', 'skyblue');
// set category label
var categoryLabels = Object.keys(dataset[0]);
categoryLabels.some(function(v, i){
if (v === 'id') { categoryLabels.splice(i, 2);}
});
svg.selectAll('text.categoryLabel')
.data(categoryLabels)
.enter()
.append('text')
.attr('class', 'categoryLabel')
.attr('x', 40)
.attr('y', function(d, i){return (i + 0.5) * 300 / categoryLabels.length;})
.attr('text-anchor', 'middle')
.attr('font-size', 9)
.attr('font-family', 'Arial')
.style('cursor', 'pointer')
.attr('value', function(d){return d;})
.on('click', function(d,i) {
d3.selectAll('text.categoryLabel.on')
.attr('class','categoryLabel');
this.classList.add('on');
highlightLabel(i);
d3.select(this)
.attr('class','categoryLabel on');
updateColor(this.getAttribute('value'));
})
.text(function(d){return d;});
function highlightLabel(i) {
svg.selectAll('rect.highlight')
.transition()
.duration(200)
.attr('y', 37.5* i);
svg.selectAll('rect.highlight2')
.transition()
.duration(200)
.attr('y', 37.5* i+20);
}
// text info
svg.append('rect')
.attr('x','100')
.attr('y','0')
.attr('width','350')
.attr('height','300')
.attr('fill', 'white')
svg.append('rect')
.attr('class', 'highlight2')
.attr('x', 100)
.attr('y', -100)
.attr('width', '250')
.attr('height', '2')
.attr('fill', 'skyblue');
var text = ['ほとんど地域差なし',
'宮城、東京、関西、九州が差が少なめ。',
'関東を中心に差が大きいので、関東が狙いめ！',
'30歳から34歳とあまり変わらず',
'この年代は、茨城県が差が大きい！',
'秋田、岩手、栃木、茨城が狙いめ…？',
'奈良が特に差が少なめ。',
'全体的に差が少なめ。'
];
var txt = svg.selectAll("text.box")
.data(text)
.enter()
.append("text")
.attr('class','box')
.attr("x",'100')
.attr("y",function(d,i){return (i + 0.5) * 300 / categoryLabels.length})
.style("font-size",12)
.style("fill", "black")
.text(function(d){return d;});
var updateColor = function(category) {
var svg = d3.select('svg');
var mappath = svg.selectAll('path')
.each(function() {
var p = d3.select(this);
if (p.attr('KENCODE')) {
var d = dataset[+p.attr('KENCODE') - 1];
if (d) {
p.attr('fill', color(+d[category]));
}
}
});
}
var color = d3.scale.linear()
.domain([0, 8, 17])
.range(["#009900", "#eee000", "#ee0000"]);
// load map data
d3.json(mapfilepath, function(error, collection) {
if (error) {
return console.warn(error);
}
// setup map
var projection = d3.geo.mercator()
.scale(1500)
.center(d3.geo.centroid(collection))
.translate([width / 2, height / 2 - 50]);
var path = d3.geo.path().projection(projection);
g.selectAll('path')
.data(collection.features)
.enter()
.append('path')
.attr('d', path)
.attr('JCODE', function(d) {return d.properties.JCODE;})
.attr('KENCODE', function(d) {
if (d.properties.JCODE) {
return d.properties.JCODE.substr(0, 2);
} else {
return 'null';
}
})
var num = [16, 14, 12, 10, 8, 6, 4, 2, 0];
svg.selectAll('circle.num')
.data(num)
.enter()
.append('circle')
.attr('class', 'num')
.attr('cx', 790)
.attr('cy', function(d,i){return 300 / 10 * i +10; })
.attr('r',10)
.attr('width', 10)
.attr('height', 300 / 10)
.attr('fill', function(d){return color(+d);});
svg.selectAll('text.num')
.data(num)
.enter()
.append('text')
.attr('class', 'num')
.attr('x', 810)
.attr('y', function(d,i){return 300 / 10 * i+12; })
.attr('font-size', 9)
.text(function(d){return d +'-'+(d+1) +'pt';});
});
});
function zoomed() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
d3.select(self.frameElement).style("height", height + "px");
</script>
Raw
mikonmw.csv
id name 20歳から24歳 25歳から29歳 30歳から34歳 35歳から39歳 40歳から44歳 45歳から49歳 50歳から54歳 55歳から59歳
1 北海道 4 10 11 10 8 6 6 5
2 青森県 6 13 14 14 13 12 11 9
3 岩手県 4 12 14 14 14 14 13 10
4 宮城県 2 7 10 10 11 10 10 8
5 秋田県 5 13 15 14 14 14 12 9
6 山形県 5 14 15 15 15 13 11 9
7 福島県 6 13 15 14 14 13 12 9
8 茨城県 5 14 17 17 16 14 12 10
9 栃木県 5 14 17 16 15 14 12 10
10 群馬県 5 13 15 15 14 12 11 10
11 埼玉県 4 12 15 15 14 12 11 10
12 千葉県 4 11 14 14 12 11 10 9
13 東京都 1 7 9 10 8 7 7 8
14 神奈川県 3 11 14 15 13 12 10 10
15 新潟県 5 13 13 14 14 13 12 10
16 富山県 5 13 15 14 13 12 10 9
17 石川県 5 11 12 12 11 10 9 7
18 福井県 5 14 15 14 12 11 9 8
19 山梨県 4 14 16 15 14 12 10 9
20 長野県 5 13 15 15 14 12 10 8
21 岐阜県 5 14 15 14 12 10 8 6
22 静岡県 0 5 15 16 14 12 11 10
23 愛知県 5 14 15 15 13 11 10 9
24 三重県 5 13 14 13 12 10 8 7
25 滋賀県 5 13 13 13 11 9 8 7
26 京都府 3 9 10 10 8 7 7 7
27 大廹府 3 7 9 9 8 7 7 8
28 兵庫県 3 8 9 9 8 7 7 7
29 奈良県 3 8 10 9 8 6 5 4
30 和歌山県 5 10 11 11 10 8 7 6
31 鳥取県 5 12 14 13 13 12 11 8
32 島根県 5 12 15 15 13 13 12 10
33 岡山県 4 11 12 12 11 10 9 7
34 広島県 5 10 11 11 9 9 8 7
35 山口県 5 11 12 12 11 9 9 8
36 徳島県 3 11 11 11 10 9 9 7
37 香川県 5 11 12 12 11 9 9 7
38 愛媛県 4 9 10 10 9 8 8 7
39 高知県 4 10 11 11 10 10 10 10
40 福岡県 3 6 7 8 7 6 6 5
41 佐賀県 4 9 10 11 11 9 8 6
42 長崎県 3 8 8 8 8 8 8 6
43 熊本県 4 8 9 9 8 8 8 6
44 大分県 4 9 10 10 9 8 7 6
45 宮崎県 4 9 9 9 9 8 9 6
46 鹿児島県 3 7 7 8 8 9 10 9
47 沖縄県 5 9 11 11 11 11 13 11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment