larger fonts for chart

README.md

@@ -1,3 +1,3 @@
 # Антизапрет PAC-скрипт
 
-![Host Lookup Chart: Time-Memory, Hit-Miss](./chart/preview/host-lookup-chart.png)
+![Host Lookup Chart: Time-Memory, Hit-Miss](./chart/host-lookup-chart.png)

chart/README.md

@@ -1,18 +1,2 @@
 Dual-scale-D3-Bar-Chart
 ========================
-
-This is a demo for creating dual-scaled bar charts using D3.js
-
-I came across this task when I was working on a simple HTML project. As I googled around and, unfortunately, could not find any example, I decided to do it myself.
-
-Please bear in mind that I am new to D3.js and this is actually my first time using it. I had heard of D3.js but never used it.
-
-Hope that this could be of use to someone. All suggestions for improvement are welcome.
-
-Note: since d3.js uses ajax to load tsv files, the files contained in the src folder cannot be run in a browser using file:///. Execute the following command under the src directory to create a HTTP server.
-
-    python -m SimpleHTTPServer
-
-Use the following URL to access index.html
-
-    http://localhost:8000/index.html

chart/src/data.tsv

@@ -1,9 +1,9 @@
 approach	memHit	timeHit	memMiss	timeMiss
-hosts-reversed-binary	109	3704594	96	602820
-hosts-binary	351	3718253	210	605188
-hosts-plain-switch	367	2874843	88	607200
-hosts-hash	347	5062512	207	609278
-hosts-switch	88	894410	77	614169
-ips-switch	37	1348111	72	597439
-ips-indexOf	35	4853437	72	599850
-ips-binary	31	3542401	77	602958
+Hosts reversed binary	109	3704594	96	602820
+Hosts binary	351	3718253	210	605188
+Hosts plain switch	367	2874843	88	607200
+Hosts hash	347	5062512	207	609278
+Hosts switch	88	894410	77	614169
+IPs switch	37	1348111	72	597439
+IPs indexOf	35	4853437	72	599850
+IPs binary	31	3542401	77	602958

chart/src/index.html

@@ -3,7 +3,7 @@
 <style>
 
 body {
-  font: 10px sans-serif;
+  font: 12px Tahoma;
 }
 
 .y.axisRight text {
@@ -22,19 +22,19 @@ body {
 }
 
 .timeMiss {
-  fill: blue;
-}
-
-.memMiss {
   fill: red;
 }
 
+.memMiss {
+  fill: blue;
+}
+
 .timeHit {
-  fill: steelblue;
+  fill: orange;
 }
 
 .memHit {
-  fill: orange;
+  fill: steelblue;
 }
 
 .x.axis path {
@@ -95,8 +95,8 @@ d3.tsv("data.tsv", type, function(error, data) {
 	  .append("text")
 	  .attr("y", 6)
 	  .attr("dy", "-2em")
-	  .style("text-anchor", "end")
-	  .style("text-anchor", "end")
+	  .attr("dx", "-2em")
+	  .style("text-anchor", "right")
 	  .text("bytes per request");
 	
   svg.append("g")
@@ -106,8 +106,8 @@ d3.tsv("data.tsv", type, function(error, data) {
 	  .append("text")
 	  .attr("y", 6)
 	  .attr("dy", "-2em")
-	  .attr("dx", "2em")
-	  .style("text-anchor", "end")
+	  .attr("dx", "-1em")
+	  .style("text-anchor", "start")	  
 	  .text("ns per request");
 
   bars = svg.selectAll(".bar").data(data).enter();
@@ -141,11 +141,12 @@ d3.tsv("data.tsv", type, function(error, data) {
 	  .attr("height", (d,i,j) => height - y1(d.timeMiss) ); 
 
   // add legend   
-  var color_hash = {  0 : ["memMiss", "blue"],
-					  1 : ["timeMiss", "red"],
-					  2 : ["memHit", "steelblue"],
-					  3 : ["timeHit", "orange"]
-				   }
+  var color_hash = {  
+	0 : ["Time / Miss", "red"],
+	1 : ["Memory / Miss", "blue"],
+	2 : ["Time / Hit", "orange"],
+	3 : ["Memory / Hit", "steelblue"]
+  }
   var legend = svg.append("g")
     .attr("class", "legend")
     .attr("x", width - 65)
@@ -162,14 +163,14 @@ d3.tsv("data.tsv", type, function(error, data) {
 		return; // Approach.
 	  var g = d3.select(this);
 	  g.append("rect")
-	    .attr("x", width - 65)
+	    .attr("x", width - x.rangeBand()*3.5 - 15)
 	    .attr("y", i*25)
 	    .attr("width", 10)
 	    .attr("height", 10)
 	    .style("fill", color_hash[i][1]);
 		
 		g.append("text")
-	      .attr("x", width - 50)
+	      .attr("x", width - x.rangeBand()*3.5)
 	      .attr("y", i * 25 + 8)
 	      .attr("height",30)
 	      .attr("width",100)