{"id":15395454,"url":"https://github.com/stef/timecloud","last_synced_at":"2025-04-16T00:11:09.390Z","repository":{"id":455919,"uuid":"79647","full_name":"stef/timecloud","owner":"stef","description":"jQuery Timecloud - a javascript visualization widget","archived":false,"fork":false,"pushed_at":"2009-03-02T16:56:19.000Z","size":803,"stargazers_count":35,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T03:11:15.366Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://github.com/stef/timecloud/wikis","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stef.png","metadata":{"files":{"readme":"README","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2008-11-22T21:22:49.000Z","updated_at":"2023-09-08T16:25:06.000Z","dependencies_parsed_at":"2022-08-16T10:25:18.731Z","dependency_job_id":null,"html_url":"https://github.com/stef/timecloud","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stef%2Ftimecloud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stef%2Ftimecloud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stef%2Ftimecloud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stef%2Ftimecloud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stef","download_url":"https://codeload.github.com/stef/timecloud/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249173086,"owners_count":21224483,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T15:28:24.926Z","updated_at":"2025-04-16T00:11:09.364Z","avatar_url":"https://github.com/stef.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"jQuery UI Timecloud\n\nCopyright© 2008-2009 Stefan Marsiske \u003cmy name at gmail.com\u003e\n\nDual licensed under the MIT and GPLv3 licenses.\n\nDepends\n    * Jquery 1.3+\n    * JQuery UI 1.6rc6+\n    * JQuery Sparklines\n    * tagcloud.js\n    * JQuery $.event.special.wheel\n    * excanvas – for ie8 support\n\nAll these dependencies are packaged in the include/ directory of the sources.\n\nNews\n* updated to work with jquery 1.3+ and jquery-ui 1.6rc6\n\nExamples\nLive\n    * development activities of the Tikiwiki project \n     http://www.ctrlc.hu/timecloud/examples/subversion/svn-timecloud.html\n\n    * a visualization of your delicious tags \n     http://www.ctrlc.hu/timecloud/examples/delicious/delicious.html\n \nCode\nunder examples/ you'll find\n    * a general example of visualizing subversion development activities \n    * another example visualizing your delicious tags over time \n\nEasy code\nTimecloud displays an animated tagcloud. You can attach your timecloud as easily as this:\n\n   $(\"#timecloud\").timecloud({\"timecloud\":data});\n\nOptions\n\nTimecloud has quite a few options to set, these can be passed like the ‘timecloud’ parameter in the above example. The following options are available for controlling the behavious and looks of the timecloud:\n\n    * timecloud this contains the sparse timecloud data, mandatory\n    * start (0) defines index of first frame to render in the above timecloud\n      list, negative values start from the end.\n    * winSize (30) sets the initial number of days to capture in a frame\n    * steps (1) defines how many days to skip from frame to frame\n    * timeout (200us) sets the interval between frames in animation\n    * playBack (false) whether to play backwards or forwards\n    * play (false) whether to play/pause the animation\n    * urlprefix see urlpostfix\n    * urlpostfix together with urlprefix and the tag, you can compose an URL which is used as a target link for the tags in the tagcloud.\n    * sparklineStyle defines the layout for the sparklines, defaults to:\n\n   { type:'line', lineColor:'Navy', height:'30px', width:'800px', chartRangeMin: '0' }\n\nDataformat\nTimecloud expects the data to be displayed in the ‘timecloud’ option:\n\n   $(\"#timecloud\").timecloud({\"timecloud\":data});\n\nHere ‘data’ is a JSON encoded list of lists containing and sorted by days and weighted words (tags). It looks like this:\n\n   [[\"YYYY-MM-DD\",[[\"TAG1\",\"WEIGHT1\"],\n                   [\"TAG2\",\"WEIGHT2\"],\n                   ...\n                  ]\n    ],\n    [\"YYYY-MM-DD\",[....]]\n   ]\n\nor a live example:\n\n   [[\"2008-11-01\",[[\"Visualization\",\"5\"]]],\n    [\"2008-11-02\",[[\"Javascript\",\"2\"],[\"Visualization\",\"3\"]]],\n    [\"2008-11-06\",[[\"Javascript\",\"1\"],[\"Visualization\",\"1\"]]]]\n\nOne nice thing is, that the list needn’t be consecutive, only sorted in ascending order. All missing dates will be treated as not containing any tags. This is handy when doing SQL queries over timelogs for example, you don’t have entries for every day.\n\nAn example how to prepare such a data-set is explained later.\n\nFor making all this run, we need to include the dependencies in the section of our document.\n\n \u003chtml\u003e\u003chead\u003e\n      \u003c!--[if IE]\u003e\u003cscript language=\"javascript\" type=\"text/javascript\" src=\"../../include/excanvas.js\"\u003e\u003c/script\u003e\u003c![endif]--\u003e\n      \u003cscript type=\"text/javascript\" charset=\"utf-8\" src=\"include/jquery.js\"\u003e\u003c/script\u003e\n      \u003cscript type=\"text/javascript\" charset=\"utf-8\" src=\"include/jquery.sparkline.js\" \u003e\u003c/script\u003e\n      \u003cscript type=\"text/javascript\" charset=\"utf-8\" src=\"include/jquery-ui-p.min.js\"\u003e\u003c/script\u003e\n      \u003cscript type=\"text/javascript\" charset=\"utf-8\" src=\"include/jquery.event.wheel.js\"\u003e\u003c/script\u003e\n      \u003cscript type=\"text/javascript\" charset=\"utf-8\" src=\"include/tagcloud.js\"\u003e\u003c/script\u003e\n      \u003cscript type=\"text/javascript\" charset=\"utf-8\" src=\"timecloud.js\"\u003e\u003c/script\u003e\n\nwe have also a stylesheet for our widget:\n\n      \u003clink href=\"style.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\nA live example would be a small PHP script which fetches all your delicious bookmarks, and spits out a list of tags attached to the days they were used:\n\n      \u003cscript type=\"text/javascript\"\u003e\n         $(document).ready(function() {\n            var query=\"delicious.php?op=timecloud\";\n            $.getJSON(query,function(data) { $(\"#loading\").hide(); $(\"#timecloud\").timecloud({\"timecloud\":data}); });\n         })\n      \u003c/script\u003e\n \u003c/head\u003e\n\nThe last thing we need, is some element we can attach our timecloud to:\n\n   \u003cbody\u003e\n      \u003cdiv id=\"timecloud\" /\u003e \n   \u003c/body\u003e\n \u003c/head\u003e\n\nfor complete examples, see the source there is a live delicious timecloud and a subversion author timecloud example.\nHow to develop a dataset suitable for a timecloud.\n\nBelow I outline a short procedure to create a data set suitable for displaying as a timecloud. The below however should mostly work on UNIX systems only. In our example we try to create a timecloud for our historical data in subversion. We will display the weight of the developers in a certain timeframe for a project. For all files consult the contents of the examples/subversion directory in the sources.\n\nremember the format?\n\n   [[\"YYYY-MM-DD\",[[\"TAG1\",\"WEIGHT1\"],[\"TAG2\",\"WEIGHT2\"],...]],[\"YYYY-MM-DD\",[....]]]\n\nthat’s what we’re going to produce now. with a twist, we will make it into a javascript variable, so that you can simply include this file in you html and have the data readily available. Imagine we have a list raw.data, like this\n\n   2008-11-21 TAG1\n   2008-11-21 TAG2\n   2008-11-21 TAG2\n\nin the examples the subversion/utils directory contains an svn2tc.xsl template, which produces such out put if applied on subversion historical logs:\n\n   svn log --xml --verbose | xsltproc svn2tc.xsl - |\n\n(note, that all lines end with pipes, like it would be one long line) If we would like to display the tags weight over the days, we need this data to be sorted by ascending dates:\n\n   sort -n raw.dates |\n\nfurthermore we would like to have the sum of each tag and each tag only once in our list:\n\n   uniq -c -f 1 |\n\nso we invoke the UNIX uniq command and tell it to count the distinct tags per day. unfortunately it gives us such an output:\n\n         1 2008-11-21 TAG1\n         2 2008-11-21 TAG2\n\nwhich needs to be converted into our list format above, for which i resorted to some awk. To put it short the tool below takes any file similar to the uniq output and converts it to a javascript array variable:\n\n   var timeclouddata=[[\"2008-11-21\", [[\"TAG1\", \"1\"],[\"TAG2\", \"2\"]]]];\n\nthis you can then pass to\n\n   $(\"#timecloud\").timecloud({\"timecloud\":timeclouddata});\n\nhave fun, s.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstef%2Ftimecloud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstef%2Ftimecloud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstef%2Ftimecloud/lists"}