website update

kartograph · Mar 22, 2013 · 2e82a59 · 2e82a59
1 parent bda7aec
commit 2e82a59
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 146 deletions.
diff --git a/_layouts/core.html b/_layouts/core.html
@@ -14,18 +14,7 @@
    <link rel="apple-touch-icon" href="/img/apple-touch-57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/img/apple-touch-72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/img/apple-touch-114.png">
-{% if page.scripts %}
-   <script type="text/javascript" src="/js/script.min.js"></script>
-   <script type="text/javascript">
-   {% for scripts in page.scripts %}
-      $script(['{{ scripts[1] }}'{% for s in scripts offset:2 %}, '{{ s }}'{% endfor %}], '{{ scripts[0] }}');
-   {% endfor %}{% if page.jsplugins %}
-      {% for k in page.jsplugins %}
-        $script(['{{ k[1] }}'], '{{ k[0] }}');
-      {% endfor %}
-   {% endif %}
-   </script>
-{% endif %}
+
 {% for style in page.styles %}
    <link rel="stylesheet" href="{{ style }}" type="text/css" />
 {% endfor %}

diff --git a/_layouts/showcase.html b/_layouts/showcase.html
@@ -1,6 +1,5 @@
 ---
 layout: default
-scripts: [[kartograph, '/js/jquery.min.js', '/js/raphael.min.js', '/js/kartograph.js', '/js/chroma.min.js'], [highlightjs, '/js/highlight/highlight.pack.js']]
 styles: ['/js/highlight/styles/github.css']
 toctitle: Showcases
 toc:
@@ -27,9 +26,9 @@ <h1>{{ page.title }}</h1>
 
 </div>
 
+<script type="text/javascript" src="/js/highlight/highlight.pack.js"></script>
 <script type="text/javascript">
 
-$script.ready('highlightjs', function() {
     $('pre code').each(function(i, e) {
         var code = $(e).html().trim(), 
             code2 = code.replace(/\s/g, ''),
@@ -48,6 +47,5 @@ <h1>{{ page.title }}</h1>
 
         hljs.highlightBlock(e)
     });
-});
 
 </script>
diff --git a/js/chroma.min.js b/js/chroma.min.js
diff --git a/js/kartograph.js b/js/kartograph.js
@@ -29,7 +29,7 @@
 
   kartograph = root.$K = (_ref = root.Kartograph) != null ? _ref : root.Kartograph = {};
 
-  kartograph.version = "0.5.3";
+  kartograph.version = "0.6.1";
 
   $ = root.jQuery;
 
@@ -620,7 +620,11 @@
           return layer.tooltips(opts.tooltips);
         }
       };
-      setTimeout(nextPaths, 0);
+      if (opts.chunks != null) {
+        setTimeout(nextPaths, 0);
+      } else {
+        nextPaths();
+      }
       return me;
     };
 

diff --git a/js/kartograph.min.js b/js/kartograph.min.js
diff --git a/showcase/choropleth/index.html b/showcase/choropleth/index.html
@@ -4,75 +4,63 @@
 ---
 
 <link rel="stylesheet" type="text/css" href="/css/jquery.qtip.css">
+<style type="text/css">
+.mapnail {
+    display: inline-block;
+    width: 33%;
+}
+</style>
 <script type="text/javascript" src="/js/jquery.qtip.min.js"></script>
+
+<script type="text/javascript" src="/js/chroma.min.js"></script>
+
 <script type="text/javascript">
 
-	$(function() {
-		var map,
-			colorscale,
-			dep_data = {},
-			w = $('#map').parent().width();
+    $(function() {
+        var map,
+            colorscale,
+            departments = {},
+            w = $('#map').parent().width();
 
-		$.fn.qtip.defaults.style.classes = 'ui-tooltip-bootstrap';
+        // initialize qtip tooltip class
+        $.fn.qtip.defaults.style.classes = 'ui-tooltip-bootstrap';
         $.fn.qtip.defaults.style.def = false;
 
-		$.ajax({
-			url: 'departments.json',
-			dataType: 'json',
-			success: function(data) {
-
-				$.each(data, function(i, r) {
-					dep_data[r.id] = r;
-				})
-
-				map = $K.map('#map', w, w);
-				map.loadMap('france-departments.svg', function() {
-					map.addLayer('departments', {
-						titles: function(d) { return d.id },
-						styles: {
-							stroke: '0.5px'
-						},
-						tooltips: function(d) {
-							return [d.name, dep_data[d.id].density + '/km<sup>2</sup>'];
-						}
-					});
-					updateMap();
-				});
-			}
-		});
-
-		/*
-		 * update map colors
-		 */
-		function updateMap() {
-			var prop = 'density', // $('.measure.btn-custom').data('value'),
-				scale = 'quantiles', // $('.scale.btn-custom').data('value'),
-				colors = $('#colors').get(0).value;
-
-			colorscale = new chroma.ColorScale({
-				colors: chroma.brewer[colors],
-				limits: chroma.limits(dep_data, scale, 7, prop)
-			});
-			map.getLayer('departments').style({
-				fill: function(d) {
-					return colorscale.getColor(dep_data[d.id][prop]);
-				}
-			});
-
-		}
-
-		// init user interface
-		$('.btn').click(function(event) {
-			var tgt = $(event.target), par = tgt.parent();
-			$('.btn', par).removeClass('btn-custom');
-			tgt.addClass('btn-custom');
-			updateMap();
-		});
-
-		$('#colors').change(updateMap);
-		$('#colors').keyup(updateMap);
-
-	});
+        $.getJSON('departments.json', function(data) {
+
+            $.each(data, function(i, r) {
+                departments[r.id] = r;
+            });
+
+            $.get('france-departments.svg', function(svg) {
+
+                $.each(['Reds', 'GnBu', 'RdYlBu', 'PiYG', 'PRGn', 'YlOrRd'], function(i, brewer) {
+
+                    var div = $('<div />').addClass('mapnail');
+                    $('#map').append(div);
+
+                    var map = Kartograph.map(div, w * 0.32, w/3),
+                        color = chroma.scale(brewer).domain(departments, 7, 'quantiles', 'density');
+
+                    map.setMap(svg);
+
+                    map.addLayer('departments', {
+                        styles: {
+                            'stroke-width': 0.7,
+                            fill: function(d) { return color(departments[d.id].density); },
+                            stroke: function(d) { return color(departments[d.id].density).darker(); }
+                        },
+                        tooltips: function(d) {
+                            return [d.name, departments[d.id].density + '/km<sup>2</sup>'];
+                        }
+                    });
+
+                });
+
+            });
+        });
+
+    });
 
 </script>
 
@@ -83,28 +71,28 @@
 
 <h2>Colors</h2>
 <select id="colors" class="span2">
-	<optgroup label="Single hue">
-		<option value="Grays">Grays</option>
-		<option value="Blues">Blues</option>
-		<option value="Reds">Reds</option>
-		<option value="Oranges">Oranges</option>
-		<option value="Greens">Greens</option>
-		<option value="Purples">Purples</option>
-	</optgroup>
-	<optgroup label="Multiple hues">
-		<option value="OrRd">Orange &rarr; Red</option>
-		<option value="PuBu">Purple &rarr; Blue</option>
-		<option value="PuRd">Purple &rarr; Red</option>
-		<option value="RdPu">Red &rarr; Purple</option>
-		<option value="BuPu">Blue &rarr; Purple</option>
-		<option value="BuGn">Blue &rarr; Green</option>
-		<option value="YlGn">Yellow &rarr; Green</option>
-		<option value="GnBu">Green &rarr; Blue</option>
-		<option value="YlGnBu" selected="selected">Yellow &rarr; Green &rarr; Blue</option>
-		<option value="YlOrBr">Yellow &rarr; Orange &rarr; Brown</option>
-		<option value="YlOrRd">Yellow &rarr; Orange &rarr; Red</option>
-		<option value="PuBuGn">Purple &rarr; Blue &rarr; Green</option>
-	</optgroup>
+    <optgroup label="Single hue">
+        <option value="Grays">Grays</option>
+        <option value="Blues">Blues</option>
+        <option value="Reds">Reds</option>
+        <option value="Oranges">Oranges</option>
+        <option value="Greens">Greens</option>
+        <option value="Purples">Purples</option>
+    </optgroup>
+    <optgroup label="Multiple hues">
+        <option value="OrRd">Orange &rarr; Red</option>
+        <option value="PuBu">Purple &rarr; Blue</option>
+        <option value="PuRd">Purple &rarr; Red</option>
+        <option value="RdPu">Red &rarr; Purple</option>
+        <option value="BuPu">Blue &rarr; Purple</option>
+        <option value="BuGn">Blue &rarr; Green</option>
+        <option value="YlGn">Yellow &rarr; Green</option>
+        <option value="GnBu">Green &rarr; Blue</option>
+        <option value="YlGnBu" selected="selected">Yellow &rarr; Green &rarr; Blue</option>
+        <option value="YlOrBr">Yellow &rarr; Orange &rarr; Brown</option>
+        <option value="YlOrRd">Yellow &rarr; Orange &rarr; Red</option>
+        <option value="PuBuGn">Purple &rarr; Blue &rarr; Green</option>
+    </optgroup>
 </select>
 <p>The <b>colors</b> are taken from <a href="http://colorbrewer2.org">ColorBrewer</a>. They are included in <a href="https://github.com/gka/chroma.js">chroma.js</a>.</p>
 <p>Map source: <a href="http://gadm.org">GADM</a>, <a href="/maps/#3683747">Kartograph config</a></p>