Commits

Dinu Gherman committed 25b0031

Added title to data sets, changed anchors to selection menu for selecting predefined data sets.

Comments (0)

Files changed (1)

     <script type="text/javascript">
         // http://de.wikipedia.org/wiki/Arbeitslosenstatistik#Deutschland
         var col_range1 = {
+            "title": "Unemployment rate in %", 
             "colors": ["#dddddd", "#000000", "#ff0000"], 
             "data_range": [3, 14], 
             "margins": [4, 6, 8, 10, 12, 14], 
         // http://www.statistikportal.de/Statistik-Portal/de_jb01_jahrtab3a.asp
         // Eheschließungen 2009 pro 10000 Einwohner
         var col_range2 = {
+            "title": "#Marriages 2009 per 10,000 inhabitants", 
             "colors": ["#dddddd", "#000000", "#00ffff"], 
             "data_range": [20, 65], 
             "margins": [35, 40, 45, 50, 55, 60, 65], 
 
         // arbitrary
         var col_range3 = {
+            "title": "Districts with single letter KFZ codes (with nonsensical values)", 
             "colors": ["#dddddd", "#000000", "#ff0000"], 
-            "data_range": [0, 25], 
+            "data_range": [0, 26], 
             "margins": [0, 4, 8, 12, 16, 20, 24, 26], 
             "data": {
                 'A': 0,
 <body>
     <h1>Interactive SVG map experiments</h1>
     
+    <h2>Predefined data sets</h2>
+
+    <select onchange="if (this.selectedIndex > 0) colorize_by_range(eval(this.value), '#map1', '#legend1');">
+        <option></option>
+        <option value="col_range1">Unemployment rate</option>
+        <option value="col_range2">Marriages 2009 per 10,000 inhabitants</option>
+        <option value="col_range3">Districts with single letter KFZ codes (with nonsensical values)</option>
+    </select>
+
+
     <p>
-    <a href="#" onclick="clearMap('#map1');">Clear</a> map
+        <a href="#" onclick="colorize_by_range(col_range1, '#map1', '#legend1');">Show color range 1</a> (unemployment rate)
+        <!-- a href="#" onclick="set_legend_by_range(col_range1, '#legend1');">Set according legend</a -->
+    </p>
+
+    <p>
+        <a href="#" onclick="colorize_by_range(col_range2, '#map1', '#legend1');">Show color range 2</a> (marriages 2009 per 10,000 inhabitants)
+        <!-- a href="#" onclick="set_legend_by_range(col_range2, '#legend1', '#legend1');">Set according legend</a></p -->
+    </p>
+
+    <p>
+        <a href="#" onclick="colorize_by_range_kfz(col_range3, '#map1', '#legend1');">Show color range 3</a> (districts with single letter KFZ codes with nonsensical values)
+        <!-- a href="#" onclick="set_legend_by_range(col_range3, '#legend1');">Set according legend</a-->
+    </p>
+
+    <p><a href="#" onclick="colorize_by_mapping(col_mapping1, '#map1');">Color using a mapping</a> (arbitrary)</p>
+    <p><a href="#" onclick="colorize_by_mapping(col_mapping3, '#map1');">Color using a mapping</a> (FDP-Präsenz in Landtagen)</p>
+
+    <h3>Controls</h3>
+    <p>
+        <a href="#" onclick="clearMap('#map1', '#legend1');">Clear</a> map / legend <br />
+        
+        <a href="#" onclick="add_district_borders('#map1');">Add</a> /
+        <a href="#" onclick="remove_district_borders('#map1');">Remove</a> district borders <br />
+        
+        <a href="#" onclick="add_region_borders('#map1');">Add</a> /
+        <a href="#" onclick="remove_region_borders('#map1');">Remove</a> region borders <br />
+
+        <a href="#" onclick="getsvg('#map1');">Get current SVG</a>
     </p>
     
-    <p><a href="#" onclick="colorize_by_range('#map1', col_range1);">Show color range 1</a> (unemployment rate, 3.9-13.3 %)</p>
-    <p><a href="#" onclick="set_legend_by_range('#legend1', col_range1);">Set according legend</a></p>
-    <p><a href="#" onclick="colorize_by_range('#map1', col_range2);">Show color range 2</a> (marriages 2009 per 10,000 inhabitants, 36.6-63.3)</p>
-    <p><a href="#" onclick="set_legend_by_range('#legend1', col_range2);">Set according legend</a></p>
-    <p><a href="#" onclick="colorize_by_range_kfz('#map1', col_range3);">Show color range 3</a> (districts with single letter KFZ codes)</p>
-    <p><a href="#" onclick="set_legend_by_range('#legend1', col_range3);">Set according legend</a></p>
-    <p><a href="#" onclick="colorize_by_mapping('#map1', col_mapping1);">Color using a mapping</a> (arbitrary)</p>
-    <p><a href="#" onclick="colorize_by_mapping('#map1', col_mapping3);">Color using a mapping</a> (FDP-Präsenz in Landtagen)</p>
-    <p>
-        <a href="#" onclick="add_district_borders('#map1');">Add</a>/<a href="#" onclick="remove_district_borders('#map1');">remove</a> district borders.
-        <a href="#" onclick="add_region_borders('#map1');">Add</a>/<a href="#" onclick="remove_region_borders('#map1');">remove</a> region borders.
-    </p>
-    
+        
+    <h3>Map:</h3>
     <div id="map1"/>
     
-    <div id="legend1">
+    <div id="legend1" style="display: none;">
         <p>Legend:</p>
         <ul>
-            <!-- 
-            <li><span style="color: red">◼</span> foo</li>
-            <li><span style="color: rgb(0, 200, 200);">◼</span> bar</li>
-            -->
         </ul>
     </div>
     
-    <p>
-        <a href="#">Highlight districts (by KFZ codes)</a> 
-        <input id="highlightkfz" name="" size="15" value="" 
-            onkeydown="highlight_by_kfz('#map1', '#highlightkfz');"
-            onkeyup="highlight_by_kfz('#map1', '#highlightkfz');"
-        /> (try e.g.: RÜG DBR HEI NVP OH) or 
-        <a href="#" onclick="highlight_all_kfz('#map1', '#highlightkfz');">*ALL*</a>
-    </p>
 
     <p>
         <a href="#" onclick="load_jsonfile_by_range('#map1', '#jsonpath');">Use JSON file</a> 
         <input id="jsonpath" name="" size="45" value="num_districts.json"/>
     </p>
     
+    
+    <h2>Dynamic data selection</h2>
+
     <p><a href="#" onclick="load_jsoncode_by_range('#map1', '#jsoncode1');">Use JSON code:</a></p>
-    
+
     <p>
     <textarea id="jsoncode1" name="" cols="50" rows="10">{
     "colors": ["#dddddd", "#ff0000", "#0000ff"], 
     </textarea>
     </p>
     
-    <p><a href="#" onclick="getsvg('#map1');">Get current SVG</a></p>
+    <p>
+        <a href="#">Highlight districts (by KFZ codes)</a> 
+        <input id="highlightkfz" name="" size="15" value="" 
+            onkeydown="highlight_by_kfz('#map1', '#highlightkfz');"
+            onkeyup="highlight_by_kfz('#map1', '#highlightkfz');"
+        /> (try e.g.: RÜG DBR HEI NVP OH) or 
+        <a href="#" onclick="highlight_all_kfz('#map1', '#highlightkfz');">*ALL*</a>
+    </p>
     
     <p><a href="javascript:window.print()">Print</a></p>
 
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.