From 30074c01f4aa665754d46354712593b6d3b395b4 Mon Sep 17 00:00:00 2001
From: "Ilya Ig. Petrov" <ilyaigpetrov@gmail.com>
Date: Sat, 28 Nov 2015 17:45:28 +0500
Subject: [PATCH] added chart

---
 chart/README.md                     |  18 +++
 chart/preview/host-lookup-chart.png | Bin 0 -> 12945 bytes
 chart/src/data.tsv                  |   9 ++
 chart/src/index.html                | 181 ++++++++++++++++++++++++++++
 4 files changed, 208 insertions(+)
 create mode 100644 chart/README.md
 create mode 100755 chart/preview/host-lookup-chart.png
 create mode 100644 chart/src/data.tsv
 create mode 100644 chart/src/index.html

diff --git a/chart/README.md b/chart/README.md
new file mode 100644
index 0000000..b2c8720
--- /dev/null
+++ b/chart/README.md
@@ -0,0 +1,18 @@
+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
diff --git a/chart/preview/host-lookup-chart.png b/chart/preview/host-lookup-chart.png
new file mode 100755
index 0000000000000000000000000000000000000000..832b3635db9bf70f7e7e49091218787b4fcb60e7
GIT binary patch
literal 12945
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

literal 0
HcmV?d00001

diff --git a/chart/src/data.tsv b/chart/src/data.tsv
new file mode 100644
index 0000000..83d02fc
--- /dev/null
+++ b/chart/src/data.tsv
@@ -0,0 +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
diff --git a/chart/src/index.html b/chart/src/index.html
new file mode 100644
index 0000000..9bde53c
--- /dev/null
+++ b/chart/src/index.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+body {
+  font: 10px sans-serif;
+}
+
+.y.axisRight text {
+    fill: orange;
+}
+
+.y.axisLeft text {
+    fill: steelblue;
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.timeMiss {
+  fill: blue;
+}
+
+.memMiss {
+  fill: red;
+}
+
+.timeHit {
+  fill: steelblue;
+}
+
+.memHit {
+  fill: orange;
+}
+
+.x.axis path {
+  display: none;
+}
+
+</style>
+<body>
+<script src="http://d3js.org/d3.v3.min.js"></script>
+<script>
+
+var margin = {top: 80, right: 80, bottom: 80, left: 80},
+    width = 1000 - margin.left - margin.right,
+    height = 400 - margin.top - margin.bottom;
+
+var x = d3.scale.ordinal()
+    .rangeRoundBands([0, width], .1);
+
+var y0 = d3.scale.linear().domain([0, 400]).range([height, 0]);
+var y1 = d3.scale.linear().domain([0, 6000000]).range([height, 0]);
+
+var xAxis = d3.svg.axis()
+    .scale(x)
+    .orient("bottom");
+
+// create left yAxis
+var yAxisLeft = d3.svg.axis().scale(y0).ticks(4).orient("left");
+// create right yAxis
+var yAxisRight = d3.svg.axis().scale(y1).ticks(6).orient("right");
+
+var svg = d3.select("body").append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+    .append("g")
+    .attr("class", "graph")
+    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+	
+function type(d) {
+  d.memMiss = +d.memMiss;
+  return d;
+}
+
+d3.tsv("data.tsv", type, function(error, data) {
+  x.domain(data.map( d => d.approach ));
+  //y0.domain([0, d3.max(data, d => Math.max(d.memHit, d.memMiss) )]);
+  //y1.domain([0, d3.max(data, d => Math.max(d.timeHit, d.timeMiss) )]);
+  
+  svg.append("g")
+      .attr("class", "x axis")
+      .attr("transform", "translate(0," + height + ")")
+      .call(xAxis);
+
+  svg.append("g")
+	  .attr("class", "y axis axisLeft")
+	  .attr("transform", "translate(0,0)")
+	  .call(yAxisLeft)
+	  .append("text")
+	  .attr("y", 6)
+	  .attr("dy", "-2em")
+	  .style("text-anchor", "end")
+	  .style("text-anchor", "end")
+	  .text("bytes per request");
+	
+  svg.append("g")
+	  .attr("class", "y axis axisRight")
+	  .attr("transform", "translate(" + (width) + ",0)")
+	  .call(yAxisRight)
+	  .append("text")
+	  .attr("y", 6)
+	  .attr("dy", "-2em")
+	  .attr("dx", "2em")
+	  .style("text-anchor", "end")
+	  .text("ns per request");
+
+  bars = svg.selectAll(".bar").data(data).enter();
+  
+  bars.append("rect")
+      .attr("class", "memHit")
+	  .attr("width", x.rangeBand()*0.25*0.5 )
+      .attr("x", d => x(d.approach) + x.rangeBand()*0.25 )
+      .attr("y", d => y0(d.memHit) )
+	  .attr("height", (d,i,j) => height - y0(d.memHit) ); 
+
+  bars.append("rect")
+      .attr("class", "timeHit")
+      .attr("x", d => x(d.approach) + x.rangeBand()*0.25*1.5 )
+      .attr("width", x.rangeBand()*0.25*0.5 )
+      .attr("y", d => y1(d.timeHit) )
+	  .attr("height", (d,i,j) => height - y1(d.timeHit) ); 
+    
+  bars.append("rect")
+      .attr("class", "memMiss")
+      .attr("x", d => x(d.approach) + x.rangeBand()*0.25*2 )
+      .attr("width", x.rangeBand()*0.25*0.5 )
+      .attr("y", d => y0(d.memMiss) )
+	  .attr("height", (d,i,j) => height - y0(d.memMiss) ); 
+
+  bars.append("rect")
+      .attr("class", "timeMiss")
+      .attr("x", d => x(d.approach) + x.rangeBand()*0.25*2.5 )
+      .attr("width", x.rangeBand()*0.25*0.5 )
+      .attr("y", d => y1(d.timeMiss) )
+	  .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 legend = svg.append("g")
+    .attr("class", "legend")
+    .attr("x", width - 65)
+    .attr("y", 25)
+    .attr("height", 100)
+    .attr("width", 100);
+
+  legend.selectAll('g')
+    .data(data)
+    .enter()
+    .append('g')
+	.each(function(d, i) {
+	  if(i > 3)
+		return; // Approach.
+	  var g = d3.select(this);
+	  g.append("rect")
+	    .attr("x", width - 65)
+	    .attr("y", i*25)
+	    .attr("width", 10)
+	    .attr("height", 10)
+	    .style("fill", color_hash[i][1]);
+		
+		g.append("text")
+	      .attr("x", width - 50)
+	      .attr("y", i * 25 + 8)
+	      .attr("height",30)
+	      .attr("width",100)
+	      .style("fill", color_hash[i][1])
+	      .text(color_hash[i][0]);
+    });
+});
+
+</script>
\ No newline at end of file