{"id":16222921,"url":"https://github.com/michael/dance","last_synced_at":"2025-05-08T19:49:02.709Z","repository":{"id":2804043,"uuid":"3804836","full_name":"michael/dance","owner":"michael","description":"Don't be shy - take your data for a dance.","archived":false,"fork":false,"pushed_at":"2012-11-17T12:49:49.000Z","size":194,"stargazers_count":263,"open_issues_count":1,"forks_count":42,"subscribers_count":27,"default_branch":"gh-pages","last_synced_at":"2024-11-09T22:43:27.108Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://quasipartikel.at/2012/04/25/dancing-with-data/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"scalableinternetservices/lolcounter","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/michael.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-03-23T03:03:31.000Z","updated_at":"2024-04-02T11:24:24.000Z","dependencies_parsed_at":"2022-08-08T18:31:48.168Z","dependency_job_id":null,"html_url":"https://github.com/michael/dance","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael%2Fdance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael%2Fdance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael%2Fdance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael%2Fdance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michael","download_url":"https://codeload.github.com/michael/dance/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225110575,"owners_count":17422411,"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-10T12:15:51.114Z","updated_at":"2024-11-18T01:05:09.031Z","avatar_url":"https://github.com/michael.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Dance.js\n========\n\n[Dance.js](http://github.com/michael/dance) is a simple data-driven\nvisualization framework. It's basically a flavor of\n[Backbone.js](http://documentcloud.github.com/backbone/), but enriched\nwith some of the ideas of the very popular\n[D3.js](http://mbostock.github.com/d3/) visualization framework.\n\nA Dance.js dance involves several Performers (aka views or\nvisualizations) who are performing on screen. Users of Backbone.js might\nalready be familiar with the API, as it's pretty much the same as for\n`Backbone.View`. Dance.js comes with its own data manipulation\nframework, [Data.js](http://substance.io/michael/data-js) which\nfunctions as a replacement for `Backbone.Model`.\n\nDownload and Installation\n=========================\n\nThere's no official release yet.\n\nCheckout the Source Code on [Github](http://github.com/michael/data).\nDance.js depends on [Data.js](http://substance.io/michael/data-js) and\n[Underscore.js](http://documentcloud.github.com/underscore), make sure\nto have included a recent version of each.\n\nDance.Performer\n===============\n\nIn order to have a good dance, you need at least one experienced\n`Dance.Performer`. Okay, performers as individuals are all different.\nSome might be unbeatable in dancing the classic waltz (speaking of\nclassical HTML Views), while others shine when it comes to modern\nartistic dancing (aka data visualizations).\n\n```js\nvar Barchart = Dance.Performer.extend({\n\n  events: {\n    \"click .bar\": \"open\",\n  },\n\n  render: function() {\n    ...\n  }\n  \n});\n```\n\nPlease use the [Backbone.js API\ndocs](http://documentcloud.github.com/backbone/#View).\n\nDance.Choreographer\n================\n\nIf your dance performance involves many performers, it's most likely\nthat you need a `Dance.Choreographer`, coordinating your dance.\n\n```js\nvar Choreographer = Dance.Choreographer.extend({\n  routes: {\n    \"methodology\":              \"methodology\",          // #methodology\n    \"power_consumption/:state\": \"powerConsumption\",     // #power_consumption/dc\n  },\n\n  bars: function() {\n    ...\n  },\n\n  search: function(state) {\n    ...\n  }\n});\n```\n\nOnce you have setup your choreographer you are ready to perform that dance.\n\n```js\nwindow.choreographer = new Choreographer({});\nDance.performance.start(); // Starts responding to routes\n```\n\nEnter / Exit / Update\n---------------------\n\nMuch like in the spirit of D3.js, you can specify transformations, based\non data-changes. Application developers may consider three different\ncases here: The updating nodes to modify, the entering nodes to add, and\nthe exiting nodes to remove. An example implementation for an animated\nBarchart could look like this:\n\n```js\nvar Barchart = Dance.Performer.extend({\n  collections: {\n    \"items\": {\n      enter: function(items) {\n        items.each(function(item) {\n          var bar = $('\u003cdiv class=\"bar\" id=\"'+item.html_id+'\"\u003e\u003c/div\u003e')\n                .css('left', item.pos.x)\n                .css('bottom', 0)\n                .css('width', item.pos.dx)\n                .css('height', item.pos.dy)\n                .appendTo($('#canvas'));\n        });\n      },\n  \n      update: function(items) {\n        items.each(function(item) {\n         $('#'+item.html_id)\n           .css('left', item.pos.x)\n           .css('width', item.pos.dx)\n           .css('height', item.pos.dy)\n        });\n      },\n  \n      exit: function(items) {\n        items.each(function(i, key) { $('#'+key).remove(); });\n      }\n    }\n  },\n  \n  ...\n}\n```\n\nYou can specify transformations for an arbitrary number of collections\nyour visualization is using.\n\nFirst-time dances\n=================\n\nA good way to start is probably reading trough the tutorial [Dancing with Data](http://quasipartikel.at/2012/04/25/dancing-with-data/) \nplus checking out a couple of first-time dances:\n\n-   [The Barchart Dance](http://bl.ocks.org/2172216)\n-   [The Scatterplot Dance](http://bl.ocks.org/2458819)\n\n![The Barchart\nDance](http://substance-assets.s3.amazonaws.com/68/6ae5ed1421157b81058d88f4c88f9c/bars.png)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichael%2Fdance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichael%2Fdance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichael%2Fdance/lists"}