Permalink
Browse files

website update

  • Loading branch information...
1 parent 01dc775 commit a53c1e81d46351fd91862f51faa0f9b8d56ce05b @gka gka committed Aug 29, 2012
Showing with 39 additions and 22 deletions.
  1. +32 −12 _layouts/showcase.html
  2. BIN img/logo.png
  3. +0 −2 showcase/3d/index.html
  4. +1 −4 showcase/charts/index.html
  5. +6 −4 showcase/choropleth/index.html
View
@@ -1,30 +1,50 @@
---
layout: core
scripts: [[jquery, '/js/jquery.min.js'], [kartograph, '/js/raphael.min.js', '/js/kartograph.js', '/js/chroma.min.js']]
+showcases:
+- id: eastcoast
+ title: High-res vector mapping
+- id: italia
+ title: La Bella Italia
+- id: choropleth
+ title: Choropleth Maps
+- id: charts
+ title: Chart Maps
+- id: dotgrid
+ title: Dot-grid Maps
+- id: 3d
+ title: 3D-Projections
+- id: projections
+ title: Map Projections
---
<div class="container">
<div class="row" style="margin-top:20px">
<div class="span3">
- <a href="/#showcase"><img src="/img/logo.png" alt="Kartograph" /></a>
+ <a href="/#showcase"><img src="/img/logotype.png" style="position:relative;top:-10px;" alt="Kartograph" /></a>
</div>
<div class="span7 content">
<h1>{{ page.title }}</h1>
<p>{{ page.about }}</p>
</div>
<div class="span2">
- <ul class="pager">
- {% if page.next %}
- <li class="next">
- <a href="/showcase/{{ page.next }}">Next &rarr;</a>
- </li>
- {% endif %}{% if page.prev %}
- <li class="next">
- <a style="margin-right:13px" href="/showcase/{{ page.prev }}">&larr;</a>
- </li>
- {% endif %}
- </ul>
+ <label>Jump to another showcase:</label>
+ <select id="jump-nav" class="span2">
+ <option></option>
+ {% for s in page.showcases %}
+ <option value="{{ s.id }}">{{ s.title }}</option>
+ {% endfor %}
+ </select>
+ <script type="text/javascript">
+ $script.ready('jquery', function() {
+ $(function() {
+ $('#jump-nav').change(function() {
+ location.href = '/showcase/' + $('#jump-nav').get(0).value;
+ });
+ });
+ });
+ </script>
</div>
</div>
{{ content }}
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -2,8 +2,6 @@
layout: showcase
title: Three-dimensional Mapping
about: This map shows crime data for some cities in the United States. You can choose between showing actual quantities of incidents or the rates. Note that the purpose of this demo is not to promote 3D bar charts (which are fairly ineffective), but to showcase the satellite projection along with the possibility to project three dimensional geo-coordinates. In fact, the height of the bars in this example is given in km above ground.
-prev: dotgrid
-next: projections
---
<script type="text/javascript">
@@ -86,10 +86,7 @@
<div id="map-overlay"></div>
<div id="map"></div>
</div>
- <div class="span4">
- <div class="page-header">
- <h1>Chart Maps</h1>
- </div>
+ <div class="span4 content">
<p>
One disadvantage of choropleth maps is that you always need to look at the legend in order to read the actual numbers. While this is inevitable for absolute quantities, there are more effective ways for visualizing percentages.
</p>
@@ -1,7 +1,7 @@
---
layout: showcase
title: Choropleth Maps
-about: This choropleth map shows population data for each of the departements of metropolean France. In general, mapping absolute quantities to values result in erroneous images since larger areas are perceived. Another way to get around this issue is to use <a href="/showcase/dotgrid/">dot grid maps</a>.
+about:
prev: italia
next: charts
---
@@ -75,6 +75,9 @@
</script>
<div class="row">
+ <div class="span8">
+ <div id="map">&nbsp;</div>
+ </div>
<div class="span4 content">
<!--<h2>Variable</h2>
@@ -83,6 +86,7 @@
<a class="measure btn btn-custom" data-value="density">Population Density</a>
<a class="measure btn" data-value="pop">Population</a>
</p>-->
+ <p>This choropleth map shows population data for each of the departements of metropolean France. In general, mapping absolute quantities to values result in erroneous images since larger areas are perceived. Another way to get around this issue is to use <a href="/showcase/dotgrid/">dot grid maps</a>.</p>
<h2>Classes</h2>
<p>The class limits are computed using <a href="https://github.com/gka/chroma.js">chroma.js</a>.
<p>
@@ -116,7 +120,5 @@ <h2>Colors</h2>
</p>
</div>
- <div class="span8">
- <div id="map">&nbsp;</div>
- </div>
+
</div>

0 comments on commit a53c1e8

Please sign in to comment.