summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJochen Topf <jochen@topf.org>2013-01-05 20:41:03 +0100
committerJochen Topf <jochen@topf.org>2013-01-05 20:41:03 +0100
commit9a21236a10b51d44ccfbb710b8ef9c022ce26b91 (patch)
tree7650a36d8ea621a89c454cb7ea086e276a110259
parent0c88eb71902801ebfa07e8e81b2348cb943b3bef (diff)
downloadtaginfo-9a21236a10b51d44ccfbb710b8ef9c022ce26b91.tar
taginfo-9a21236a10b51d44ccfbb710b8ef9c022ce26b91.tar.gz
Redesign of home page using the D3 word cloud.
-rw-r--r--web/i18n/de.yml9
-rw-r--r--web/i18n/en.yml7
-rw-r--r--web/public/css/taginfo.css1
-rw-r--r--web/views/index.erb24
-rw-r--r--web/viewsjs/index.js.erb98
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() {