diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 9ecc00f..843fa4a 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -150,8 +150,16 @@
 
 path.iperfdata {
 	fill: none;
-	stroke-width: 2px;
-	stroke: rgba(255, 255, 255, .75);
+	stroke-width: 1px;
+	stroke: #ccc;
+}
+
+.iperf {
+	background-color: #222;
+}
+
+#selectedFlowsHeader .iperf {
+	background-color: black;
 }
 
 #flowChooser {
diff --git a/web/ons-demo/js/flows.js b/web/ons-demo/js/flows.js
index ae148e7..6975c29 100644
--- a/web/ons-demo/js/flows.js
+++ b/web/ons-demo/js/flows.js
@@ -7,7 +7,7 @@
 		}
 	});
 
-	var flows = d3.select('svg').selectAll('.flow').data(topologyFlows);
+	var flows = flowLayer.selectAll('.flow').data(topologyFlows);
 
 	flows.enter().append("svg:path").attr('class', 'flow')
 		.attr('stroke-dasharray', '4, 10')
@@ -34,13 +34,17 @@
 				var pt1 = document.querySelector('svg').createSVGPoint();
 				pt1.x = s1.attr('x');
 				pt1.y = s1.attr('y');
-				pt1 = pt1.matrixTransform(s1[0][0].getCTM());
+				if (drawingRings) {
+					pt1 = pt1.matrixTransform(s1[0][0].getCTM());
+				}
 				pts.push(pt1);
 
 				var pt2 = document.querySelector('svg').createSVGPoint();
 				pt2.x = s2.attr('x');
 				pt2.y = s2.attr('y');
-				pt2 = pt2.matrixTransform(s2[0][0].getCTM());
+				if (drawingRings) {
+					pt2 = pt2.matrixTransform(s2[0][0].getCTM());
+				}
 				pts.push(pt2);
 
 			} else if (d.dataPath && d.dataPath.flowEntries) {
@@ -51,7 +55,9 @@
 						var pt = document.querySelector('svg').createSVGPoint();
 						pt.x = s.attr('x');
 						pt.y = s.attr('y');
-						pt = pt.matrixTransform(s[0][0].getCTM());
+						if (drawingRings) {
+							pt = pt.matrixTransform(s[0][0].getCTM());
+						}
 						pts.push(pt);
 					} else {
 						console.log('flow refers to non-existent switch: ' + flowEntry.dpid.value);
@@ -197,12 +203,12 @@
 		var i;
 		for (i=0; i < pointsToDisplay; ++i) {
 			var sample = flow.iperfData.samples[i];
-			var height = 30 * sample/1000000;
-			if (height > 30)
-				height = 30;
+			var height = 28 * sample/1000000;
+			if (height > 28)
+				height = 28;
 			pts.push({
 				x: i * 1000/(pointsToDisplay-1),
-				y: 32 - height
+				y: 30 - height
 			})
 		}
 		return pts;
@@ -299,7 +305,10 @@
 	}
 
 	updateSelectedFlowsTable();
-	updateSelectedFlowsTopology();
+	// on app init, the table is updated before the svg is constructed
+	if (flowLayer) {
+		updateSelectedFlowsTopology();
+	}
 }
 
 function selectFlow(flow) {
diff --git a/web/ons-demo/js/globals.js b/web/ons-demo/js/globals.js
index 7681957..2063ba5 100644
--- a/web/ons-demo/js/globals.js
+++ b/web/ons-demo/js/globals.js
@@ -43,4 +43,15 @@
 /***************************************************************************************************
 a mapping from controller name to color used for color coding the topology and ONOS nodes views
 ***************************************************************************************************/
-var controllerColorMap = {};
\ No newline at end of file
+var controllerColorMap = {};
+
+/***************************************************************************************************
+defined by rings.js or map.js this is where the flows are drawn.
+***************************************************************************************************/
+var flowLayer;
+
+/***************************************************************************************************
+hack to make the old ring drawing code compatible with the shared flow drawing code
+will be obsoleted once the ring drawing code is disposed of
+***************************************************************************************************/
+var drawingRings;
\ No newline at end of file
diff --git a/web/ons-demo/js/map.js b/web/ons-demo/js/map.js
index d40c9cb..35ca77d 100644
--- a/web/ons-demo/js/map.js
+++ b/web/ons-demo/js/map.js
@@ -111,6 +111,8 @@
 		switchLayer = topology.append('g');
 		labelsLayer = topology.append('g');
 		linksLayer = topology.append('g');
+		flowLayer = topology.append('g');
+
 
 		cb();
 	});
diff --git a/web/ons-demo/js/rings.js b/web/ons-demo/js/rings.js
index 29907f6..979d28b 100644
--- a/web/ons-demo/js/rings.js
+++ b/web/ons-demo/js/rings.js
@@ -13,6 +13,11 @@
 	topology = svg.append('svg:svg').attr('id', 'viewBox').attr('viewBox', '0 0 1000 1000').attr('preserveAspectRatio', 'none').
 			attr('id', 'viewbox').append('svg:g').attr('id', 'topology').attr('transform', 'translate(500 500)');
 
+	flowLayer = d3.select('svg');
+
+	// hack to make the shared flow drawing code work
+	drawingRings = true;
+
 	cb();
 }
 
diff --git a/web/ons-demo/js/utils.js b/web/ons-demo/js/utils.js
index d907225..be7cf53 100644
--- a/web/ons-demo/js/utils.js
+++ b/web/ons-demo/js/utils.js
@@ -80,7 +80,25 @@
 ***************************************************************************************************/
 function updateHeader() {
 	d3.select('#lastUpdate').text(new Date());
-	d3.select('#activeSwitches').text(model.edgeSwitches.length + model.aggregationSwitches.length + model.coreSwitches.length);
+
+	var count = 0;
+	model.edgeSwitches.forEach(function (s) {
+		if (s.state === 'ACTIVE') {
+			count += 1;
+		}
+	});
+	model.aggregationSwitches.forEach(function (s) {
+		if (s.state === 'ACTIVE') {
+			count += 1;
+		}
+	});
+	model.coreSwitches.forEach(function (s) {
+		if (s.state === 'ACTIVE') {
+			count += 1;
+		}
+	});
+
+	d3.select('#activeSwitches').text(count);
 	d3.select('#activeFlows').text(model.flows.length);
 }