Updated Geolocation Map

- Using edX color scheme
- Grading with a square root scale
- Using full container width

analytics_dashboard/static/js/views/world-map-view.js

@@ -15,9 +15,9 @@ define(['jquery', 'd3', 'datamaps', 'underscore', 'views/attribute-listener-view
 
                 // colors can be supplied
                 self.options = _.defaults(options, {
-                    lowColor: '#f8f8f8',
-                    highColor: '#e6550d',
-                    borderColor: '#c0c0c0'
+                    lowColor: '#bee1f5',
+                    highColor: '#124d6f',
+                    borderColor: '#ffffff'
                 });
 
                 self.renderIfDataAvailable();
@@ -57,7 +57,7 @@ define(['jquery', 'd3', 'datamaps', 'underscore', 'views/attribute-listener-view
                     colorMap;
 
                 // single hue linear scaled
-                colorMap = d3.scale.linear()
+                colorMap = d3.scale.sqrt()
                     .domain([0, max])
                     .range([self.options.lowColor, self.options.highColor]);
 

analytics_dashboard/static/sass/_developer.scss

@@ -35,21 +35,22 @@
 .world-map {
   position: relative;
   margin: 0 auto;
-  // this is the ratio of width:height to keep the map from being cut off
-  width: 900px;
-  height: 400px;
+
+  width: 100%;
+  height: 450px;
+
+  background-color: white;
+  border: $edx-gray 1px solid;
 }
 
 @media (max-width: $screen-md) {
   .world-map {
-    width: 450px;
-    height: 200px;
+    height: 250px;
   }
 }
 
 @media (max-width: $screen-sm) {
   .world-map {
-    width: 100%;
     height: 300px;
   }
 }