diff --git a/web/ons-demo/README.txt b/web/ons-demo/README.txt
new file mode 100644
index 0000000..2807fec
--- /dev/null
+++ b/web/ons-demo/README.txt
@@ -0,0 +1,5 @@
+from main web directory
+
+	 python ./restapi2.py
+
+http://localhost:9000/ons-demo/index.html
\ No newline at end of file
diff --git a/web/ons-demo/RELEASE_NOTES.txt b/web/ons-demo/RELEASE_NOTES.txt
new file mode 100644
index 0000000..85df9bf
--- /dev/null
+++ b/web/ons-demo/RELEASE_NOTES.txt
@@ -0,0 +1,5 @@
+** March 19, 2013 **
+- aggregation switch sample data DPIDs do not match official switch config.
+	- switch config hacked 00:00:00:00:00:00:01:01 ==> 00:00:00:00:00:00:01:00 etc.
+- layout does not dynamically adjust when window is resized
+	- refresh browser window after resizing to fix layout
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index 951fbb1..14bfac8 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -66,7 +66,7 @@
 }
 
 path {
-	stroke: white;
+	stroke: rgba(255, 255, 255, .25);
 	stroke-width: 1px;
 }
 
diff --git a/web/ons-demo/data/configuration.json b/web/ons-demo/data/configuration.json
index 99b9041..bf5c855 100644
--- a/web/ons-demo/data/configuration.json
+++ b/web/ons-demo/data/configuration.json
@@ -8,13 +8,13 @@
 		"00:00:00:16:97:08:9a:46"
 	],
 	"aggregation": [
-		"00:00:00:00:00:00:01:01",
-		"00:00:00:00:00:00:02:01",
-		"00:00:00:00:00:00:03:01",
-		"00:00:00:00:00:00:04:01",
-		"00:00:00:00:00:00:05:01",
-		"00:00:00:00:00:00:06:01",
-		"00:00:00:00:00:00:07:01",
-		"00:00:00:00:00:00:08:01"
+		"00:00:00:00:00:00:01:00",
+		"00:00:00:00:00:00:02:00",
+		"00:00:00:00:00:00:03:00",
+		"00:00:00:00:00:00:04:00",
+		"00:00:00:00:00:00:05:00",
+		"00:00:00:00:00:00:06:00",
+		"00:00:00:00:00:00:07:00",
+		"00:00:00:00:00:00:08:00"
 	]
 }
\ No newline at end of file
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index ce5752c..7f2b159 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -42,27 +42,69 @@
 	// DRAW THE NODES
 	var rings = [{
 		radius: 3,
-		width: 4,
+		width: 6,
 		switches: model.edgeSwitches,
-		className: 'edge'
+		className: 'edge',
+		angles: []
 	}, {
 		radius: 2.25,
-		width: 8,
+		width: 12,
 		switches: model.aggregationSwitches,
-		className: 'aggregation'
+		className: 'aggregation',
+		angles: []
 	}, {
 		radius: .75,
-		width: 16,
+		width: 18,
 		switches: model.coreSwitches,
-		className: 'core'
+		className: 'core',
+		angles: []
 	}];
 
+
+	var aggRanges = {};
+
+	// arrange edge switches at equal increments
+	var k = 360 / rings[0].switches.length;
+	rings[0].switches.forEach(function (s, i) {
+		var angle = k * i;
+
+		rings[0].angles[i] = angle;
+
+		// record the angle for the agg switch layout
+		var dpid = s.dpid.split(':');
+		dpid[7] = '00';
+		var aggdpid = dpid.join(':');
+		var aggRange = aggRanges[aggdpid];
+		if (!aggRange) {
+			aggRange = aggRanges[aggdpid] = {};
+			aggRange.min = aggRange.max = angle;
+		} else {
+			aggRange.max = angle;
+		}
+
+
+	});
+
+	// arrange aggregation switches to "fan out" to edge switches
+	k = 360 / rings[1].switches.length;
+	rings[1].switches.forEach(function (s, i) {
+//		rings[1].angles[i] = k * i;
+		var range = aggRanges[s.dpid];
+
+		rings[1].angles[i] = (range.min + range.max)/2;
+	});
+
+	// arrange core switches at equal increments
+	k = 360 / rings[2].switches.length;
+	rings[2].switches.forEach(function (s, i) {
+		rings[2].angles[i] = k * i;
+	});
+
 	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() {
@@ -73,7 +115,7 @@
 				return data.switches[i].dpid;
 			})
 			.attr("transform", function(_, i) {
-				return "rotate(" + i * k + ")translate(" + data.radius * 150 + ")rotate(" + (-i * k) + ")";
+				return "rotate(" + data.angles[i]+ ")translate(" + data.radius * 150 + ")rotate(" + (-data.angles[i]) + ")";
 			})
 			.append("svg:circle")
 			.attr('class', data.className)
@@ -101,7 +143,7 @@
 	function zoom(data, index) {
 		svg.selectAll('.edge').data(model.edgeSwitches).transition().duration(100)
 			.attr("r", function (data, i) {
-				return rings[0].width * (index == i ? 2 : 1);
+				return rings[0].width * (index == i ? 3 : 1);
 			})
 	}
 
diff --git a/web/ons-demo/js/model.js b/web/ons-demo/js/model.js
index e16565c..354299f 100644
--- a/web/ons-demo/js/model.js
+++ b/web/ons-demo/js/model.js
@@ -10,6 +10,17 @@
 		links: results.links
 	}
 
+	// sort the switches
+	results.switches.sort(function (a, b) {
+		var aA = a.dpid.split(':');
+		var bB = b.dpid.split(':');
+		for (var i=0; i<aA.length; i+=1) {
+			if (aA[i] != bB[i]) {
+				return aA[i] - bB[i];
+			}
+		}
+		return 0;
+	});
 
 	// identify switch types
 	var coreSwitchDPIDs = {};
@@ -23,7 +34,7 @@
 	});
 
 	results.switches.forEach(function (s) {
-		s.controller = results.mapping[s.dpid][0].controllerId
+		s.controller = results.mapping[s.dpid][0].controllerId;
 
 		if (coreSwitchDPIDs[s.dpid]) {
 			model.coreSwitches.push(s);