Changeset - 4729289ef49b
[Not reviewed]
Dennis Fink - 9 years ago 2016-03-01 23:14:07
dennis.fink@c3l.lu
Use green colors
1 file changed with 16 insertions and 20 deletions:
0 comments (0 inline, 0 general)
ennstatus/static/js/worldmap.js
Show inline comments
 
@@ -14,103 +14,99 @@
 
   You should have received a copy of the GNU General Public License
 
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
*/
 

	
 

	
 
d3.select(window).on("resize", throttle);
 
	
 
var zoom = d3.behavior.zoom()
 
	.scaleExtent([1, 9])
 
	.on("zoom", move);
 

	
 
var width = document.getElementById('chart').offsetWidth;
 
var height = width / 2;
 

	
 
var topo, projection, path, svg, g;
 

	
 
var graticule = d3.geo.graticule();
 

	
 
var tooltip = d3.select("#chart").append("div").attr("class", "tooltip hidden");
 

	
 
setup(width, height);
 

	
 
function setup(width, height) {
 
	projection = d3.geo.mercator()
 
		.translate([(width / 2), (height / 2)])
 
		.scale(width / 2 / Math.PI)
 

	
 
	 	.translate([(width / 2), (height / 2)])
 
	 	.scale(width / 2 / Math.PI)
 
	
 
	path = d3.geo.path().projection(projection);
 

	
 
	svg = d3.select("#chart").append("svg")
 
		.attr("width", width)
 
		.attr("height", height)
 
		.call(zoom)
 
		.append("g");
 

	
 
	g = svg.append("g")
 
		.on("click", click);
 
}
 

	
 
d3.json("/static/data/world-topo-min.json", function(error, world) {
 
	var countries = topojson.feature(world, world.objects.countries).features;
 

	
 
	topo = countries;
 
	draw(topo);
 
});
 

	
 
function draw(topo) {
 

	
 
	svg.append("path")
 
		.datum(graticule)
 
		.attr("class", "graticule")
 
		.attr("d", path);
 

	
 
	g.append("path")
 
		.datum({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]})
 
		.attr("class", "equator")
 
		.attr("d", path);
 

	
 
	var country = g.selectAll(".country").data(topo);
 
	d3.json("/data/worldmap", function(err, data) {
 

	
 

	
 
		var colorscale = d3.scale.threshold().domain(d3.range(1, data.max+1)).range([
 
			"#c0c2e6",
 
			"#b2b5e0",
 
			"#a4a7da",
 
			"#969ad5",
 
			"#888ccf",
 
			"#7a7fca",
 
			"#6c71c4",
 
			"#5e63be",
 
			"#5056b9",
 
			"#464caf",
 
			"#4146a1",
 
			"#3b4093",
 
			"#353a85",
 
			"#303477",
 
			"#2a2e69",
 
			"#25285b"
 
		var colorscale = d3.scale.threshold().domain(d3.range(1, (data.max+1)/3).map(function(n) { var a=1, b=1, f=1; for(var i = 2; i <= n; i++) { f = a+b; a=b; b=f } return f;})).range([
 
			"#aeffb9",
 
			"#87ff97",
 
			"#60ff76",
 
			"#38ff54",
 
			"#11ff32",
 
			"#00e920",
 
			"#00c21b",
 
			"#009a15",
 
			"#008713",
 
			"#007310",
 
			"#00600d",
 
			"#004c0a"
 
		])
 

	
 
		country.enter().insert("path")
 
			.attr("class", "country")
 
			.attr("d", path)
 
			.attr("id", function(d, i) { return d.id; })
 
			.style("fill", function(d, i) { 
 
				if (d.properties.name in data) {
 
					return colorscale(data[d.properties.name]['total']);
 
				} else {
 
					return "#fdf6e3";
 
				}
 
			});
 

	
 
		var tooltip = d3.select('#chart').append('div')
 
			.attr('class', 'tooltip')
 

	
 
		country.on("mousemove", function(d, i) {
 
	
 
			var mouse = d3.mouse(svg.node()).map(function(d) { return parseInt(d); });
 

	
 
			tooltip.classed("hidden", false)
 
				.attr("style", "left:"+(mouse[0]+40)+"px;top:"+mouse[1]+"px")
 
				.html(function() {
0 comments (0 inline, 0 general)