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 0000000..832b363
Binary files /dev/null and b/chart/preview/host-lookup-chart.png differ
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
