Commits

Dinu Gherman  committed b5b6175

Started with legends using "margins" in color range data settings. Likely to be changed again.

  • Participants
  • Parent commits 13b2d62

Comments (0)

Files changed (1)

File germany.xhtml

         // http://de.wikipedia.org/wiki/Arbeitslosenstatistik#Deutschland
         var col_range1 = {
             "colors": ["#dddddd", "#000000", "#ff0000"], 
-            "data_range": [0, 13.3], 
+            "data_range": [3, 14], 
+            "margins": [4, 6, 8, 10, 12, 14], 
             "data": {
                 "Ba": 3.5,
                 "Be": 13.3,
         // Eheschließungen 2009 pro 10000 Einwohner
         var col_range2 = {
             "colors": ["#dddddd", "#000000", "#00ffff"], 
-            "data_range": [0, 63.3], 
+            "data_range": [20, 65], 
+            "margins": [35, 40, 45, 50, 55, 60, 65], 
             "data": {
                 "Ba": 47,
                 "Be": 36.6,
             },
         };
 
+        // arbitrary
+        var col_range3 = {
+            "colors": ["#dddddd", "#000000", "#ff0000"], 
+            "data_range": [0, 25], 
+            "margins": [0, 4, 8, 12, 16, 20, 24, 26], 
+            "data": {
+                'A': 0,
+                'B': 1,
+                'C': 2,
+                'D': 3,
+                'E': 4,
+                'F': 5,
+                'G': 6,
+                'H': 7,
+                'I': 8,
+                'J': 9,
+                'K': 10,
+                'L': 11,
+                'M': 12,
+                'N': 13,
+                'O': 14,
+                'P': 15,
+                'Q': 16,
+                'R': 17,
+                'S': 18,
+                'T': 19,
+                'U': 20,
+                'V': 21,
+                'W': 22,
+                'X': 23,
+                'Y': 24,
+                'Z': 25
+            },
+        };
+
         var col_mapping1 = {
             "data": {
                 "Ba": "red",
                 "Ha": "yellow",
                 "He": "yellow",
                 "MV": "none",
-                "Ni": "yellow",
+                "Ni": "none",
                 "NW": "yellow",
                 "RP": "none",
                 "SA": "none",
     <style type="text/css">
         body { background-color: lemonchiffon; }
         #map1 { width: 200px; height: 300px; border: 1px solid #484; }
+        #legend1 ul { list-style-type: none; }
     </style>
 
 </head>
     </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>
     
     <div id="map1"/>
     
+    <div id="legend1">
+        <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 district (KFZ)</a> 
+        <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');"
-        /> (still imcomplete, but try e.g.: RÜG DBR HEI NVP OH) or 
+        /> (try e.g.: RÜG DBR HEI NVP OH) or 
         <a href="#" onclick="highlight_all_kfz('#map1', '#highlightkfz');">*ALL*</a>
     </p>