diff --git a/style/css/ol.thematic.css b/style/css/ol.thematic.css
index 08f66f1..93c0dfa 100644
--- a/style/css/ol.thematic.css
+++ b/style/css/ol.thematic.css
@@ -1,3 +1,5 @@
+/* this just contains some styles that are used in the tests of OpenLayers-Symbology */
+
 div#map {
 	width: 600px;
 	height: 600px;
@@ -77,3 +79,80 @@ h4 {
 	font-size: 12px;
 	margin-bottom: 14px;
 }
+
+/* these styles are just for the olson cartogram reproduction */
+
+div#container {
+	width: 800px;
+	height: 533px;
+	border: 2px solid #000;
+	
+	position: relative;
+}
+
+div.olson#map {
+	width: 100%;
+	height: 100%;
+	
+	border: none;
+}
+
+div#container h1 {
+	font-size: 14px;
+	font-family: sans-serif;
+	text-transform: uppercase;
+	
+	position: absolute;
+	
+	top: 17px;
+	left: 230px;
+	
+	color: #333;
+	
+	letter-spacing: 2px;
+}
+
+div#cartogramLegend {
+	position: absolute;
+	left: 22px;
+	bottom: 66px;
+	
+	clear: right;
+}
+
+div#legendChip {
+	width: 18px;
+	height: 18px;
+	
+	background-color: #ddd;
+	border: 1px solid #333;
+	
+	float: left;
+}
+
+
+p#legendText {
+	float: left;
+	
+	padding-top: 0;
+	margin-top: 4px;
+	
+	margin-left: 6px;
+	
+	font-size: 11px;
+	font-family: sans-serif;
+	
+	letter-spacing: 1px;
+}
+
+p#credits {
+	position: absolute;
+	
+	margin-bottom: 4px;
+	left: 20px;
+	bottom: 0;
+	
+	font-size: 10px;
+	font-family: sans-serif;
+	letter-spacing: 1px;
+}
\ No newline at end of file
diff --git a/tests/cartogram.choro.html b/tests/cartogram.choro.html
index 4df3140..1019dc2 100644
--- a/tests/cartogram.choro.html
+++ b/tests/cartogram.choro.html
@@ -48,7 +48,7 @@
 					url 		: url,
 					indicator 	: indicator,
 					classed : false,
-					defaultSymbolizer 	: { 'strokeColor' : '#ff0000', 'strokeWidth' : 1, 'strokeOpacity' : .5, 'fillOpacity' : .5, 'fillColor' : '#0099cc' },
+					defaultSymbolizer 	: { 'strokeColor' : '#ffffff', 'strokeWidth' : 1, 'strokeOpacity' : .5, 'fillOpacity' : .5, 'fillColor' : '#0099cc' },
 					requestSuccess 		: function( request )
 					{
 						map.zoomToExtent( this.layer.getDataExtent(), true );
@@ -60,7 +60,10 @@
 			
 			function colorCartogram()
 			{
-				
+				var choroLayer = new ol.thematic.Choropleth( map, {
+					indicator : indicator,
+					layer : thematicLayer.layer
+				});
 			};
 			
 			
diff --git a/tests/colorbrewer3.html b/tests/colorbrewer3.html
deleted file mode 100644
index e69de29..0000000
diff --git a/tests/olson.html b/tests/olson.html
index 9f0d6b3..1346977 100644
--- a/tests/olson.html
+++ b/tests/olson.html
@@ -1,16 +1,13 @@
 <html>
 	<head>
-		<title>OpenLayers-Symbology Proportional Symbol example</title>
+		<title>NUMBER OF PERSONS 65 YEARS OF AGE AND OLDER: 2010</title>
 		
 		<!-- styles -->
-		<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
 		<link rel="stylesheet" type="text/css" href="../style/css/ol.thematic.css" />
 		
-		<!-- external libraries ( ol, colorbrewer, jquery ) -->
-		<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
-		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
-		
-		<script type="text/javascript" src="ext4/ext-all.js"></script>
+		<!-- external libraries ( ol, colorbrewer, proj4js, jquery ) -->
+		<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script>
+		<script type="text/javascript" src="../lib/proj4js-combined.js"></script>
 		
 		<!-- local symbology code -->
 		<script type="text/javascript" src="../src/js/ol/thematic/ol.classification.js"></script>
@@ -19,333 +16,90 @@
 		<script type="text/javascript" src="../src/js/ol/thematic/ol.cartogram.js"></script>
 		
 		<script type="text/javascript">
-		
-			Ext.require('Ext.slider.*');
-			
-			var map, thematicLayer,
+			var map,
 				url = '../data/json/states.geo.json',
-				indicator = 'POP2010',
-				format = new OpenLayers.Format.GeoJSON(), /* this is optional as GeoJSON is the default */
-				classBreaksSlider,
-				legendWidth = 300;
+				indicator = 'POP2010';
+				
+			Proj4js.defs["MY_ALBERS"] = "+proj=aea +lat_1=32 +lat_2=58 +lat_0=45 +lon_0=-97 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs";
+				
 			
 			function init()
 			{
-				map = new OpenLayers.Map( 'map' );
-				var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
-                    "http://vmap0.tiles.osgeo.org/wms/vmap0",
-                    {layers: 'basic'},
-                    {isBaseLayer: true} );
-            	map.addLayer(layer);
-            	
-            	// now let's add the main geography as a standard vector layer
-            	var strokeFeatures = new OpenLayers.Layer.Vector("unscaled features", {
-				    strategies: [ new OpenLayers.Strategy.Fixed() ],
-				    protocol: new OpenLayers.Protocol.HTTP({
-				        url: url,
-				        format: format
-				    }),
-				    
-				    style : { 'strokeColor' : '#333', 'strokeWidth' : 3 }
-				});
-				map.addLayer( strokeFeatures );
-            	
-            	
-            	var fillFeatures = new OpenLayers.Layer.Vector("unscaled features", {
-				    strategies: [ new OpenLayers.Strategy.Fixed() ],
-				    protocol: new OpenLayers.Protocol.HTTP({
-				        url: url,
-				        format: format
-				    }),
-				    
-				    style : { 'fillColor' : '#fff', 'fillOpacity' : 1, 'strokeColor' : '#fff' }
-				});
-				map.addLayer( fillFeatures );
-            	
-            	
-            	// and only when that's loaded will we create the cartogram layer
-            	createThematicLayer();
-			};
-			
-			function createThematicLayer()
-			{
-				thematicLayer = new ol.thematic.Cartogram( map, {
-					url 		: url,
-					indicator 	: indicator,
-					defaultSymbolizer 	: { 'strokeColor' : '#ff0000', 'strokeWidth' : 1, 'strokeOpacity' : .5, 'fillOpacity' : .5, 'fillColor' : '#0099cc' },
-					requestSuccess 		: function( request )
-					{
-						// map.zoomToExtent( this.layer.getDataExtent(), true );
-						
-						/*
-						populateControls();
-						updateControls();
-						updateClassed();
-						wireControls();
-						*/
-					},
-					updateSuccess : function()
-					{
-						if ( !classBreaksSlider || !thematicLayer.classed )
-						{ 
-							return;
-						}
-						
-						var appliedBreaks = thematicLayer.classification.getBoundsArray();
-						
-						if ( !Array.equalsInOrder( appliedBreaks, classBreaksSlider.getValues() ) )
-						{
-							updateClassBreaksSlider();
-						}
-						
-					}
-				});
-			};
-			
-			
-			function populateControls()
-			{
-				// attributes
-				// we'll just base this off the first feature
-				var $attributeSelect = $('select#attributes');
-				var feature = thematicLayer.layer.features[0];
-				
-				var attributes = feature.attributes,
-					option;
-								
-				$.each( attributes, function( key, value )
-				{
-					// see if value is a number
-					if ( !isNaN( value ) )
-					{
-						option = '<option value="' + key + '">' + key + '</option>';
-						$attributeSelect.append( option );
-					}
-				});
-				
-				var $classMethodSelect = $('select#classMethods');
-				
-				$.each( ol.thematic.Distribution, function( key, value )
-				{
-					if ( typeof( value ) == 'string' )
-					{
-						option = '<option value="' + value + '">' + value + '</option>';
-						$classMethodSelect.append( option );
-					}
-				});
 				
-				// class breaks
+				map = new OpenLayers.Map( {
+					div : 'map',
+					projection: new OpenLayers.Projection("MY_ALBERS"), 
+					maxResolution: 100000,
+					maxExtent: new OpenLayers.Bounds( -18040096,-22672290,18040096,22672290 ),
+					controls : []
+				} );
 				
-				classBreaksSlider = new Ext.slider.Multi( {
-					renderTo: 'classBreaks-slider',
-			        hideLabel: false,
-			        clickToChange: false,
-			        width: legendWidth,
-			        
-			        minValue: thematicLayer.distribution.minVal,
-			        maxValue: thematicLayer.distribution.maxVal,
-				    listeners: {
-						dragend: function( slider, e ) {
-							onManualClassBreaksSliderChange();
-						}
-					}
-				});
-				
-			};
-			
-			function onManualClassBreaksSliderChange()
-			{
-				if ( $('select#classMethods').val() != ol.thematic.Distribution.CLASSIFY_WITH_BOUNDS )
-				{
-					$('select#classMethods').val( ol.thematic.Distribution.CLASSIFY_WITH_BOUNDS );
-				}
+			    // Empty base layer
+				map.addLayer( new OpenLayers.Layer("",{isBaseLayer: true}) );
 				
-				var options = {
-					method : ol.thematic.Distribution.CLASSIFY_WITH_BOUNDS,
-					classBreaks : classBreaksSlider.getValues()
-				};
 				
-				thematicLayer.updateOptions( options );
-				thematicLayer.applyClassification();
+				createBaseLayers();
+				createCartogramLayer();
 			};
 			
-			
-			function updateControls()
+			function createBaseLayers()
 			{
-				var $attributeSelect = $('select#attributes');
-				$attributeSelect.val( thematicLayer.indicator );
-				
-				var $numClassesSelect = $('select#numClasses');
-				$numClassesSelect.val( thematicLayer.numClasses );
-				
-				var $classMethodSelect = $('select#classMethods');
-				$classMethodSelect.val( thematicLayer.method );
+				// background layer with USA outline -- white fill with black USA outline
+				var worldLayer = new OpenLayers.Layer.Vector( 'world layer', {
+					projection : new OpenLayers.Projection("EPSG:4326"),
+					strategies: [ new OpenLayers.Strategy.Fixed() ],
+					protocol: new OpenLayers.Protocol.HTTP( {
+		                url: url,
+		                format: new OpenLayers.Format.GeoJSON()
+		            } ),
+					style : { 'fillColor' : '#000000', 'fillOpacity' : 1, 'strokeColor' : '#333', 'strokeWidth' : 3 }
+				});			
+				
+				var worldLayer2 = new OpenLayers.Layer.Vector( 'world layer 2', {
+					projection : new OpenLayers.Projection("EPSG:4326"),
+					strategies: [ new OpenLayers.Strategy.Fixed() ],
+					protocol: new OpenLayers.Protocol.HTTP( {
+		                url: url,
+		                format: new OpenLayers.Format.GeoJSON()
+		            } ),
+					style : { 'fillColor' : '#ffffff', 'fillOpacity' : 1, 'strokeColor' : '#ffffff' }
+				});
 				
-				var $classedInput = $('input#classed');
-				$classedInput.prop( "checked", thematicLayer.classed );
+				map.addLayers( [ worldLayer, worldLayer2 ] );
 			};
 			
-			function updateClassBreaksSlider()
+			function createCartogramLayer()
 			{
-				if ( classBreaksSlider == null )
-				{
-					return;
-				}
-				
-				var newBreaks = thematicLayer.classification.getBoundsArray();
-				
-				// if the number of classes has changed, destroy and re-create component
-				if ( !classBreaksSlider.values || classBreaksSlider.values.length != newBreaks.length )
-				{
-					classBreaksSlider.destroy();
-					classBreaksSlider = new Ext.slider.Multi( {
-						renderTo: 'classBreaks-slider',
-				        hideLabel: false,
-				        clickToChange: false,
-				        width: legendWidth,
-				        
-				        minValue: thematicLayer.distribution.minVal,
-				        maxValue: thematicLayer.distribution.maxVal,
-				        values: newBreaks,
-				        listeners: {
-					        dragend: function( slider, e ) {
-								onManualClassBreaksSliderChange();
-							}
-					    }
-					});
-				}
-				// else loop through class breaks and set each value on the component
-				else
-				{
-					if ( classBreaksSlider.minValue != thematicLayer.distribution.minVal )
-					{
-						classBreaksSlider.setMinValue( thematicLayer.distribution.minVal );
-					}
-					
-					if ( classBreaksSlider.maxValue != thematicLayer.distribution.maxVal )
+				var cartoLayer = new ol.thematic.Cartogram( map, {
+					'url' : url,
+					'indicator' : indicator,
+					'maxSize' : 5000,
+					'requestSuccess' : function( request )
 					{
-						classBreaksSlider.setMaxValue( thematicLayer.distribution.maxVal );
-					}
+						map.setCenter( new OpenLayers.LonLat( -96, 39 ).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ), 4 );
+					},
 					
-					var i = -1;
-					while ( ++i < newBreaks.length )
-					{
-						classBreaksSlider.setValue( i, newBreaks[i] );
-					}
-				}
-				
-			};
-			
-			function wireControls()
-			{
-				$( 'div.control select' ).change( function( event )
-				{
-					updateThematicLayer();
-				});
-				
-				// classed / unclassed
-				
-				$( 'input#classed' ).change( function( event )
-				{
-					updateClassed();
-					updateThematicLayer();
+					defaultSymbolizer : { 'strokeColor' : '#000000', 'strokeWidth' : 1, 'fillOpacity' : 1, 'fillColor' : '#dedede' }
 				});
 			};
 			
-			function updateClassed()
-			{
-				var classed = $( 'input#classed' ).prop( "checked" );
-				
-				$( 'div#numClasses select' ).prop( 'disabled', !classed );
-				$( 'div#classMethods select' ).prop( 'disabled', !classed );
-				
-				classBreaksSlider.setDisabled( !classed );
-			};
-			
-			function updateThematicLayer()
-			{
-				// if the variable has changed and the current class. method is bounds, switch to equal interval
-				if ( thematicLayer.method == ol.thematic.Distribution.CLASSIFY_WITH_BOUNDS )
-				{
-					if 
-					(
-						( $('select#attributes').val() != thematicLayer.indicator )
-						||
-						( $('select#numClasses').val() != thematicLayer.numClasses )
-					)
-					{
-						$('select#classMethods').val( ol.thematic.Distribution.CLASSIFY_BY_EQUAL_INTERVALS );
-					}
-				}
-				
-				
-				var options = {
-					indicator : $('select#attributes').val(),
-					numClasses : $('select#numClasses').val(),
-					method : $('select#classMethods').val(),
-					classed : $( 'input#classed' ).prop( "checked" )
-				};
-				
-				thematicLayer.defaultSymbolizer.graphicName = $('select#shapes').val();
-				
-				thematicLayer.updateOptions( options );
-				thematicLayer.applyClassification();
-			};
 			
 		</script>
 	</head>
 	
-
-
 	<body onload="init()">
-		<h1>OpenLayers-Symbology Cartogram example</h1>
-		
-		<div id="map"></div>
+		<div id="container">
+			<h1>Number of persons 65 years and older: 2010</h1>
 		
-		<div id="controls">
-			<h2>controls:</h2>
+			<div id="map" class="olson"></div>
 			
-			<div class="controlArea">
-				<h3>data</h3>
-				
-				<div class="control">
-					<h4>attribute</h4>
-					<select id="attributes"></select>
-				</div>
+			<div id="cartogramLegend">
+				<div id="legendChip"></div>
+				<p id="legendText">100,000 Persons 65 and over</p>
 			</div>
 			
-			<div class="controlArea">
-				<h3>classification</h3>
-				
-				<div class="control">
-					<input id="classed" type="checkbox">Classed</input>
-				</div>
-				
-				<div class="control" id="numClasses">
-					<h4>number of classes</h4>
-					<select id="numClasses">
-						<option value="3">3</option>
-						<option value="4">4</option>
-						<option value="5">5</option>
-						<option value="6">6</option>
-						<option value="7">7</option>
-						<option value="8">8</option>
-						<option value="9">9</option>
-					</select>
-				</div>
-				
-				<div class="control" id="classMethods">
-					<h4>classification method</h4>
-					<select id="classMethods"></select>
-				</div>
-				
-				<div class="control" id="legend">
-					<h4>the legend is the key</h4>
-					<div id="classBreaks-slider"></div>
-				</div>
-
-			</div>
-		</div>
+			<p id="credits">Source: U.S. Bureau of the Census</p>
+		</div>		
 	</body>
 	
 </html>
\ No newline at end of file
