diff options
author | Jochen Topf <jochen@topf.org> | 2013-01-05 20:41:03 +0100 |
---|---|---|
committer | Jochen Topf <jochen@topf.org> | 2013-01-05 20:41:03 +0100 |
commit | 9a21236a10b51d44ccfbb710b8ef9c022ce26b91 (patch) | |
tree | 7650a36d8ea621a89c454cb7ea086e276a110259 /web/viewsjs/index.js.erb | |
parent | 0c88eb71902801ebfa07e8e81b2348cb943b3bef (diff) | |
download | taginfo-9a21236a10b51d44ccfbb710b8ef9c022ce26b91.tar taginfo-9a21236a10b51d44ccfbb710b8ef9c022ce26b91.tar.gz |
Redesign of home page using the D3 word cloud.
Diffstat (limited to 'web/viewsjs/index.js.erb')
-rw-r--r-- | web/viewsjs/index.js.erb | 98 |
1 files changed, 79 insertions, 19 deletions
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() { |