diff --git a/web/ons-demo/css/layout.default.css b/web/ons-demo/css/layout.default.css
index cbff528..647763c 100644
--- a/web/ons-demo/css/layout.default.css
+++ b/web/ons-demo/css/layout.default.css
@@ -1,3 +1,7 @@
+html, body {
+	height: 100%;
+}
+
 body {
 	display: -webkit-box;
 }
@@ -13,14 +17,19 @@
 	display: -webkit-box;
 }
 
+#left, #right {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+}
+
 #right {
 	width: 100%;
 	-webkit-box-flex: 1.0;
 }
 
 #controllers, #topology {
-	height: 100%;
 	-webkit-box-flex: 1.0;
+	position: relative;
 }
 
 #selectedFlows {
@@ -28,9 +37,15 @@
 }
 
 /* tmp */
-#controllers, #topology, #selectedFlows {
+#controllers, #selectedFlows {
 	display: -webkit-box;
 	-webkit-box-align: center;
 	-webkit-box-pack: center;
 }
 
+#svg-container {
+	position: absolute;
+	top: 0px;
+	height: 100%;
+	width: 100%;
+}
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 2a6d95a..dd1e0ac 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -1,3 +1,4 @@
+
 body {
 	background-color: black;
 	color: white;
diff --git a/web/ons-demo/index.html b/web/ons-demo/index.html
index 46316d2..580a230 100644
--- a/web/ons-demo/index.html
+++ b/web/ons-demo/index.html
@@ -27,7 +27,7 @@
 		<div id='traceButton' class='button'>Trace</div>
 	</div>
 	<div id='selectedFlows'>Selected Flows</div>
-	<div id='topology'>Topology</div>
+	<div id='topology'><div id='svg-container'> </div></div>
 </div>
 
 
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index c7e96f7..c22a603 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -1,7 +1,73 @@
-function sync() {
+/*global d3*/
+
+function createTopologyView() {
+	return d3.select('#svg-container').append('svg:svg').attr('viewBox', '0 0 1000 1000').
+			append('svg:g').attr('transform', 'translate(500 500)');
+}
+
+
+
+function drawHeader(model) {
+	d3.select('#lastUpdate').text(model.timestamp);
+}
+
+function drawTopology(svg, model) {
+
+	var rings = [{
+		radius: 3,
+		width: 16,
+		switches: model.edgeSwitches
+	}, {
+		radius: 1.5,
+		width: 32,
+		switches: model.aggregationSwitches
+	}, {
+		radius: 1,
+		width: 32,
+		switches: model.coreSwitches
+	}];
+
+	function ringEnter(data, i) {
+		if (!data.switches.length) {
+			return;
+		}
+
+		var k = 360 / data.switches.length;
+
+		d3.select(this).selectAll("g")
+			.data(d3.range(data.switches.length).map(function() {
+			return data;
+		}))
+			.enter().append("svg:g")
+			.attr("class", "square")
+			.attr("transform", function(_, i) {
+			return "rotate(" + i * k + ")translate(" + data.radius*150 + ")";
+		})
+			.append("svg:rect")
+			.attr("x", -data.width / 2)
+			.attr("y", -data.width / 2)
+			.attr("width", data.width)
+			.attr("height", data.width);
+	}
+
+	var ring = svg.selectAll("g")
+		.data(rings)
+		.enter().append("svg:g")
+		.attr("class", "ring")
+		.each(ringEnter);
+}
+
+function sync(svg) {
 	updateModel(function (model) {
-		d3.select('#lastUpdate').text(model.timestamp);
-		setTimeout(sync, 1000);
+
+		drawHeader(model);
+		drawTopology(svg, model);
+
+		// do it again in 1s
+		setTimeout(function () {
+			sync(svg)
+		}, 1000);
 	});
 }
-sync();
\ No newline at end of file
+
+sync(createTopologyView());
\ No newline at end of file
diff --git a/web/ons-demo/js/model.js b/web/ons-demo/js/model.js
index 27a03b2..e979196 100644
--- a/web/ons-demo/js/model.js
+++ b/web/ons-demo/js/model.js
@@ -2,7 +2,7 @@
 
 function toD3(results) {
 	var model = {
-		edgeSwitchs: [],
+		edgeSwitches: [],
 		aggregationSwitches: [],
 		coreSwitches: []
 	}
@@ -25,7 +25,7 @@
 		} else if (aggregationSwitchDPIDs[s.dpid]) {
 			model.aggregationSwitches.push(s);
 		} else {
-			model.edgeSwitchs.push(s);
+			model.edgeSwitches.push(s);
 		}
 	});