skoslitz/README.md

## README.md

      
    Raw
  

              README.md
            
          
    TopoJSON Japan, generiert aus naturalearthdata
Statistik Teeanbau in den Präfekturen: jap. Ministerium für Landwirtschaft et al.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">

.japan {
  fill: none;
  /*opacity: 0.6;*/
  stroke: #000;
  stroke-width: 0.5;
}

.q0-4 { fill:rgb(237,248,233); }
.q1-4 { fill:rgb(186,228,179); }
.q2-4 { fill:rgb(116,196,118); }
.q3-4 { fill:rgb(35,139,69); }

</style>
<body>
<div id="map"></div>
<h1 id="japanState">Präfektur</h1>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script type="text/javascript">

var width = 600,
    height = 600;

var lon = -138.0;
var lat = 36;

var rateById = d3.map();

var quantize = d3.scale.threshold()
.domain([143, 692, 18700])
.range(d3.range(4).map(function(i) {  return "q" + i + "-4";  }));

var projection = d3.geo.albers()
.center([0, lat])
.rotate([lon, 0])
.parallels([23, 46])
.scale(1700).translate([width / 2, height / 2]);

var path = d3.geo.path().projection(projection);

var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);

queue()
    .defer(d3.json, "japan.json")
    .defer(d3.tsv, "japanTea.tsv", function(d) { rateById.set(d.id, +d.GrowingArea); })
    .await(ready);

function ready(error, japan) {
  svg.append("g")
      .attr("class", "japan")
    .selectAll("path")
      .data(topojson.feature(japan, japan.objects.japan).features)
    .enter().append("path")
      .attr("class", function(d) { return quantize(rateById.get(d.properties.NAME_1)); })
      .attr("d", path)
      .attr("d", path).on("mouseover", function(d) {
      return d3.select("#japanState").text(d.properties.NAME_1).style("opacity", "1");
    }).on("mouseout", function(d) {
      return d3.select("#japanState").text("Präfektur").style("opacity", "0.4");
    });

}

</script>
</body>

## japan.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              japan.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## japanTea.tsv

          
            id
            GrowingArea
            Production

            
              Hokkaido
              0
              0

            
              Aomori
              0
              0

            
              Iwate
              3
              0

            
              Miyagi
              14
              0

            
              Akita
              0
              0

            
              Yamagata
              0
              0

            
              Fukushima
              1
              0

            
              Ibaraki
              450
              149

            
              Tochigi
              69
              0

            
              Gunma
              53
              0

            
              Saitama
              968
              3010

            
              Chiba
              220
              0

            
              Tokyo
              144
              0

            
              Kanagawa
              275
              0

            
              Niigata
              20
              0

            
              Toyama
              3
              0

            
              Ishikawa
              4
              0

            
              Fukui
              3
              0

            
              Yamanashi
              132
              0

            
              Nagano
              84
              0

            
              Gifu
              982
              2820

            
              Shizuoka
              18700
              151300

            
              Aichi
              635
              4530

            
              Mie
              3180
              34200

            
              Shiga
              645
              3270

            
              Kyoto
              1580
              13100

            
              Osaka
              0
              0

            
              Hyogo
              164
              0

            
              Nara
              739
              7380

            
              Wakayama
              33
              0

            
              Tottori
              11
              0

            
              Shimane
              208
              0

            
              Okayama
              129
              0

            
              Hiroshima
              75
              0

            
              Yamaguchi
              90
              0

            
              Tokushima
              294
              0

            
              Kagawa
              110
              0

            
              Ehime
              143
              0

            
              Kochi
              482
              1440

            
              Fukuoka
              1580
              10400

            
              Saga
              992
              7190

            
              Nagasaki
              754
              3650

            
              Kumamoto
              1600
              7020

            
              Oita
              431
              0

            
              Miyazaki
              1580
              17700

            
              Kagoshima
              8670
              115000

            
              Okinawa
              40
              0

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<style type="text/css">

	.japan {
	fill: none;
	/opacity: 0.6;/
	stroke: #000;
	stroke-width: 0.5;
	}

	.q0-4 { fill:rgb(237,248,233); }
	.q1-4 { fill:rgb(186,228,179); }
	.q2-4 { fill:rgb(116,196,118); }
	.q3-4 { fill:rgb(35,139,69); }

	</style>
	<body>
	<div id="map"></div>
	<h1 id="japanState">Präfektur</h1>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script type="text/javascript">

	var width = 600,
	height = 600;

	var lon = -138.0;
	var lat = 36;

	var rateById = d3.map();

	var quantize = d3.scale.threshold()
	.domain([143, 692, 18700])
	.range(d3.range(4).map(function(i) { return "q" + i + "-4"; }));

	var projection = d3.geo.albers()
	.center([0, lat])
	.rotate([lon, 0])
	.parallels([23, 46])
	.scale(1700).translate([width / 2, height / 2]);

	var path = d3.geo.path().projection(projection);

	var svg = d3.select("#map").append("svg")
	.attr("width", width)
	.attr("height", height);

	queue()
	.defer(d3.json, "japan.json")
	.defer(d3.tsv, "japanTea.tsv", function(d) { rateById.set(d.id, +d.GrowingArea); })
	.await(ready);

	function ready(error, japan) {
	svg.append("g")
	.attr("class", "japan")
	.selectAll("path")
	.data(topojson.feature(japan, japan.objects.japan).features)
	.enter().append("path")
	.attr("class", function(d) { return quantize(rateById.get(d.properties.NAME_1)); })
	.attr("d", path)
	.attr("d", path).on("mouseover", function(d) {
	return d3.select("#japanState").text(d.properties.NAME_1).style("opacity", "1");
	}).on("mouseout", function(d) {
	return d3.select("#japanState").text("Präfektur").style("opacity", "0.4");
	});

	}

	</script>
	</body>
id	GrowingArea	Production
Hokkaido	0	0
Aomori	0	0
Iwate	3	0
Miyagi	14	0
Akita	0	0
Yamagata	0	0
Fukushima	1	0
Ibaraki	450	149
Tochigi	69	0
Gunma	53	0
Saitama	968	3010
Chiba	220	0
Tokyo	144	0
Kanagawa	275	0
Niigata	20	0
Toyama	3	0
Ishikawa	4	0
Fukui	3	0
Yamanashi	132	0
Nagano	84	0
Gifu	982	2820
Shizuoka	18700	151300
Aichi	635	4530
Mie	3180	34200
Shiga	645	3270
Kyoto	1580	13100
Osaka	0	0
Hyogo	164	0
Nara	739	7380
Wakayama	33	0
Tottori	11	0
Shimane	208	0
Okayama	129	0
Hiroshima	75	0
Yamaguchi	90	0
Tokushima	294	0
Kagawa	110	0
Ehime	143	0
Kochi	482	1440
Fukuoka	1580	10400
Saga	992	7190
Nagasaki	754	3650
Kumamoto	1600	7020
Oita	431	0
Miyazaki	1580	17700
Kagoshima	8670	115000
Okinawa	40	0