fix: Rewrite the graph on the country page.

website/web/static/linegraph_country.js

@@ -1,47 +1,73 @@
 function linegraph(call_path) {
-    var canvas = document.querySelector("canvas"),
+	var svg = d3.select("svg"),
-        context = canvas.getContext("2d");
+		margin = {top: 20, right: 80, bottom: 30, left: 50},
+		width = svg.attr("width") - margin.left - margin.right,
+		height = svg.attr("height") - margin.top - margin.bottom,
+		g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
-    // set the dimensions and margins of the graph
-    var margin = {top: 20, right: 20, bottom: 30, left: 50},
-        width = canvas.width - margin.left - margin.right,
-        height = canvas.height - margin.top - margin.bottom;
-
-    // parse the date / time
 	var parseTime = d3.timeParse("%Y-%m-%d");
 
-    // set the ranges
+	var x = d3.scaleTime().range([0, width]),
-    var x = d3.scaleTime().range([0, width]);
+		y = d3.scaleLinear().range([height, 0]),
-    var y = d3.scaleLinear().range([height, 0]);
+		z = d3.scaleOrdinal(d3.schemeCategory10);
-    var z = d3.scaleOrdinal(d3.schemeCategory10);
 
-    // define the line
 	var line = d3.line()
-        .x(function(d) { return x(parseTime(d[0])); })
+		.curve(d3.curveBasis)
-        .y(function(d) { return y(d[1]); })
+		.x(function(d) { return x(d.date); })
-        .curve(d3.curveStep)
+		.y(function(d) { return y(d.rank); });
-        .context(context);
 
-    context.translate(margin.left, margin.top);
-
-    // Get the data
 	d3.json(call_path, {credentials: 'same-origin'}).then(function(data) {
-      var color = d3.scaleOrdinal(d3.schemeCategory10);
-      var i = 0;
-      for (country in data) {
-          var country_data = data[country]
-          x.domain(d3.extent(country_data, function(d) { return parseTime(d[0]); }));
-          y.domain(d3.extent(country_data, function(d) { return d[1]; }));
 
-          context.beginPath();
+	  var country_ranks = d3.entries(data).map(function(country_rank) {
-          line(country_data);
+        x.domain(d3.extent(country_rank.value, function(d) { return parseTime(d[0]); }));
-          context.lineWidth = 1.5;
+		return {
-          context.strokeStyle = color(i);
+		  country: country_rank.key,
-          context.stroke();
+		  values: d3.values(country_rank.value).map(function(d) {
-          i += 1;
+			return {date: parseTime(d[0]), rank: d[1]};
+		  })
 		};
-      xAxis();
+	  });
-      yAxis();
+
+	  y.domain([
+		d3.min(country_ranks, function(c) { return d3.min(c.values, function(d) { return d.rank; }); }),
+		d3.max(country_ranks, function(c) { return d3.max(c.values, function(d) { return d.rank; }); })
+	  ]);
+
+	  z.domain(country_ranks.map(function(c) { return c.country; }));
+
+	  g.append("g")
+		  .attr("class", "axis axis--x")
+		  .attr("transform", "translate(0," + height + ")")
+		  .call(d3.axisBottom(x));
+
+	  g.append("g")
+		  .attr("class", "axis axis--y")
+		  .call(d3.axisLeft(y))
+		.append("text")
+		  .attr("transform", "rotate(-90)")
+		  .attr("y", 6)
+		  .attr("dy", "0.71em")
+		  .attr("fill", "#000")
+		  .text("Rank");
+
+	  var country = g.selectAll(".country")
+		.data(country_ranks)
+		.enter().append("g")
+		  .attr("class", "country");
+
+	  country.append("path")
+		  .attr("class", "line")
+		  .attr("d", function(d) { return line(d.values); })
+		  .style("stroke", function(d) { return z(d.country); });
+
+	  country.append("text")
+		  .datum(function(d) { return {id: d.country, value: d.values[d.values.length - 1]}; })
+		  .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.rank) + ")"; })
+		  .attr("x", 3)
+		  .attr("dy", "0.35em")
+		  .style("font", "10px sans-serif")
+		  .text(function(d) { return d.id; });
+
       d3.json(call_path + '_callback',
                   {credentials: 'same-origin',
                    method: 'POST',
@@ -51,63 +77,4 @@ function linegraph(call_path) {
             d3.select('#asn_details').html(data);
       });
     });
-
+};
-    function xAxis() {
-      var tickCount = 10,
-          tickSize = .1,
-          ticks = x.ticks(tickCount),
-          tickFormat = x.tickFormat();
-
-      context.beginPath();
-      ticks.forEach(function(d) {
-        context.moveTo(x(d), height);
-        context.lineTo(x(d), height + tickSize);
-      });
-      context.strokeStyle = "black";
-      context.stroke();
-
-      context.textAlign = "center";
-      context.textBaseline = "top";
-      ticks.forEach(function(d) {
-        context.fillText(tickFormat(d), x(d), height + tickSize);
-      });
-    }
-
-    function yAxis() {
-      var tickCount = 20,
-          tickSize = 1,
-          tickPadding = 1,
-          ticks = y.ticks(tickCount),
-          tickFormat = y.tickFormat(tickCount);
-
-      context.beginPath();
-      ticks.forEach(function(d) {
-        context.moveTo(0, y(d));
-        context.lineTo(-6, y(d));
-      });
-      context.strokeStyle = "black";
-      context.stroke();
-
-      context.beginPath();
-      context.moveTo(-tickSize, 0);
-      context.lineTo(0.5, 0);
-      context.lineTo(0.5, height);
-      context.lineTo(-tickSize, height);
-      context.strokeStyle = "black";
-      context.stroke();
-
-      context.textAlign = "right";
-      context.textBaseline = "middle";
-      ticks.forEach(function(d) {
-        context.fillText(tickFormat(d), -tickSize - tickPadding, y(d));
-      });
-
-      context.save();
-      context.rotate(-Math.PI / 2);
-      context.textAlign = "right";
-      context.textBaseline = "top";
-      context.font = "bold 10px sans-serif";
-      context.fillText("Rank", -10, 10);
-      context.restore();
-    }
-}

website/web/templates/country.html

@@ -18,6 +18,6 @@
       <h1>Ranking - {{ ' '.join(country) }}</h1></br></br>
   </center>
   {% include ['top_forms.html'] %}
-  <canvas width="1024" height="800"></canvas>
+  <svg width="1024" height="800"></svg>
   <div id="asn_details"></div>
 {% endblock %}