infographicstw/README.md

## README.md

      
    Raw
  

              README.md
            
          
    for blog.infographics.tw demo purpose

  
## county.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              county.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.css
path {
  cursor: pointer;
}

#info {
  position: absolute;
  top: 100px;
  right: 20px;
  width: 100px;
  text-align: center;
}

#name {
  font-size: 1.2em;
}

#unit {
  font-size: 12px;
}

## index.html
<!DOCTYPE html><html lang="en"><head prefix="og: http://ogp.me/ns#"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>template</title><!-- libraries--><script type="text/javascript" src="//codeorigin.jquery.com/jquery-1.10.2.min.js"></script><script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script><!-- custom files--><link rel="stylesheet" type="text/css" href="index.css"><script type="text/javascript" src="//d3js.org/topojson.v1.min.js"></script><script type="text/javascript" src="http://bost.ocks.org/mike/fisheye/fisheye.js?0.0.3"></script><script type="text/javascript" src="index.js"></script></head><body><svg width="100%" height="400px" viewBox="0 0 800 400" preserveAspectRatio="xMidYMid"></svg><div id="info"><div id="name"></div><div id="density"></div><div id="unit">( 人 / km<sup>2</sup> )</div></div></body></html>

## index.js
$(document).ready(function() {
  var density = {
    "臺北市": 9952.60,
    "嘉義市": 4512.66,
    "新竹市": 4151.27,
    "基隆市": 2809.27,
    "新北市": 1932.91,
    "桃園市": 1692.09,
    "臺中市": 1229.62,
    "彰化縣": 1201.65,
    "高雄市": 942.97,
    "臺南市": 860.02,
    "金門縣": 847.16,
    "澎湖縣": 802.83,
    "雲林縣": 545.57,
    "連江縣": 435.21,
    "新竹縣": 376.86,
    "苗栗縣": 311.49,
    "屏東縣": 305.03,
    "嘉義縣": 275.18,
    "宜蘭縣": 213.89,
    "南投縣": 125.10,
    "花蓮縣": 71.96,
    "臺東縣": 63.75
  };
  d3.json("county.json", function(topodata) {
    var features = topojson.feature(topodata, topodata.objects.county).features;
    var color = d3.scale.linear().domain([0,10000]).range(["#090","#f00"]);
    var fisheye = d3.fisheye.circular().radius(100).distortion(2);
    var prj = function(v) {
      var ret = d3.geo.mercator().center([122,23.25]).scale(6000)(v);
      var ret = fisheye({x:ret[0],y:ret[1]});
      return [ret.x, ret.y];
    };
    var path = d3.geo.path().projection(prj);
    for(idx=features.length - 1;idx>=0;idx--) features[idx].density = density[features[idx].properties.C_Name];
    d3.select("svg").selectAll("path").data(features).enter().append("path");
    function update() {
      d3.select("svg").selectAll("path").attr({
        "d": path,
        "fill": function (d) { return color(d.density); }
      }).on("mouseover", function(d) {
        $("#name").text(d.properties.C_Name);
        $("#density").text(d.density);

      });
    }
    d3.select("svg").on("mousemove", function() {
      fisheye.focus(d3.mouse(this));
      update();
    });
    update();
  });
});
	path {
	cursor: pointer;
	}

	#info {
	position: absolute;
	top: 100px;
	right: 20px;
	width: 100px;
	text-align: center;
	}

	#name {
	font-size: 1.2em;
	}

	#unit {
	font-size: 12px;
	}
	$(document).ready(function() {
	var density = {
	"臺北市": 9952.60,
	"嘉義市": 4512.66,
	"新竹市": 4151.27,
	"基隆市": 2809.27,
	"新北市": 1932.91,
	"桃園市": 1692.09,
	"臺中市": 1229.62,
	"彰化縣": 1201.65,
	"高雄市": 942.97,
	"臺南市": 860.02,
	"金門縣": 847.16,
	"澎湖縣": 802.83,
	"雲林縣": 545.57,
	"連江縣": 435.21,
	"新竹縣": 376.86,
	"苗栗縣": 311.49,
	"屏東縣": 305.03,
	"嘉義縣": 275.18,
	"宜蘭縣": 213.89,
	"南投縣": 125.10,
	"花蓮縣": 71.96,
	"臺東縣": 63.75
	};
	d3.json("county.json", function(topodata) {
	var features = topojson.feature(topodata, topodata.objects.county).features;
	var color = d3.scale.linear().domain([0,10000]).range(["#090","#f00"]);
	var fisheye = d3.fisheye.circular().radius(100).distortion(2);
	var prj = function(v) {
	var ret = d3.geo.mercator().center([122,23.25]).scale(6000)(v);
	var ret = fisheye({x:ret[0],y:ret[1]});
	return [ret.x, ret.y];
	};
	var path = d3.geo.path().projection(prj);
	for(idx=features.length - 1;idx>=0;idx--) features[idx].density = density[features[idx].properties.C_Name];
	d3.select("svg").selectAll("path").data(features).enter().append("path");
	function update() {
	d3.select("svg").selectAll("path").attr({
	"d": path,
	"fill": function (d) { return color(d.density); }
	}).on("mouseover", function(d) {
	$("#name").text(d.properties.C_Name);
	$("#density").text(d.density);

	});
	}
	d3.select("svg").on("mousemove", function() {
	fisheye.focus(d3.mouse(this));
	update();
	});
	update();
	});
	});