diff --git a/Exercise 2/exercise2_0.html b/Exercise 2/exercise2_0.html
index b53c5f3..7007eb6 100644
--- a/Exercise 2/exercise2_0.html	
+++ b/Exercise 2/exercise2_0.html	
@@ -65,9 +65,15 @@
 
         d3.json("states.json",function(json){
             svg.append("g").attr("class","mapGroup");
-            var states = svg.select(".mapGroup").selectAll(".stateLine").data(json.features);
-            states.enter().append("path").attr("class","stateLine")
+            var states = svg.select(".mapGroup")
+                .selectAll(".stateLine")
+                .data(json.features);
+
+            states.enter()
+                .append("path")
+                .attr("class","stateLine")
                 .attr("d", d3.geo.path());
+                // .attr("projection", d3.geo.orthographic);
 
             function getCentroid(stateName) {
                 var stateData;
@@ -113,19 +119,28 @@
                 }
 
                 function displayData() {
-                    var extent = d3.extent(csv, function(d){ return parseFloat(d[dataPoint]); });
-                    var radius = d3.scale.sqrt()
-                        .domain(extent)
-                        .range([5, 50]);
-
-                    svg.select(".title").text(dataPoint);
 
+                    var extent = d3.extent(csv,function(d){
+                        return parseFloat(d[dataPoint]);
+                    });
+                    // console.log(extent);
+                    var radiusScale = d3.scale
+                        .sqrt()
+                        .domain(extent)
+                        .range([3,30]);
                     var circlePath = d3.geo.path()
-                        .pointRadius(function(d) { return radius(d.radius); });
+                        .pointRadius(function(d){
+                            return radiusScale(d.radius);
+                        })
+                    svg.select(".dotGroup")
+                        .selectAll("path")
+                        .each(function(d){
+                            d.radius = parseFloat(d.dataset[dataPoint])
+                        })
+                        .attr("d",circlePath);
+                    svg.select(".title")
+                        .text(dataPoint);
 
-                    svg.select(".dotGroup").selectAll("path")
-                        .each(function(d){ d.radius = parseFloat(d.dataset[dataPoint])})
-                        .attr("d", circlePath);
                 }
 
                 setupData();
diff --git a/Exercise 2/exercise2_1.html b/Exercise 2/exercise2_1.html
index ded10f9..a37db43 100644
--- a/Exercise 2/exercise2_1.html	
+++ b/Exercise 2/exercise2_1.html	
@@ -108,7 +108,7 @@
                     var extent = d3.extent(csv, function(d){ return parseFloat(d[dataPoint]); });
                     var radius = d3.scale.sqrt()
                         .domain(extent)
-                        .range([5, 50]);
+                        .range([3, 30]);
 
                     svg.select(".title").text(dataPoint);
 
@@ -116,7 +116,7 @@
                         .pointRadius(function(d) { return radius(d.radius); });
 
                     svg.select(".dotGroup").selectAll("path")
-                        .each(function(d){ d.radius = parseFloat(d.dataset[dataPoint])})
+                        .each(function(d){ d.radius = parseFloat(d.dataset[dataPoint]); })
                         .attr("d", circlePath);
                 }
 
diff --git a/Exercise 2/exercise2_2.html b/Exercise 2/exercise2_2.html
index e610366..811ca51 100644
--- a/Exercise 2/exercise2_2.html	
+++ b/Exercise 2/exercise2_2.html	
@@ -129,7 +129,7 @@
 
                     var dotGroup = svg.select(".dotGroup");
                     dotGroup.selectAll("path")
-                        .each(function(d){ d.radius = parseFloat(d.dataset[dataPoint])})
+                        .each(function(d){ d.radius = parseFloat(d.dataset[dataPoint]); })
                         .attr("d", circlePath)
                         .attr("fill",function(d){ return colorScale(d.dataset[dataPoint]); });
 
diff --git a/Exercise 2/exercise2_3.html b/Exercise 2/exercise2_3.html
index a6eb886..89e49d0 100644
--- a/Exercise 2/exercise2_3.html	
+++ b/Exercise 2/exercise2_3.html	
@@ -36,14 +36,20 @@
         .stateName {
             text-anchor: end;
             font-size: 12px;
-            baseline-shift: -12px;
+            baseline-shift: -6px;
         }
         .label {
             text-anchor: middle;
             font-size: 12px;
             display: none;
         }
-        .state:hover .label {
+        .state:hover .label,
+        .state.selected .label,
+        .stateBar:hover .label {
+            display: block;
+        }
+        .stateBar:hover .stateName,
+        .stateBar.selected .stateName {
             display: block;
         }
         .state path {
@@ -103,7 +109,10 @@
                         .text(dataPoint);
                     var states = svg.append("g").attr("class","dotGroup")
                         .selectAll(".state").data(csv);
-                    var entering = states.enter().append("g").attr("class","state");
+                    var entering = states.enter().append("g").attr("class","state")
+                        .attr("class",function(d){
+                            return "state " + getClassName(d.State);
+                        });
 
                     var centroid;
                     entering.append("path").datum(function(d) {
@@ -149,9 +158,19 @@
 
                     var dotGroup = svg.select(".dotGroup");
                     dotGroup.selectAll("path")
-                        .each(function(d){ d.radius = parseFloat(d.dataset[dataPoint])})
+                        .each(function(d){ d.radius = parseFloat(d.dataset[dataPoint]); })
                         .attr("d", circlePath)
-                        .attr("fill",function(d){ return colorScale(d.dataset[dataPoint]); });
+                        .attr("fill",function(d){ return colorScale(d.dataset[dataPoint]); })
+                        .on("mouseover",function(d){
+                            d3.select(".dotGroup")
+                                .select("."+d3.select(this).attr("class"))
+                                .classed("selected",true);
+                        })
+                        .on("mouseout",function(d){
+                            d3.select(".dotGroup")
+                                .select("."+d3.select(this).attr("class"))
+                                .classed("selected",false);
+                        });
 
                     dotGroup.selectAll("text")
                         .text(function(d){ return d.dataset[dataPoint]; })
@@ -174,10 +193,23 @@
                     svg.select(".yAxis").call(yAxis);
 
                     var states = svg.select(".barGroup").selectAll(".stateBar").data(csv);
-                    var entering = states.enter().append("g").attr("class","stateBar");
+                    var entering = states.enter().append("g").attr("class","stateBar")
+                        .attr("class",function(d){
+                            return "state " + getClassName(d.State);
+                        });
 
                     states.attr("transform",function(d,i){
                             return "translate("+xPos(i)+","+(scaleHeight(d[dataPoint])+padding)+")";
+                        })
+                        .on("mouseover",function(d){
+                            d3.select(".dotGroup")
+                                .select("."+d3.select(this).attr("class"))
+                                .classed("selected",true);
+                        })
+                        .on("mouseout",function(d){
+                            d3.select(".dotGroup")
+                                .select("."+d3.select(this).attr("class"))
+                                .classed("selected",false);
                         });
 
                     entering.append("rect").attr("width",6);
@@ -206,6 +238,16 @@
                     });
                 }
 
+                // regex:
+                // "South Dakota "
+                // "south dakota "
+                // "south dakota"
+                // "south-dakota"
+
+                function getClassName(name){
+                    return name.toLowerCase().replace(/^\s+|\s+$/g, '').replace(/\s+/g, '-');
+                }
+
                 setupData();
                 displayData();
             });
diff --git a/Exercise 2/exercise2_4.html b/Exercise 2/exercise2_4.html
index a6aa3a5..41e3c79 100644
--- a/Exercise 2/exercise2_4.html	
+++ b/Exercise 2/exercise2_4.html	
@@ -161,7 +161,7 @@
 
                     var dotGroup = svg.select(".dotGroup");
                     dotGroup.selectAll("path")
-                        .each(function(d){ d.radius = parseFloat(d.dataset[dataPoint])})
+                        .each(function(d){ d.radius = parseFloat(d.dataset[dataPoint]); })
                         .attr("d", circlePath)
                         .attr("fill",function(d){ return colorScale(d.dataset[dataPoint]); })
                         .on("mouseenter",function(d){
diff --git a/Exercise 2/exercise2_5.html b/Exercise 2/exercise2_5.html
index cacfe3a..330ccc0 100644
--- a/Exercise 2/exercise2_5.html	
+++ b/Exercise 2/exercise2_5.html	
@@ -163,7 +163,7 @@
 
                     var dotGroup = svg.select(".dotGroup");
                     dotGroup.selectAll("path")
-                        .each(function(d){ d.radius = parseFloat(d.dataset[dataPoint])})
+                        .each(function(d){ d.radius = parseFloat(d.dataset[dataPoint]); })
                         .transition().duration(1000)
                         .attr("d", circlePath)
                         .attr("fill",function(d){ return colorScale(d.dataset[dataPoint]); })
diff --git a/Exercise 2/exercise2_6.html b/Exercise 2/exercise2_6.html
index c4574a5..77b57c3 100644
--- a/Exercise 2/exercise2_6.html	
+++ b/Exercise 2/exercise2_6.html	
@@ -19,7 +19,7 @@
         .stateName {
             text-anchor: end;
             font-size: 12px;
-            baseline-shift: -4px;
+            baseline-shift: -6px;
             display: none;
         }
         .label {
@@ -113,7 +113,8 @@
                             radius: parseFloat(d[dataPoint]),
                             dataset: d
                         };
-                    }).attr("fill","#eee");;
+                    }).attr("fill","#eee");
+                    
                     entering.append("text").datum(function(d){
                         var stateName = d.State.replace(/^\s+|\s+$/g, '');
                         return {
@@ -148,16 +149,20 @@
 
                     var dotGroup = svg.select(".dotGroup");
                     dotGroup.selectAll("path")
-                        .each(function(d){ d.radius = parseFloat(d.dataset[dataPoint])})
+                        .each(function(d){ d.radius = parseFloat(d.dataset[dataPoint]); })
                         .transition().duration(1000)
                         .attr("d", circlePath)
                         .attr("fill",function(d){ return colorScale(d.dataset[dataPoint]); })
                         
                     dotGroup.selectAll("path")
                         .on("mouseenter",function(d){
+                            // console.log('hello');
                             d3.select(".barGroup").select("."+getClassName(d.dataset.State))
                                 .classed("selected",true);
-                        }).on("mouseleave",function(d){
+                            d3.select(this).call(animate);
+                        })
+                        // .on("mouseenter",animate);
+                        .on("mouseleave",function(d){
                             d3.select(".barGroup").select("."+getClassName(d.dataset.State))
                                 .classed("selected",false);
                         });
@@ -171,6 +176,22 @@
                     updateBarChart();
                 }
 
+                function animate(){
+                    // console.log('hello');
+                    d3.select(this).transition()
+                        .ease("bounce")
+                        .duration(1000)
+                        .("fill",'red')
+                        // .attr("opacity",1.0)
+                        // .each("end",secondanimate);
+                }
+                // function secondanimate(){
+                //     d3.select(this).transition()
+                //         .ease("bounce")
+                //         .duration(1000)
+                //         .attr("opacity",0.5);
+                // }
+
                 function updateBarChart() {
                     var dataMax = d3.max(csv, function(d){ return parseFloat(d[dataPoint]); });
                     var scaleHeight = d3.scale.linear()
@@ -188,7 +209,9 @@
                             return "translate("+xPos(i)+","+(scaleHeight(0)+padding)+")";
                         });
 
-                    states.attr("class",function(d){ return "stateBar "+getClassName(d.State); })
+                    states.attr("class",function(d){
+                        return "stateBar "+getClassName(d.State);
+                        })
                         .transition().duration(1000)
                         .attr("transform",function(d,i){
                                 return "translate("+xPos(i)+","+(scaleHeight(d[dataPoint])+padding)+")";
diff --git a/Exercise 3/exercise3.html b/Exercise 3/exercise3.html
index f239868..4734c9a 100644
--- a/Exercise 3/exercise3.html	
+++ b/Exercise 3/exercise3.html	
@@ -20,7 +20,7 @@
             cursor: pointer;
     	}
     	.button:hover {
-    		background-color: #ff9900;
+    		background-color: #ff0000;
     	}
     	.button.selected {
     		background-color: #ff0099;
@@ -58,17 +58,33 @@
         .triangle .button:nth-child(even).selected {
             border-left-color: #000;
         }
+        .outline .button {
+            background-color: white;
+            border: 2px solid #999;
+            color: #999;
+            font-weight: bold;
+        }
+        .outline .button:hover {
+            background-color: #aa6666;
+            /*padding: 50px;*/
+        }
+        .outline .button.selected {
+            background-color: #ff0000;
+            color: #ffffff;
+            border: 50px solid #ffff00;
+            /*border-color: #ffff00;*/
+        }
     </style>
 </head>
 <body>
-	<div class="pair">
-        <div class="button">option 1</div>
-        <div class="button">option 2</div>   
+	<div class="pair outline">
+        <div class="button">hungry</div>
+        <div class="button">sleepy</div>   
     </div>
-    <div class="pair triangle">
+    <!-- <div class="pair triangle">
         <div class="button"></div>
-        <div class="button"></div>   
-    </div>
+        <div class="button"></div> 
+    </div> -->
     <script defer>
     	var button = d3.selectAll(".button");
     	button.on("click",function(){
diff --git a/Exercise 4/exercise4.html b/Exercise 4/exercise4.html
index 013be6a..b989de0 100644
--- a/Exercise 4/exercise4.html	
+++ b/Exercise 4/exercise4.html	
@@ -22,8 +22,9 @@
         var width = 1200, height = 600;
     	var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);
         // dummy data just to generate the circles
-        var circleArray = ["a", "b", "c"];
+        var circleArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
 
+        // var colorArray = ['red','blue','green','yellow','orange','cyan']
         var circles = svg.selectAll("circle").data(circleArray);
         circles.enter().append("circle").attr("r","10").attr("cx","600").attr("cy","300");
 
@@ -32,14 +33,46 @@
         function animate() {
             // most basic transition call, basically auto-animation
             circles.transition()
+                .ease("bounce-in")
+                .duration(1500)
+                // .delay(function(d,i){
+                //     return i*200;
+                // })
+                .style('fill',function(){
+                    return "hsl(" + Math.random()*100 + "%,20%,50%)";
+                })
+                .attr('r',function(){
+                    return 5+Math.random()*50;
+                })
+                .attr('')
                 .attr("cx",function(){ return Math.random()*width; })
-                .attr("cy",function(){ return Math.random()*height; });
+                .attr("cy",function(){ return Math.random()*height; })
+                .each("end",secondanimate);
             /*
                 in addition to animating attributes, play around with:
                 .ease()
                 .duration()
                 .delay()
             */
-        }
+        };
+        function secondanimate() {
+            // most basic transition call, basically auto-animation
+            circles.transition()
+                .ease("bounce-out")
+                .duration(1500)
+                // .delay(function(d,i){
+                //     return i*200;
+                // })
+                .style('fill',function(){
+                    return "hsl(" + Math.random()*100 + "%,20%,50%)";
+                })
+                .attr('r',function(){
+                    return 5+Math.random()*50;
+                })
+                .attr('')
+                .attr("cx",function(){ return Math.random()*width; })
+                .attr("cy",function(){ return Math.random()*height; })
+                .each("end",animate);
+        };
     </script>
 </body>
\ No newline at end of file
diff --git a/resources_1.md b/resources_1.md
new file mode 100644
index 0000000..e63e914
--- /dev/null
+++ b/resources_1.md
@@ -0,0 +1,65 @@
+#Resources, Day 1
+
+***
+
+## The d3.js Environment
+
+* [d3 Show Real](http://bl.ocks.org/mbostock/1256572)
+* [d3 Layouts](https://github.com/mbostock/d3/wiki/Layouts)
+* [NVD3](http://nvd3.org/)
+* [Rickshaw](http://code.shutterstock.com/rickshaw/)
+* [Crossfilter](http://square.github.io/crossfilter/)
+* [dc.js](http://dc-js.github.io/dc.js/)
+* [RAW](http://app.raw.densitydesign.org/)
+
+***
+
+## Basic Visualization Concepts
+
+* [Chart Suggestions, A Thought Starter](http://extremepresentation.typepad.com/blog/files/choosing_a_good_chart.pdf)
+* [d3.js Gallery](https://github.com/mbostock/d3/wiki/Gallery)
+* [Attribute Encoding](http://www.madetomeasurekpis.com/using-cognitive-research-to-design-better-reports-and-dashboards/)
+* [Preattentive Processing](http://www.infovis-wiki.net/index.php/Preattentive_processing)
+* [Find the Un-bump](http://search.bwh.harvard.edu/new/pubs/IntrotoSearchAsym.pdf)
+* [Cartogram Types](http://www.ncgia.ucsb.edu/projects/Cartogram_Central/types.html)
+* Electoral Vote Maps: [1](http://www.centerforpolitics.org/crystalball/articles/category/2012-president/) [2](http://www-personal.umich.edu/~mejn/election/2012/) [3](http://s1062.photobucket.com/user/JeffreyLAlbertson/media/Other%20Cartograms/electoralcollegemap2012vfinal-1.gif.html) [4](http://vis.berkeley.edu/courses/cs294-10-fa07/wiki/index.php/Using_Space_Effectively:_2D)
+* [Color Theory Tutorial](http://earthobservatory.nasa.gov/blogs/elegantfigures/2013/08/05/subtleties-of-color-part-1-of-6/)
+* [ColorBrewer Scales](http://bl.ocks.org/mbostock/5577023)
+
+***
+
+##Narrative Structure
+* [Narrative Categories](http://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf)
+* Author Driven
+	* [Refugees by Country](http://visualizations.manassra.com/syria)
+	* [The Facebook Offering](http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html)
+* Viewer Driven
+	* [Crimespotting](http://sanfrancisco.crimespotting.org/#dtstart=2014-04-19T23:59:59-07:00&dtend=2014-04-26T23:59:59-07:00&hours=0-23&types=AA,Mu,Ro,SA,DP,Na,Al,Pr,Th,VT,Va,Bu,Ar&lat=37.760&lon=-122.438&zoom=13)
+	* [Paths to the White House](http://elections.nytimes.com/2012/results/president/scenarios)
+* Martini Glass
+	* [Out of Sight, Out of Mind](http://drones.pitchinteractive.com/)
+	* [US Gun Deaths](http://guns.periscopic.com/?year=2013)
+* [Facebook Friendships](http://www.facebookstories.com/stories/1574/interactive-mapping-the-world-s-friendships#color=continent&story=1&country=US) 
+
+
+***
+
+## Interogatting the Data
+
+* [Crime Data from 2005](http://www.infochimps.com/datasets/crime-rates-by-state-2004-and-2005-and-by-type-2005-cleaned-up-v)
+
+###Exercise:
+
+1. Come up with three questions to ask the data
+2. Sketch two visualization types to explore each question
+
+***
+
+##d3.js Time!
+
+* [Protovis, an Interactive Toolkit for Visualization](http://vis.stanford.edu/files/2009-Protovis-InfoVis.pdf)
+* [An SVG Primer](http://alignedleft.com/tutorials/d3/an-svg-primer)
+* [Binding Data Tutorial](https://www.dashingd3js.com/binding-data-to-dom-elements)
+* [Scales Tutorial](http://alignedleft.com/tutorials/d3/scales)
+* [Axes Tutorial](http://alignedleft.com/tutorials/d3/axes)
+* [SVG Transform Attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform)
\ No newline at end of file
diff --git a/resources_2.md b/resources_2.md
new file mode 100644
index 0000000..7216796
--- /dev/null
+++ b/resources_2.md
@@ -0,0 +1,37 @@
+#Resources Day 2
+***
+
+##UI Design Principles
+* [Bootstrap Components](http://getbootstrap.com/components/)
+* [Animatable](http://leaverou.github.io/animatable/)
+
+###Exercise
+
+1. What sort of UI elements are present?
2. Is there a key?
3. How does the visualization instruct the viewer to use it?
4. How could it be improved?
+
+Examples:
+
+* [House Hunting](http://www.trulia.com/vis/tru247/)
+* [Four Ways to Slice Obama's Budget Proposal](http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=0)
+* [Selfiexploratory](http://selfiecity.net/selfiexploratory/)
+* [The Death of Afgans](http://www.thenation.com/afghanistan-database)
+* [How Recession Shaped the Economy](http://www.nytimes.com/interactive/2014/06/05/upshot/how-the-recession-reshaped-the-economy-in-255-charts.html)
+
+***
+
+##Animation
+* [Meaningful Transitions](https://www.dropbox.com/s/igiz54y80df34w9/Screenshot%202014-06-05%2023.20.08.png)
+* [Piecewise Animations (Graphic)](http://research.microsoft.com/pubs/130998/bv_ch19.pdf)
+* [Piecewise Animations (Movie)](http://vis.berkeley.edu/papers/animated_transitions/)
+* [d3 Transition API](https://github.com/mbostock/d3/wiki/Transitions)
+* [Easing Equations](http://easings.net/)
+* [Motion Studies Video](http://vimeo.com/17411241)
+* [d3 Easing Equations, Visualized](http://blog.vctr.me/experiments/transition-tweens.html)
+
+***
+
+##General Resources
+* [Let's Make A Map — d3.geo() Tutorial](http://bost.ocks.org/mike/map/)
+* [Infochimps — Free Datasets](http://infochimps.org/datasets)
+* [A Tour Through the Visualization Zoo](http://hci.stanford.edu/jheer/files/zoo/)
+* [Mind-Hacking Visual Transitions](http://looksgoodworkswell.blogspot.com/2006_03_01_archive.html)
\ No newline at end of file
diff --git a/slides_day2.pdf b/slides_day2.pdf
index 6ef6e58..9559fdf 100644
Binary files a/slides_day2.pdf and b/slides_day2.pdf differ