hitsujixgit · July 29, 2014 07:04
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="utf-8">
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/topojson.v0.min.js"></script>
 <style type="text/css">
 h1 {
    font-size: 16px;
 }
 svg {
    border: 1px solid #aaaaaa;
 }
 .subunit-boundary {
  fill: none;
  stroke: #777;
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
 }
 .cityname-label {
    fill-opacity: .5;
    font-size: 8px;
    font-weight: 300;     
    text-anchor: middle;
    display: none;
 }
 .stat-label {
    fill-opacity: .5;
    font-size: 8px;
    font-weight: 300;
    text-anchor: middle;
    display: none;
 }
 </style>
 <title>Yokohama city map</title>
 </head>
 <body>
 <h1>Yokohama city map</h1>
 <div id="map"></div>

 <script type="text/javascript">
    
    // file読み込み制御用
    var readTopofileDone = false;
    var readAttrfileDone = false;
    // filedata格納変数
    var topodata;
    var attrdata;
    
    var map_width = 500;
    var map_height = 650;
    var svg;
    
    function readTopofile(json) {
        topodata = json;
        readTopofileDone = true;
    }
    function readAttrfile(json) {
        attrdata = json;
        readAttrfileDone = true;
    }
    
    d3.json("yokohama_topo_out.json", function(error, json) {
        if(error) return console.warn(error);
            readTopofile(json);
            if (readTopofileDone && readAttrfileDone) {
                main(topodata, attrdata);
            }
        });
    
    d3.json("yokohama_codes_and_stat.json", function(error, json) {
        if(error) return console.warn(error);
            readAttrfile(json);
            if (readTopofileDone && readAttrfileDone) {
                main(topodata, attrdata);
            }
        });
    
    function main(topo, attr) {
        
        var labelLineHight = 16;
        // 属性情報を入れ直すためのHash Table
        var attrHash = new Object();
        
        // attr情報を、IDをkeyとするhash-tableに変換する
        // idをKeyとしたhashテーブル＆property毎のhashテーブルを作成する
        attr.forEach(function(e){
            attrHash[e.cityid]=e;
        });
        
        // 人口の最大値と最小値を求めておく
        // --全年齢人口データのみを入れた配列を作成する
        var elements = [];
        var target_key = "ttl";
        attr.forEach(function(e){
            elements.push(e[target_key]);
        });
        // -- maxとminをとる
        var target_max = Math.max.apply(null, elements);
        var target_min = Math.min.apply(null, elements);
        
         // svgを追加
        svg = d3.select("body #map").append("svg")
                .attr("width", map_width)
                .attr("height", map_height);
        
        // 横浜市のmapを描画する
        var yokohama = topojson.object(topo, topo.objects.yokohama);
        console.log(yokohama);
        
        // 横浜市を中心に指定したメルカトル図法で10万分の1で描画する
        var projection = d3.geo.mercator()
                .center([139.59,35.45])
                .scale(100000)
                .translate([map_width / 2, map_height / 2]);
        
        // pathを作成する
        var path = d3.geo.path().projection(projection);
        svg.append("path")
          .datum(yokohama)
          .attr("d", path);
        
        // classを指定する
        svg.selectAll(".yokohama")
            .data(yokohama.geometries)
        .enter().append("path")
            .attr("class", function(d) {
                return "yokohama " + d.properties.name;
                })
            .attr("d", path);
        
        // 色を塗る
        var areaGrad = d3.scale.linear()
                        .domain([target_min, target_max])
                        .range(["#bee59e", "#349946"]);
        svg.selectAll("path").attr("fill", "#bee59e");
        for (var k in attrHash) {
            svg.selectAll("."+k).attr("fill", areaGrad(attrHash[k][target_key]));
        }
        
        // 内部境界に線を引く
        svg.append("path")
           .datum(topojson.mesh(topo, topo.objects.yokohama, function(a, b) { return a !== b; }))
           .attr("d", path)
           .attr("class", "subunit-boundary");
        
        // 区コードのラベル貼り
        var city_labels = new Array();
        svg.selectAll(".cityname-label")
            .data(yokohama.geometries)
          .enter()
            .append("text")
                .attr("class", function(d) {
                    if(!(city_labels.indexOf(d.properties.name) > -1)) {
                        city_labels.push(d.properties.name);
                    }
                    return "cityname-label "+d.properties.name; // class名にidを付与
                    })
                .attr("transform", function(d) {
                    // 文字をpath中央から、文字高さ1/2分高い位置に貼る
                    var pos = path.centroid(d);
                    pos[1] -= labelLineHight / 2;
                    return "translate(" + pos + ")";
                })
                .attr("dy", ".35em")
                .text(function(d) {
                    return attrHash[d.properties.name].name;
                });
        
        // 値ラベル貼り
        svg.selectAll(".stat-label")
            .data(yokohama.geometries)
          .enter()
            .append("text")
                .attr("class", function(d) {
                    if(!(city_labels.indexOf(d.properties.name) > -1)) {
                        city_labels.push(d.properties.name);
                    }
                    return "stat-label "+d.properties.name; // class名にidを付与
                    })
                .attr("transform", function(d) {
                    // 文字をpath中央から、文字高さ1/2分高い位置に貼る
                    var pos = path.centroid(d);
                    pos[1] += labelLineHight / 2;
                    return "translate(" + pos + ")";
                })
                .attr("dy", ".35em")
                .text(function(d) {
                    return attrHash[d.properties.name][target_key];
                });
        
        // 各最初のエリアのみラベルを表示する
        for (var i in city_labels) {
            svg.select(".cityname-label."+city_labels[i]).style("display", "block");
            svg.select(".stat-label."+city_labels[i]).style("display", "block");
        }
        
    }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<style type="text/css">
	h1 {
	font-size: 16px;
	}
	svg {
	border: 1px solid #aaaaaa;
	}
	.subunit-boundary {
	fill: none;
	stroke: #777;
	stroke-dasharray: 2,2;
	stroke-linejoin: round;
	}
	.cityname-label {
	fill-opacity: .5;
	font-size: 8px;
	font-weight: 300;
	text-anchor: middle;
	display: none;
	}
	.stat-label {
	fill-opacity: .5;
	font-size: 8px;
	font-weight: 300;
	text-anchor: middle;
	display: none;
	}
	</style>
	<title>Yokohama city map</title>
	</head>
	<body>
	<h1>Yokohama city map</h1>
	<div id="map"></div>

	<script type="text/javascript">

	// file読み込み制御用
	var readTopofileDone = false;
	var readAttrfileDone = false;
	// filedata格納変数
	var topodata;
	var attrdata;

	var map_width = 500;
	var map_height = 650;
	var svg;

	function readTopofile(json) {
	topodata = json;
	readTopofileDone = true;
	}
	function readAttrfile(json) {
	attrdata = json;
	readAttrfileDone = true;
	}

	d3.json("yokohama_topo_out.json", function(error, json) {
	if(error) return console.warn(error);
	readTopofile(json);
	if (readTopofileDone && readAttrfileDone) {
	main(topodata, attrdata);
	}
	});

	d3.json("yokohama_codes_and_stat.json", function(error, json) {
	if(error) return console.warn(error);
	readAttrfile(json);
	if (readTopofileDone && readAttrfileDone) {
	main(topodata, attrdata);
	}
	});

	function main(topo, attr) {

	var labelLineHight = 16;
	// 属性情報を入れ直すためのHash Table
	var attrHash = new Object();

	// attr情報を、IDをkeyとするhash-tableに変換する
	// idをKeyとしたhashテーブル＆property毎のhashテーブルを作成する
	attr.forEach(function(e){
	attrHash[e.cityid]=e;
	});

	// 人口の最大値と最小値を求めておく
	// --全年齢人口データのみを入れた配列を作成する
	var elements = [];
	var target_key = "ttl";
	attr.forEach(function(e){
	elements.push(e[target_key]);
	});
	// -- maxとminをとる
	var target_max = Math.max.apply(null, elements);
	var target_min = Math.min.apply(null, elements);

	// svgを追加
	svg = d3.select("body #map").append("svg")
	.attr("width", map_width)
	.attr("height", map_height);

	// 横浜市のmapを描画する
	var yokohama = topojson.object(topo, topo.objects.yokohama);
	console.log(yokohama);

	// 横浜市を中心に指定したメルカトル図法で10万分の1で描画する
	var projection = d3.geo.mercator()
	.center([139.59,35.45])
	.scale(100000)
	.translate([map_width / 2, map_height / 2]);

	// pathを作成する
	var path = d3.geo.path().projection(projection);
	svg.append("path")
	.datum(yokohama)
	.attr("d", path);

	// classを指定する
	svg.selectAll(".yokohama")
	.data(yokohama.geometries)
	.enter().append("path")
	.attr("class", function(d) {
	return "yokohama " + d.properties.name;
	})
	.attr("d", path);

	// 色を塗る
	var areaGrad = d3.scale.linear()
	.domain([target_min, target_max])
	.range(["#bee59e", "#349946"]);
	svg.selectAll("path").attr("fill", "#bee59e");
	for (var k in attrHash) {
	svg.selectAll("."+k).attr("fill", areaGrad(attrHash[k][target_key]));
	}

	// 内部境界に線を引く
	svg.append("path")
	.datum(topojson.mesh(topo, topo.objects.yokohama, function(a, b) { return a !== b; }))
	.attr("d", path)
	.attr("class", "subunit-boundary");

	// 区コードのラベル貼り
	var city_labels = new Array();
	svg.selectAll(".cityname-label")
	.data(yokohama.geometries)
	.enter()
	.append("text")
	.attr("class", function(d) {
	if(!(city_labels.indexOf(d.properties.name) > -1)) {
	city_labels.push(d.properties.name);
	}
	return "cityname-label "+d.properties.name; // class名にidを付与
	})
	.attr("transform", function(d) {
	// 文字をpath中央から、文字高さ1/2分高い位置に貼る
	var pos = path.centroid(d);
	pos[1] -= labelLineHight / 2;
	return "translate(" + pos + ")";
	})
	.attr("dy", ".35em")
	.text(function(d) {
	return attrHash[d.properties.name].name;
	});

	// 値ラベル貼り
	svg.selectAll(".stat-label")
	.data(yokohama.geometries)
	.enter()
	.append("text")
	.attr("class", function(d) {
	if(!(city_labels.indexOf(d.properties.name) > -1)) {
	city_labels.push(d.properties.name);
	}
	return "stat-label "+d.properties.name; // class名にidを付与
	})
	.attr("transform", function(d) {
	// 文字をpath中央から、文字高さ1/2分高い位置に貼る
	var pos = path.centroid(d);
	pos[1] += labelLineHight / 2;
	return "translate(" + pos + ")";
	})
	.attr("dy", ".35em")
	.text(function(d) {
	return attrHash[d.properties.name][target_key];
	});

	// 各最初のエリアのみラベルを表示する
	for (var i in city_labels) {
	svg.select(".cityname-label."+city_labels[i]).style("display", "block");
	svg.select(".stat-label."+city_labels[i]).style("display", "block");
	}

	}
	</script>
	</body>
	</html>