{"id":16222899,"url":"https://github.com/michael/unveil","last_synced_at":"2025-07-12T12:35:35.609Z","repository":{"id":967852,"uuid":"760908","full_name":"michael/unveil","owner":"michael","description":"A data-driven visualization toolkit","archived":false,"fork":false,"pushed_at":"2011-11-18T17:05:25.000Z","size":4541,"stargazers_count":236,"open_issues_count":4,"forks_count":14,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-27T08:20:58.026Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","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":"2010-07-07T00:55:33.000Z","updated_at":"2024-11-28T16:28:06.000Z","dependencies_parsed_at":"2022-08-16T11:40:17.312Z","dependency_job_id":null,"html_url":"https://github.com/michael/unveil","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/michael%2Funveil","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael%2Funveil/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael%2Funveil/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael%2Funveil/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michael","download_url":"https://codeload.github.com/michael/unveil/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814880,"owners_count":20352037,"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:44.912Z","updated_at":"2025-03-16T12:31:30.568Z","avatar_url":"https://github.com/michael.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Unveil.js\n================================================================================\n\nUnveil is a data exploration and visualization toolkit that utilizes data-driven\nsoftware design.\n\n[Documentation](http://docs.quasipartikel.at/#/unveil) is under construction but already available.\n\n\nFeatures:\n--------------------------------------------------------------------------------\n\n* Data Abstractions\n  * Collection (for simple collections of similar data items)\n  * DataGraph (for linked data)\n* Scene API\n  * SceneGraph implementation\n  * Declarative syntax\n  * Custom Actors (graphical objects)\n  * Dynamic Actor Properties (you can assign functions instead of values)\n  * Motion Tweening\n  * Commands (e.g. save cpu cycles using event-based framerate determination)\n  * Multiple Displays (the scene can be projected to one or more canvas elements)\n  * Adjustable drawing order through Graph Traversers\n    Choose from DepthFirst or BreadthFirst or implement your own Traverser\n  * Mouse interaction support on Display level (picking, zooming, paning)\n\n\nGetting started\n--------------------------------------------------------------------------------\n\nProbably the easiest way to get started with Unveil.js is to install the\n[Dejavis](http://github.com/michael/dejavis) sandbox, and let it generate an example \nvisualization, which you can use as a starting point.\n\n\nExamples\n--------------------------------------------------------------------------------\n\n* [Linechart](http://dejavis.org/linechart) (sandboxed)\n* [Scatterplot](http://dejavis.org/scatterplot) (sandboxed)\n* [Bullets](http://dejavis.org/bullets) (sandboxed)\n* [Stacks](http://dejavis.org/stacks) (sandboxed)\n* [Random Bars](http://quasipartikel.at/unveil/examples/random_bars.html)\n* [Linechart](http://quasipartikel.at/unveil/examples/linechart.html)\n* [Artist Similarities](http://quasipartikel.at/unveil/examples/artist_similarities.html)\n\n\nNew declarative Syntax\n--------------------------------------------------------------------------------\n\nI took some inspiration from Scene.js's [Scene Definition Format](http://www.google.com/url?sa=D\u0026q=http://scenejs.wikispaces.com/JSON%2BScene%2BDefinition\u0026usg=AFQjCNEk85cBgWeuJ9ZZO3XaXpOc2FgDVA)\nto give the whole thing an even more declarative feel.\n\nActors as well as the whole Scene can now be specified declaratively using a simple Specification Syntax.\n\n    var scene = new uv.Scene({\n      actors: [\n        {\n          id: 'moving_rect',\n          type: \"rect\",\n          x: 50,\n          y: 70,\n          width: 200,\n          height: 150,\n          actors: [\n            {\n              type: \"label\",\n              text: \"I'm moving\"\n            }\n          ]\n        },\n        {\n          id: 'animated_circle',\n          type: \"circle\",\n          x: 50,\n          y: 70,\n          radius: 50,\n          height: 150\n        }\n      ]\n    });\n    \nAfter you you've set up your Scene, you need to specify at least one display:\n\n    var display = scene.display({\n      container: 'canvas',\n      width: 500,\n      height: 320,\n      zooming: true,\n      paning: true\n    });\n    \nYou can attach actors to displays as well. Those objects are typically unaffected by\nview transformations, so they stick on their original display position. Display\nobjects are meant as an overlay to be drawn after the scene objects.\n\n    display.add({\n      {\n        type: 'label',\n        text: function() { return 'Frames per second: '+ this.scene.fps }\n        x: 300,\n        y: 20\n      }\n    });\n\n\nSince all actors have a unique id you can reference them programmatically and add special behavior (e.g. animation).\n\n    scene.get('moving_rect').bind('mouseover', function() {\n      this.animate('x', 100, 2000, 'bounceEaseInOut');\n      this.animate('y', 200, 2000);\n    });\n    \n    scene.get('moving_rect').bind('click', function() {\n      this.animate('rotation', Math.PI/2, 2000);\n    });\n    \n    scene.get('animated_circle').bind('click', function() {\n      this.animate('radius', 70, 2000);\n    });\n\n\nSupported Browsers\n--------------------------------------------------------------------------------\n\n* Google Chrome 5+\n* Safari 4+\n* Firefox 3.5+\n* Internet Explorer 9+\n* Opera 10+\n\n\nRoadmap\n--------------------------------------------------------------------------------\n\n**Unveil.js 0.1**\n\n* Display actors (actors that stick on on a display rather than on the scene)\n* Add an API to get the top most active actor in case there is more than one\n  object under the cursor.\n* API Docs\n\n\n**Unveil.js Stars**\n\nThere should be a dedicated place for commonly used custom actors (stars). I could imagine\nputting them in a Github repo, ready for reuse, contributions, etc. Eventually, an online index for \nfinding the right star for a certain job would also be nice.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichael%2Funveil","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichael%2Funveil","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichael%2Funveil/lists"}