Redesign of home page using the D3 word cloud.

5 files changed, 103 insertions, 36 deletions

diff --git a/web/i18n/de.yml b/web/i18n/de.yml
index cbd4aeb..da8c841 100644
--- a/web/i18n/de.yml
+++ b/web/i18n/de.yml
@@ -72,13 +72,12 @@ misc:
 
 pages:
     index:
+        popular_keys: Weitverbreitete Keys
         keys:
-            intro: |
-                Hier einige der häufigeren Keys:
-            listkeys: Liste aller Keys...
-            listtags: Liste der häufigsten Tags...
+            listkeys: Alle Keys...
+            listtags: Die häufigsten Tags...
         reports:
-            listreports: All Reports...
+            listreports: Alle Reports...
         about:
             intro:
                 <p>OpenStreetMap benutzt <b>Tags</b> der Form <b>Key=Value</b>,
diff --git a/web/i18n/en.yml b/web/i18n/en.yml
index 0e4ccec..6d4a0c8 100644
--- a/web/i18n/en.yml
+++ b/web/i18n/en.yml
@@ -73,11 +73,10 @@ misc:
 
 pages:
     index:
+        popular_keys: Some popular keys
         keys:
-            intro: |
-                Here are some of the more common tag keys:
-            listkeys: See list of all keys...
-            listtags: See list of the most common tags...
+            listkeys: See all keys...
+            listtags: See most common tags...
         reports:
             listreports: See all reports...
         about:
diff --git a/web/public/css/taginfo.css b/web/public/css/taginfo.css
index 8fc7850..ea78e97 100644
--- a/web/public/css/taginfo.css
+++ b/web/public/css/taginfo.css
@@ -283,7 +283,6 @@ table.boxes td.box {
     font-size: 90%;
     background-color: #ddddd4;
     padding: 8px;
-    margin-bottom: 10px;
     border-radius: 4px;
 }
 
diff --git a/web/views/index.erb b/web/views/index.erb
index 67c8312..ce3730f 100644
--- a/web/views/index.erb
+++ b/web/views/index.erb
@@ -1,17 +1,20 @@
 <table class="boxes resize" width="100%">
     <tr>
-        <td><h2><a href="/keys"><%= t.osm.keys %></a> / <a href="/tags"><%= t.osm.tags %></a></h2></td>
+        <td width="232" height="20"><h2><a href="/keys"><%= t.osm.keys %></a></h2></td>
         <td rowspan="4" width="20"></td>
-        <td width="232"><h2><a href="/reports"><%= t.taginfo.reports %></a></h2></td>
+        <td height="20"><h2><%= t.pages.index.popular_keys %></h2></td>
         <td rowspan="4" width="20"></td>
-        <td width="232"><h2><a href="/about"><%= t.taginfo.about %></a></h2></td>
+        <td width="232" height="20"><h2><a href="/reports"><%= t.taginfo.reports %></a></h2></td>
+        <td rowspan="4" width="20"></td>
+        <td width="232" height="20"><h2><a href="/about"><%= t.taginfo.about %></a></h2></td>
     </tr>
     <tr>
+        <td class="box">
+            <ul id="key_list" style="margin: 0 0 0 18px; padding: 0;"></ul>
+            <p class="emphasis" style="margin: 20px 0 0 0;"><a href="/keys"><%= t.pages.index.keys.listkeys %></a></p>
+        </td>
         <td rowspan="3" class="box">
-            <p><%= t.pages.index.keys.intro %></p>
             <div id="tagcloud" style="margin: 15px 0; line-height: 200%; text-align: justify; overflow: hidden;"></div>
-            <p class="emphasis" style="margin-top: 20px;"><a href="/keys"><%= t.pages.index.keys.listkeys %></a></p>
-            <p class="emphasis"><a href="/tags"><%= t.pages.index.keys.listtags %></a></p>
         </td>
         <td rowspan="3" class="box">
             <p><%= t.pages.reports.intro %></p>
@@ -28,12 +31,19 @@
         </td>
     </tr>
     <tr>
-        <td><h2><%= t.taginfo.international %></h2></td>
+        <td height="20"><h2><a href="/tags"><%= t.osm.tags %></a></h2></td>
+        <td height="20"><h2><%= t.taginfo.international %></h2></td>
     </tr>
     <tr>
         <td class="box">
+            <ul id="tag_list" style="margin: 0 0 0 18px; padding: 0;"></ul>
+            <p class="emphasis" style="margin: 20px 0 0 0;"><a href="/tags"><%= t.pages.index.keys.listtags %></a></p>
+        </td>
+        <td class="box">
             <p><%= TaginfoConfig.get('instance.description') %></p>
             <p class="emphasis" style="margin-top: 20px;"><a class="extlink" href="http://wiki.openstreetmap.org/wiki/Taginfo/Sites"><%= t.pages.index.international.see %></a></p>
         </td>
     </tr>
 </table>
+<% javascript 'd3/d3.v3.min' %>
+<% javascript 'd3/d3.layout.cloud' %>
diff --git a/web/viewsjs/index.js.erb b/web/viewsjs/index.js.erb
index 575834b..59a7806 100644
--- a/web/viewsjs/index.js.erb
+++ b/web/viewsjs/index.js.erb
@@ -1,14 +1,43 @@
 <%
-# This is the maximum number of tags in the tag cloud. Javascript code will remove tags if the
-# window is to small to show all of them.
-tagcloud_number_of_tags = 260
-tags = @db.select("SELECT key, scale1 FROM popular_keys ORDER BY scale1 DESC LIMIT #{ tagcloud_number_of_tags }").
+# This is the maximum number of tags in the tag cloud. Javascript code will only show
+# as many of them as will fit in the window.
+tagcloud_number_of_keys = 200
+tagcloud_number_of_tags = 40
+keys = @db.select("SELECT key, scale1 FROM popular_keys ORDER BY scale1 DESC LIMIT #{ tagcloud_number_of_keys }").
     execute().
-    each_with_index{ |tag, idx| tag['pos'] = (tagcloud_number_of_tags - idx) / tagcloud_number_of_tags.to_f }.
-    sort_by{ |row| row['key'] }
+    each_with_index{ |tag, idx| tag['pos'] = (tagcloud_number_of_keys - idx) / tagcloud_number_of_keys.to_f }
+tags = @db.select("SELECT skey, svalue FROM db.selected_tags WHERE skey NOT IN ('source', 'source_ref', 'attribution') ORDER BY count_all DESC LIMIT #{ tagcloud_number_of_tags }").execute()
 %>
 
-var tagcloud_data = <%= tags.map{ |tag| [tag['key'], tagcloud_size(tag)] }.to_json.gsub(/\],/, "],\n") %>;
+var keys_data = <%= keys.map{ |tag| { :text => tag['key'], :size => tagcloud_size(tag) } }.to_json.gsub(/\},/, "},\n") %>;
+var tags_data = <%= tags.map{ |entry| [ entry['skey'], entry['svalue'] ] }.to_json.gsub(/\],/, "],\n") %>;
+
+var width, height, font_family = 'Impact', font_weight = 'normal';
+
+function draw(words) {
+    var fill = d3.scale.category20b();
+
+    d3.select("div#tagcloud").append("svg")
+        .attr("width", width)
+        .attr("height", height)
+        .append("g")
+            .attr("transform", 'translate(' + width/2 + ',' + height/2 + ')')
+            .selectAll("text")
+                .data(words)
+                .enter()
+                .append('svg:a')
+                    .attr('xlink:href', function(d) { return url_for_key(d.text); })
+                    .append("text")
+                    .style("font-size", function(d) { return d.size + "px"; })
+                    .style("font-family", font_family)
+                    .style("font-weight", font_weight)
+                    .style('fill', function(d, i) { return d3.rgb(fill(i)).darker(0.5); })
+                    .attr("text-anchor", "middle")
+                    .attr("transform", function(d) {
+                        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
+                    })
+                    .text(function(d) { return d.text; });
+}
 
 function resize_home() {
     var tagcloud = jQuery('#tagcloud');
@@ -17,27 +46,58 @@ function resize_home() {
 
     resize_box();
 
-    var height = tagcloud.parent().innerHeight();
+    fill_lists();
+
+    height = tagcloud.parent().innerHeight();
     tagcloud.parent().children().each(function(index) {
         if (this.id != 'tagcloud') {
             height -= jQuery(this).outerHeight(true);
         }
     });
-    tagcloud.height(height - 20);
+    height -= 50;
+    tagcloud.height(height);
 
-    var cloud = '';
-    for (var i=0; i < tagcloud_data.length; i++) {
-        cloud += link(url_for_key(tagcloud_data[i][0]), tagcloud_data[i][0], { style: 'font-size: ' + tagcloud_data[i][1] + 'px;' }) + ' ';
-    }
-    tagcloud.append(cloud);
+    width = tagcloud.parent().width();
 
-    var tags_array = tagcloud.children().toArray().sort(function(a, b) {
-        return parseInt(jQuery(a).css('font-size')) - parseInt(jQuery(b).css('font-size'));
-    });
+    d3.layout.cloud().size([width, height])
+        .words(keys_data)
+        .timeInterval(10)
+        .rotate(function() { return ~~(Math.random() * 5) * 30 - 60; })
+        .font(font_family)
+        .fontWeight(font_weight)
+        .fontSize(function(d) { return d.size; })
+        .on('end', draw)
+        .start();
+}
+
+function fill_lists() {
+    var key_list = jQuery('#key_list'),
+        tag_list = jQuery('#tag_list');
+
+    key_list.empty();
+    tag_list.empty();
+
+    var key_list_height = key_list.parent().height() - key_list.next().outerHeight() - 60,
+        tag_list_height = tag_list.parent().height() - tag_list.next().outerHeight() - 60,
+        i = 0;
+
+    console.log(key_list_height);
+    console.log(tag_list_height);
+
+    while (key_list.outerHeight() < key_list_height) {
+        var d = keys_data[i];
+        key_list.append('<li>' + link_to_key(d.text) + '</li>');
+        i++;
+    }
+    key_list.append("<li>...</li>");
 
-    while (tagcloud.get(0).scrollHeight > tagcloud.height()) {
-        jQuery(tags_array.shift()).remove();
+    i = 0;
+    while (tag_list.outerHeight() < tag_list_height) {
+        var d = tags_data[i];
+        tag_list.append('<li>' + link_to_tag(d[0], d[1]) + '</li>');
+        i++;
     }
+    tag_list.append("<li>...</li>");
 }
 
 function page_init() {