Last active
December 20, 2015 14:39
-
-
Save livoffgrid/6147968 to your computer and use it in GitHub Desktop.
d3 queues animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> <title>d3 queues</title> </head> | |
| <style> | |
| text.label { | |
| fill: black; | |
| } | |
| </style> | |
| <body> | |
| <div id='container'></div> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| <script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script> | |
| <script type="text/javascript" src="sample_queues.js"></script> | |
| <script type="text/javascript"> | |
| var container_width = 300 | |
| var container_height = 400 | |
| var bar_width = 40 | |
| var chart = d3.select("#container") | |
| .append("svg") | |
| .attr("width", container_width) | |
| .attr("height", container_height); | |
| var STEP = 0 | |
| var log10 = function(val) { | |
| return Math.log(val) / Math.LN10; | |
| } | |
| // Create the bar chart which consists of ten SVG rectangles, one for each piece of data | |
| var rects = chart.selectAll('rect').data(data[0]) | |
| .enter().append('rect') | |
| .attr("stroke", "none").attr("fill", "rgb(7, 130, 180)") | |
| .attr("width", bar_width) | |
| .attr("height", container_height) | |
| .attr("x", function(d, i) { return (bar_width+5) * i; } ) | |
| .attr("y", function(d) {return container_height - log10(d.size)*50; }) | |
| var labels = chart.selectAll('text').data(data[0]) | |
| .enter().append('text') | |
| .attr('x', function(d, i) { return (bar_width+5) * i; } ) | |
| .attr('y', container_height-10) | |
| .attr('dx', -3) | |
| .attr('dy', '.35em') | |
| .attr("text-anchor", "start") | |
| .attr('class', 'label') | |
| .attr('transform', function(d) { | |
| var th = $(this); | |
| var x = parseInt(th.attr('x')) + 10; | |
| var y = container_height - 20; | |
| return "rotate(-90, "+x+", "+y+")" | |
| }) | |
| .text(function(d) { return d.queue; }) | |
| // Transition on click managed by jQuery | |
| rects.on('click', function() { | |
| // Generate randomly a data set with 10 elements | |
| STEP += 1 | |
| var newData = data[STEP] | |
| // Generate a random color | |
| var newColor = 'rgb(' + Math.floor(255 * Math.random()) + | |
| ', ' + Math.floor(255 * Math.random()) + | |
| ', ' + Math.floor(255 * Math.random()) + ')'; | |
| rects.data(newData) | |
| .transition().duration(1000) | |
| .attr("y", function(d) {return container_height - log10(d.size)*50; }) | |
| .attr("fill", newColor); | |
| labels.data(newData) | |
| .transition().duration(1000) | |
| .text(function(d) { return d.queue; }) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var data = [[{"queue":"sentiment","size":1461100},{"queue":"gnip_twitter","size":124},{"queue":"hbase_writers_facebook","size":83},{"queue":"wf_ytc_videocomments","size":17},{"queue":"simple_daemon-job-facebook_impressions","size":9},{"queue":"wf_ytc_videos","size":7}],[{"queue":"sentiment","size":1461760},{"queue":"hbase_writers_facebook","size":142},{"queue":"wf_ytc_videocomments","size":123},{"queue":"simple_daemon-job-facebook_impressions","size":9},{"queue":"hbase_writers_youtube","size":6},{"queue":"wf_fbp_postprocessor","size":1}],[{"queue":"sentiment","size":1461803},{"queue":"hbase_writers_facebook","size":120},{"queue":"simple_daemon-job-facebook_impressions","size":22},{"queue":"wf_ytc_videocomments","size":15},{"queue":"simple_create_report_wowrack_hbase","size":10},{"queue":"gnip_twitter","size":8},{"queue":"wf_ytc_videos","size":6},{"queue":"simple_location_search","size":1}],[{"queue":"sentiment","size":1461858},{"queue":"gnip_twitter","size":418},{"queue":"wf_ytc_videocomments","size":121},{"queue":"simple_daemon-job-facebook_impressions","size":23},{"queue":"hbase_writers_facebook","size":15},{"queue":"wf_ytc_videos","size":6},{"queue":"wf_fbp_postprocessor","size":1}],[{"queue":"sentiment","size":1462366},{"queue":"simple_daemon-job-facebook_impressions","size":14},{"queue":"wf_ytc_videocomments","size":10},{"queue":"hbase_writers_facebook","size":6}],[{"queue":"sentiment","size":1462432},{"queue":"gnip_twitter","size":62},{"queue":"wf_ytc_videocomments","size":28},{"queue":"simple_daemon-job-bitly_clicks","size":14},{"queue":"simple_daemon-job-facebook_impressions","size":9},{"queue":"hbase_writers_facebook","size":8},{"queue":"wf_fbp_commentfetcher","size":4},{"queue":"wf_ytc_videos","size":2},{"queue":"wf_fbp_commentprocessor","size":1}],[{"queue":"sentiment","size":1463165},{"queue":"gnip_twitter","size":784},{"queue":"simple_location_search","size":45},{"queue":"wf_ytc_videocomments","size":22},{"queue":"simple_daemon-job-bitly_clicks","size":13},{"queue":"hbase_writers_facebook","size":2},{"queue":"wf_ytc_videos","size":1}],[{"queue":"sentiment","size":1463195},{"queue":"wf_ytc_videocomments","size":24},{"queue":"wf_fbp_commentfetcher","size":8},{"queue":"hbase_writers_facebook","size":4},{"queue":"hbase_writers_youtube","size":1}],[{"queue":"sentiment","size":1463714},{"queue":"hbase_writers_facebook","size":5},{"queue":"wf_ytc_videocomments","size":4},{"queue":"wf_fbp_commentprocessor","size":1}],[{"queue":"sentiment","size":1463714},{"queue":"gnip_twitter","size":1001},{"queue":"simple_location_search","size":3},{"queue":"simple_daemon-job-bitly_clicks","size":1}],[{"queue":"sentiment","size":1463754},{"queue":"simple_daemon-job-facebook_insights","size":1}],[{"queue":"sentiment","size":1464265},{"queue":"wf_fbp_postprocessor","size":35},{"queue":"wf_fbp_postfetcher","size":4},{"queue":"hbase_writers_facebook","size":2},{"queue":"simple_daemon-job-facebook_impressions","size":1}],[{"queue":"sentiment","size":1464265},{"queue":"gnip_twitter","size":997},{"queue":"simple_daemon-job-facebook_impressions","size":10},{"queue":"wf_fbp_commentfetcher","size":3},{"queue":"wf_fbp_postprocessor","size":1}],[{"queue":"sentiment","size":1464321},{"queue":"simple_daemon-job-facebook_impressions","size":22},{"queue":"tumblr_reblog","size":12},{"queue":"wf_fbp_postprocessor","size":8},{"queue":"wf_fbp_commentfetcher","size":6},{"queue":"hbase_writers_facebook","size":5},{"queue":"simple_daemon-job-facebook_post_insights","size":4}],[{"queue":"sentiment","size":1464845},{"queue":"gnip_twitter","size":761},{"queue":"hbase_writers_facebook","size":36},{"queue":"simple_daemon-job-facebook_impressions","size":15},{"queue":"wf_fbp_postprocessor","size":9}],[{"queue":"sentiment","size":1464877},{"queue":"gnip_twitter","size":1005},{"queue":"hbase_writers_facebook","size":96}],[{"queue":"sentiment","size":1465284},{"queue":"hbase_writers_facebook","size":59},{"queue":"simple_daemon-job-facebook_impressions","size":16}],[{"queue":"sentiment","size":1465779},{"queue":"gnip_twitter","size":813},{"queue":"hbase_writers_facebook","size":65},{"queue":"simple_daemon-job-facebook_impressions","size":15}],[{"queue":"sentiment","size":1465876},{"queue":"gnip_twitter","size":1004},{"queue":"hbase_writers_facebook","size":76},{"queue":"simple_daemon-job-facebook_impressions","size":10},{"queue":"wf_fbp_postprocessor","size":1}],[{"queue":"sentiment","size":1466437},{"queue":"simple_daemon-job-facebook_impressions","size":20},{"queue":"hbase_writers_facebook","size":13},{"queue":"wf_fbp_commentprocessor","size":1}],[{"queue":"sentiment","size":1466471},{"queue":"simple_daemon-job-facebook_impressions","size":10}],[{"queue":"sentiment","size":1466857},{"queue":"gnip_twitter","size":1002},{"queue":"hbase_writers_facebook","size":52},{"queue":"simple_daemon-job-facebook_impressions","size":13},{"queue":"simple_create_report_wowrack_hbase","size":6}],[{"queue":"sentiment","size":1466907},{"queue":"gnip_twitter","size":1001},{"queue":"hbase_writers_facebook","size":29},{"queue":"simple_daemon-job-facebook_impressions","size":6},{"queue":"wf_fbp_commentfetcher","size":1}],[{"queue":"sentiment","size":1467002},{"queue":"hbase_writers_facebook","size":54},{"queue":"simple_daemon-job-facebook_impressions","size":20},{"queue":"wf_fbp_postprocessor","size":1}],[{"queue":"sentiment","size":1467478},{"queue":"hbase_writers_facebook","size":1}],[{"queue":"sentiment","size":1467481},{"queue":"gnip_twitter","size":1000},{"queue":"hbase_writers_facebook","size":16},{"queue":"simple_create_report_wowrack_hbase","size":12},{"queue":"wf_fbp_commentfetcher","size":6}],[{"queue":"sentiment","size":1468106},{"queue":"simple_daemon-job-bitly_clicks","size":87},{"queue":"simple_daemon-job-facebook_impressions","size":8},{"queue":"simple_daemon-job-youtube_stats","size":7},{"queue":"hbase_writers_facebook","size":4},{"queue":"wf_fbp_postprocessor","size":2}],[{"queue":"sentiment","size":1468139},{"queue":"simple_daemon-job-bitly_clicks","size":112},{"queue":"wf_fbp_postprocessor","size":11},{"queue":"hbase_writers_facebook","size":2},{"queue":"simple_daemon-job-youtube_stats","size":1}],[{"queue":"sentiment","size":1468542},{"queue":"simple_daemon-job-bitly_clicks","size":21},{"queue":"hbase_writers_facebook","size":9},{"queue":"wf_fbp_commentfetcher","size":3},{"queue":"wf_fbp_commentprocessor","size":2},{"queue":"simple_daemon-job-youtube_stats","size":1}],[{"queue":"sentiment","size":1468595},{"queue":"gnip_twitter","size":1005},{"queue":"wf_fbp_postfetcher","size":1}],[{"queue":"sentiment","size":1468637},{"queue":"hbase_writers_facebook","size":26},{"queue":"wf_fbp_commentfetcher","size":6},{"queue":"wf_fbp_commentprocessor","size":2},{"queue":"datasift_add_configuration_to_tags","size":1}],[{"queue":"sentiment","size":1469211},{"queue":"hbase_writers_facebook","size":44}],[{"queue":"sentiment","size":1469262},{"queue":"hbase_writers_facebook","size":142},{"queue":"wf_fbp_postprocessor","size":20},{"queue":"wf_fbp_postfetcher","size":2}],[{"queue":"sentiment","size":1469262},{"queue":"gnip_twitter","size":1003},{"queue":"hbase_writers_facebook","size":70}],[{"queue":"sentiment","size":1469852},{"queue":"hbase_writers_facebook","size":70},{"queue":"wf_fbp_commentfetcher","size":1}],[{"queue":"sentiment","size":1469899},{"queue":"hbase_writers_facebook","size":35},{"queue":"wf_fbp_postprocessor","size":2}],[{"queue":"sentiment","size":1469980},{"queue":"gnip_twitter","size":964},{"queue":"hbase_writers_facebook","size":47},{"queue":"simple_daemon-job-facebook_post_insights","size":1}],[{"queue":"sentiment","size":1470476},{"queue":"wf_fbp_postprocessor","size":17},{"queue":"wf_fbp_commentfetcher","size":6},{"queue":"wf_fbp_postfetcher","size":2}],[{"queue":"sentiment","size":1479188},{"queue":"simple_daemon-job-bitly_clicks","size":45},{"queue":"simple_daemon-job-youtube_stats","size":3}],[{"queue":"sentiment","size":1479188},{"queue":"gnip_twitter","size":1000}],[{"queue":"sentiment","size":1479233},{"queue":"hbase_writers_facebook","size":11},{"queue":"wf_fbp_commentfetcher","size":3},{"queue":"wf_fbp_postprocessor","size":2}],[{"queue":"sentiment","size":1479272}],[{"queue":"sentiment","size":1479326},{"queue":"simple_create_report_wowrack_hbase","size":6},{"queue":"hbase_writers_facebook","size":2}],[{"queue":"sentiment","size":1479326},{"queue":"gnip_twitter","size":1000},{"queue":"hbase_writers_facebook","size":2}],[{"queue":"sentiment","size":1479367},{"queue":"wf_fbp_commentfetcher","size":4}],[{"queue":"sentiment","size":1479414},{"queue":"simple_create_report_wowrack_hbase","size":3},{"queue":"wf_fbp_commentfetcher","size":1}],[{"queue":"sentiment","size":1479414},{"queue":"gnip_twitter","size":1004},{"queue":"simple_create_report_wowrack_hbase","size":9}],[{"queue":"sentiment","size":1479443}],[{"queue":"sentiment","size":1479492},{"queue":"wf_fbp_postfetcher","size":1}],[{"queue":"sentiment","size":1479702},{"queue":"simple_daemon-job-bitly_clicks","size":58},{"queue":"hbase_writers_facebook","size":30},{"queue":"wf_fbp_commentfetcher","size":25},{"queue":"simple_daemon-job-youtube_stats","size":3},{"queue":"wf_fbp_postfetcher","size":1}],[{"queue":"sentiment","size":1479703},{"queue":"gnip_twitter","size":931},{"queue":"simple_daemon-job-bitly_clicks","size":41},{"queue":"simple_location_search","size":10},{"queue":"simple_daemon-job-youtube_stats","size":3}],[{"queue":"sentiment","size":1479743},{"queue":"gnip_twitter","size":1001},{"queue":"hbase_writers_facebook","size":87},{"queue":"simple_daemon-job-bitly_clicks","size":4}],[{"queue":"sentiment","size":1479778},{"queue":"hbase_writers_facebook","size":97}],[{"queue":"sentiment","size":1479817},{"queue":"hbase_writers_facebook","size":62}],[{"queue":"sentiment","size":1479864},{"queue":"hbase_writers_facebook","size":7},{"queue":"wf_fbp_postprocessor","size":4}],[{"queue":"sentiment","size":1479864},{"queue":"gnip_twitter","size":1003},{"queue":"hbase_writers_facebook","size":21},{"queue":"wf_fbp_commentfetcher","size":4},{"queue":"wf_fbp_postprocessor","size":2},{"queue":"wf_fbp_postfetcher","size":1}],[{"queue":"sentiment","size":1479902},{"queue":"simple_daemon-job-bitly_clicks","size":87},{"queue":"simple_daemon-job-vimeo_stats","size":1}],[{"queue":"sentiment","size":1479960},{"queue":"simple_daemon-job-bitly_clicks","size":97},{"queue":"simple_create_report_wowrack_hbase","size":2},{"queue":"simple_daemon-job-facebook_impressions","size":1}],[{"queue":"sentiment","size":1479960},{"queue":"gnip_twitter","size":1002},{"queue":"hbase_writers_facebook","size":8},{"queue":"datasift_add_configuration_to_tags","size":1}],[{"queue":"sentiment","size":1480006}],[{"queue":"sentiment","size":1480379},{"queue":"hbase_writers_facebook","size":81}],[{"queue":"sentiment","size":1480379},{"queue":"gnip_twitter","size":1005}],[{"queue":"sentiment","size":1480423},{"queue":"hbase_writers_facebook","size":46},{"queue":"wf_fbp_commentfetcher","size":1}],[{"queue":"sentiment","size":1480474}],[{"queue":"sentiment","size":1480474},{"queue":"gnip_twitter","size":1002},{"queue":"wf_fbp_postprocessor","size":4},{"queue":"wf_fbp_postfetcher","size":1}],[{"queue":"sentiment","size":1480516},{"queue":"wf_fbp_postprocessor","size":15},{"queue":"wf_fbp_postfetcher","size":1}],[{"queue":"sentiment","size":1480550},{"queue":"wf_fbp_postprocessor","size":15},{"queue":"wf_fbp_postfetcher","size":1}],[{"queue":"sentiment","size":1480550},{"queue":"gnip_twitter","size":1004},{"queue":"simple_create_report_wowrack_hbase","size":3}],[{"queue":"sentiment","size":1480591}],[{"queue":"sentiment","size":1480643},{"queue":"hbase_writers_facebook","size":36},{"queue":"wf_fbp_commentfetcher","size":29},{"queue":"simple_daemon-job-bitly_clicks","size":1}],[{"queue":"sentiment","size":1480643},{"queue":"gnip_twitter","size":1003},{"queue":"simple_create_report_wowrack_hbase","size":10},{"queue":"hbase_writers_facebook","size":4},{"queue":"wf_fbp_commentprocessor","size":1}],[{"queue":"sentiment","size":1480683},{"queue":"gnip_twitter","size":1001},{"queue":"wf_twitteruser_graph_processor_detailedupdates","size":21}],[{"queue":"sentiment","size":1480738},{"queue":"simple_daemon-job-bitly_clicks","size":59},{"queue":"hbase_writers_facebook","size":3},{"queue":"hbase_writers_twitter","size":2},{"queue":"simple_daemon-job-facebook_impressions","size":1}],[{"queue":"sentiment","size":1480738},{"queue":"gnip_twitter","size":1000},{"queue":"hbase_writers_facebook","size":9}],[{"queue":"sentiment","size":1480783},{"queue":"gnip_twitter","size":1003},{"queue":"hbase_writers_facebook","size":35},{"queue":"simple_daemon-job-facebook_post_insights","size":2},{"queue":"wf_fbp_commentfetcher","size":1}],[{"queue":"sentiment","size":1480830},{"queue":"gnip_tumblr","size":25},{"queue":"wf_fbp_commentfetcher","size":2},{"queue":"hbase_writers_facebook","size":1}],[{"queue":"sentiment","size":1480830},{"queue":"gnip_twitter","size":984},{"queue":"simple_daemon-job-facebook_impressions","size":1}],[{"queue":"sentiment","size":1480872},{"queue":"gnip_twitter","size":1000},{"queue":"wf_fbp_commentfetcher","size":15},{"queue":"hbase_writers_facebook","size":2}],[{"queue":"sentiment","size":1480906},{"queue":"simple_daemon-job-bitly_clicks","size":29},{"queue":"simple_daemon-job-youtube_stats","size":7},{"queue":"simple_daemon-job-facebook_impressions","size":2}],[{"queue":"sentiment","size":1480907},{"queue":"gnip_twitter","size":980},{"queue":"hbase_writers_facebook","size":33},{"queue":"wf_fbp_commentfetcher","size":6},{"queue":"wf_fbp_postfetcher","size":4},{"queue":"simple_create_report_wowrack_hbase","size":3},{"queue":"simple_daemon-job-facebook_impressions","size":2}],[{"queue":"sentiment","size":1480954},{"queue":"gnip_twitter","size":1000}],[{"queue":"sentiment","size":1481001},{"queue":"simple_create_report_wowrack_hbase","size":2},{"queue":"wf_proxy","size":1}],[{"queue":"sentiment","size":1481044},{"queue":"hbase_writers_facebook","size":53},{"queue":"simple_daemon-job-bitly_clicks","size":6},{"queue":"wf_fbp_commentfetcher","size":2}],[{"queue":"sentiment","size":1481044},{"queue":"gnip_twitter","size":1004},{"queue":"hbase_writers_facebook","size":4},{"queue":"wf_fbp_postfetcher","size":1}],[{"queue":"sentiment","size":1481093},{"queue":"hbase_writers_facebook","size":28},{"queue":"wf_fbp_commentprocessor","size":3},{"queue":"wf_fbp_commentfetcher","size":2},{"queue":"simple_daemon-job-bitly_clicks","size":1}],[{"queue":"sentiment","size":1481135},{"queue":"hbase_writers_facebook","size":7},{"queue":"simple_create_report_wowrack_hbase","size":4},{"queue":"wf_fbp_commentfetcher","size":1}],[{"queue":"sentiment","size":1481137},{"queue":"gnip_twitter","size":1003},{"queue":"hbase_writers_facebook","size":24},{"queue":"simple_daemon-job-bitly_clicks","size":1}],[{"queue":"sentiment","size":1481177},{"queue":"simple_daemon-job-bitly_clicks","size":159},{"queue":"hbase_writers_facebook","size":30},{"queue":"simple_daemon-job-vimeo_stats","size":3},{"queue":"simple_create_report_wowrack_hbase","size":2},{"queue":"simple_daemon-job-facebook_impressions","size":1}],[{"queue":"sentiment","size":1481216},{"queue":"simple_daemon-job-bitly_clicks","size":281},{"queue":"wf_fbp_commentfetcher","size":11},{"queue":"simple_daemon-job-youtube_stats","size":4},{"queue":"wf_fbp_postprocessor","size":3},{"queue":"hbase_writers_facebook","size":1}],[{"queue":"sentiment","size":1481253},{"queue":"gnip_twitter","size":263},{"queue":"simple_location_search","size":125},{"queue":"simple_daemon-job-bitly_clicks","size":46},{"queue":"wf_fbp_commentfetcher","size":4},{"queue":"wf_fbp_postfetcher","size":1}],[{"queue":"sentiment","size":1481263},{"queue":"wf_fbp_commentfetcher","size":7},{"queue":"hbase_writers_facebook","size":1}],[{"queue":"sentiment","size":1481306}],[{"queue":"sentiment","size":1481353},{"queue":"wf_fbp_postprocessor","size":3},{"queue":"wf_fbp_commentprocessor","size":1}],[{"queue":"sentiment","size":1481353},{"queue":"wf_fbp_postfetcher","size":1}],[{"queue":"sentiment","size":1481394},{"queue":"simple_daemon-job-bitly_clicks","size":277},{"queue":"hbase_writers_facebook","size":5},{"queue":"simple_create_report_wowrack_hbase","size":1}],[{"queue":"sentiment","size":1481394},{"queue":"gnip_twitter","size":1004},{"queue":"wf_fbp_commentfetcher","size":1}],[{"queue":"sentiment","size":1481441},{"queue":"wf_fbp_postprocessor","size":17}],[{"queue":"sentiment","size":1481485},{"queue":"wf_fbp_commentfetcher","size":11},{"queue":"wf_fbp_postfetcher","size":1}],[{"queue":"sentiment","size":1481485}],[{"queue":"sentiment","size":1481541}],[{"queue":"sentiment","size":1481591},{"queue":"hbase_writers_facebook","size":65},{"queue":"simple_daemon-job-bitly_clicks","size":31},{"queue":"hbase_writers_instagram","size":1}],[{"queue":"sentiment","size":1481591},{"queue":"hbase_writers_facebook","size":5}],[{"queue":"sentiment","size":1481641}]] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment