Changeset - 91002a3366f4
[Not reviewed]
Dennis Fink - 9 years ago 2016-03-01 23:16:27
dennis.fink@c3l.lu
Country names in bold
1 file changed with 2 insertions and 2 deletions:
0 comments (0 inline, 0 general)
ennstatus/static/js/worldmap.js
Show inline comments
 
@@ -66,109 +66,109 @@ function draw(topo) {
 

	
 
	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)/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() {
 
					if (d.properties.name in data) {
 
						var text = d.properties.name + "<br>Total servers: " + data[d.properties.name]['total']
 
						var text = "<b>" + d.properties.name + "</b>" + "<br>Total servers: " + data[d.properties.name]['total']
 
						if ('bridge' in data[d.properties.name]) {
 
							text = text + "<br>Bridge servers: " + data[d.properties.name]['bridge']
 
						}
 
						if ('exit' in data[d.properties.name]) {
 
							text = text + "<br>Exit servers: " + data[d.properties.name]['exit']
 
						}
 
						if ('relay' in data[d.properties.name]) {
 
							text = text + "<br>Relay server: " + data[d.properties.name]['relay']
 
						}
 
						return text
 
					} else {
 
						return d.properties.name
 
						return "<b>" + d.properties.name + "</b>"
 
					}
 
				})
 
		})
 
		.on("mouseout", function(d, i) {
 
			tooltip.classed("hidden", true);
 
		});
 

	
 

	
 
	});
 
};
 

	
 

	
 
function redraw() {
 
  width = document.getElementById('chart').offsetWidth;
 
  height = width / 2;
 
  d3.select('svg').remove();
 
  setup(width,height);
 
  draw(topo);
 
}
 

	
 

	
 
function move() {
 

	
 
  var t = d3.event.translate;
 
  var s = d3.event.scale; 
 
  zscale = s;
 
  var h = height/4;
 

	
 

	
 
  t[0] = Math.min(
 
    (width/height)  * (s - 1), 
 
    Math.max( width * (1 - s), t[0] )
 
  );
 

	
 
  t[1] = Math.min(
 
    h * (s - 1) + h * s, 
 
    Math.max(height  * (1 - s) - h * s, t[1])
 
  );
 

	
 
  zoom.translate(t);
 
  g.attr("transform", "translate(" + t + ")scale(" + s + ")");
 

	
 
  //adjust the country hover stroke width based on zoom level
 
  d3.selectAll(".country").style("stroke-width", 1.5 / s);
 

	
 
}
 

	
 

	
0 comments (0 inline, 0 general)