各都道府県の男性の未婚率から女性の未婚率を引いた差分です。
男性の方が全国的に未婚率が高めですが
その未婚率の差にも地域差があります。
Last active
August 29, 2015 14:10
-
-
Save miyu80/dbcf7254d26bd3e89594 to your computer and use it in GitHub Desktop.
独身男性ここに在り…?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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