From 9a21236a10b51d44ccfbb710b8ef9c022ce26b91 Mon Sep 17 00:00:00 2001 From: Jochen Topf Date: Sat, 5 Jan 2013 20:41:03 +0100 Subject: Redesign of home page using the D3 word cloud. --- web/i18n/de.yml | 9 ++--- web/i18n/en.yml | 7 ++-- web/public/css/taginfo.css | 1 - web/views/index.erb | 24 ++++++++---- web/viewsjs/index.js.erb | 98 +++++++++++++++++++++++++++++++++++++--------- 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:

OpenStreetMap benutzt Tags der Form Key=Value, 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 @@ - + - + - + + + + - + + +

<%= t.osm.keys %> / <%= t.osm.tags %>

<%= t.osm.keys %>

<%= t.taginfo.reports %>

<%= t.pages.index.popular_keys %>

<%= t.taginfo.about %>

<%= t.taginfo.reports %>

<%= t.taginfo.about %>
+
    +

    <%= t.pages.index.keys.listkeys %>

    +     		-

    <%= t.pages.index.keys.intro %>

    -

    <%= t.pages.index.keys.listkeys %>

    -

    <%= t.pages.index.keys.listtags %>

    <%= t.pages.reports.intro %>

    @@ -28,12 +31,19 @@

    <%= t.taginfo.international %>

    <%= t.osm.tags %>

    <%= t.taginfo.international %>
    +
      +

      <%= t.pages.index.keys.listtags %>

      +

      <%= TaginfoConfig.get('instance.description') %>

      <%= t.pages.index.international.see %>
      +<% 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('

    • ' + link_to_key(d.text) + '
      • '); + i++; + } + key_list.append("
    • ...
      • "); - 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('
    • ' + link_to_tag(d[0], d[1]) + '
      • '); + i++; } + tag_list.append("
    • ...
      • "); } function page_init() { -- cgit v1.2.3