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);
 		}
 	});