{"id":13482021,"url":"https://github.com/romsson/dragit","last_synced_at":"2025-10-22T09:57:04.340Z","repository":{"id":17664636,"uuid":"20469286","full_name":"romsson/dragit","owner":"romsson","description":"A toolkit to enable the manipulation of data graphics","archived":false,"fork":false,"pushed_at":"2016-05-17T13:54:28.000Z","size":1622,"stargazers_count":187,"open_issues_count":9,"forks_count":82,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-10-17T21:17:40.260Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://romsson.github.io/dragit/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/romsson.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":"2014-06-04T03:45:58.000Z","updated_at":"2024-10-13T21:01:57.000Z","dependencies_parsed_at":"2022-09-11T05:04:25.796Z","dependency_job_id":null,"html_url":"https://github.com/romsson/dragit","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/romsson%2Fdragit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romsson%2Fdragit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romsson%2Fdragit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romsson%2Fdragit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/romsson","download_url":"https://codeload.github.com/romsson/dragit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222252066,"owners_count":16955960,"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-07-31T17:00:58.290Z","updated_at":"2025-10-22T09:56:59.306Z","avatar_url":"https://github.com/romsson.png","language":"HTML","funding_links":[],"categories":["Miscellaneous"],"sub_categories":[],"readme":"dragit.js\n==========\n\n**dragit** is an extension to the **[D3.js](http://d3js.org/)** library to enable the [direct manipulation](https://en.wikipedia.org/wiki/Direct_manipulation_interface) of SVG data visualization. It is designed to be seamlessly included in an existing **D3** visualization. It is also designed to be highly customizable and extensible.\n\n### Publication\n\nRomain Vuillemot, Charles Perin. **Investigating the Direct Manipulation of Ranking Tables.** Proceedings of the 2015 Annual Conference on Human Factors in Computing Systems (CHI 2015), Apr 2015, Seoul, Korea. ACM.\n\n* [Companion demo](http://romain.vuillemot.net/projects/direct-rankings/) for the paper\n\n### Examples\n\n* Single point drag ([demo](http://romsson.github.io/dragit/example/test_single_point.html) | [source](https://github.com/romsson/dragit/blob/master/example/test_single_point.html))\n* Multiple points drag ([demo](http://romsson.github.io/dragit/example/test_multi_points.html) | [source](https://github.com/romsson/dragit/blob/master/example/test_multi_points.html))\n* Line chart ([demo](http://romsson.github.io/dragit/example/test_linechart.html) | [source](https://github.com/romsson/dragit/blob/master/example/test_linechart.html))\n* Spiral shape ([demo](http://romsson.github.io/dragit/example/test_spiral.html) | [source](https://github.com/romsson/dragit/blob/master/example/test_spiral.html))\n* Radial tree ([demo](http://romsson.github.io/dragit/example/test_radial_tree.html) | [source](https://github.com/romsson/dragit/blob/master/example/test_radial_tree.html))\n* Pan and zoom ([demo](http://romsson.github.io/dragit/example/test_pan_zoom.html) | [source](https://github.com/romsson/dragit/blob/master/example/test_pan_zoom.html))\n\nMore advanced ones:\n\n* Interactive soccer bracket ([demo](http://romain.vuillemot.net/projects/worldcup14/))\n* A Re-Recreation of Gapminder's Wealth of Nations ([demo](http://romsson.github.io/dragit/example/nations.html) | [source](https://github.com/romsson/dragit/blob/master/example/nations.html))\n\n#### Coming soon\n\n* Ranking tables\n* Standard charts: [Bar chart](http://romsson.github.io/dragit/example/test_barchart.html), pie chart, ..\n* Node link diagrams\n* Geo maps navigation\n\n### Getting Started\n\n#### Code Organization\n\nOne of the library design goal to be included quasi-seamlessly in a current data visualization, i.e. without much change. To use it, insert the following snippets in the header of your code, right after **D3**:\n\n```html\n\u003cscript src=\"http://d3js.org/d3.v3.min.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003cscript src=\"dragit.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\n\nYou are, however, very likely to structure the chart as follows to make sure **dragit** is informed on the existing temporal data and the current state of the visualization. Two functions (names don't matter) are to be created:\n\n* `init()` which is called only once during startup\n* `update()` which is called once time has changed\n\nThose two functions will make sure the library's internal state is always up to date, regardless how you update the data visualization (using regular slider or direct manipulation).\n\n\n#### Core Concepts\n\nHere are a few concepts that are important to grasp:\n\n* **Object (of Interest)**: the graphical marks (SVG node, div, ..) that can be dragged and will indirectly update the visualization.\n* **Focus**: the visual element that is being dragged (can be a simplified simplified such as into a point or shadow).\n* **Trajectory**: the visual path along which the **Object of Interest** can be dragged. It is represented as a line.\n* **Data points**: series of points the focus can reach on the trajectory.\n\nHere are the names using for the various objects:\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"img/points-trajectories-naming.png\" width=600/\u003e\n\u003c/p\u003e\n\n### dragit.data\n\n* `dragit.data`: is a time-cube defined where each row are data points and columns time steps.\n\nYou may want to generate a random time cube (of `nb_data_points` x `nb_time_steps`). The `x` and `y` values should reflect the exact position of the data poin on screen. Example as below:\n\n```\nvar timecube = d3.range(nb_data_points).map(function(d, i) {\n\treturn d3.range(nb_time_steps).map(function(e, j) { \n\t\treturn {x: i, y: Math.random(), t: j};\n\t});\n})\n```\n\nExample (rows are data, columns are time steps):\n\n```\n[ d0 [ t0 ] [ t1 ] ... [ tm ] ]\n[ d1 [ t0 ] [ t1 ] ... [ tm ] ]\n...\n[ dn [ t0 ] [ t1 ] ... [ tm ] ]\n```\n\nWhere d\u003csub\u003ei\u003c/sub\u003e are dimensions, as t\u003csub\u003ei\u003c/sub\u003e are time points.\n\nSome other Ways to generate a dataset that can be dragged:\n\n* Sampling a SVG shapes (see the spiral example)\n* Browsing paths of a tree data structure (see the radial tree example or the World Cup Brackets example)\n* Image / Video segmentation\n* Or more generally, use any other combinatorial space.\n\n### dragit.vars\n\nA series of private variables for internal use. Can be set using publication functions, such as:\n\n* `dragit.init(container)`  :  set the DOM element containing all the trajectories (can be shared with the visualization)   \n\n### dragit.time\n\n* `dragit.time.current` \t: \tthe current time (default: 0)\n* `dragit.time.min`\t\t    : \tthe minimal time point (default: 0)\n* `dragit.time.max`\t\t    : \tthe maximal time point (default: 0)\n* `dragit.time.step`\t  \t: \tincrement (default: 1)\n* `dragit.time.speed`\t\t  : \tfor the playback (default)\n\nExample:\n\n```\ndragit.time = {min: d3.min(data, function(d) { return parseInt(d[i]);}), \n\t\t\t\t\t\t\t  max: d3.max(data, function(d) { return parseInt(d[i]);}), \n\t\t\t\t\t\t\t  step: 1, \n\t\t\t\t\t\t\t  current: 0\n\t\t\t\t\t\t\t}\n```\n\n### dragit.object\n\nThe object of interest, or the handle the user interacts with to start the interaction and thus start the time change.\n\n* `dragit.object.activate` activates dragging for the selected element. It creates the necessary mouse events (drag). Example: `.call(dragit.object.activate)`.\n\n\n#### dragit.object.dragging\n\n* `absolute (default)` does not translate the current chart \n* `relative` does translate the current chart to keep it centered around the current focus point\n\n\n### dragit.mouse\n\n\n#### dragit.mouse.dragging\n\nBelow are the different `drag-type` strategies:\n\n* `horizontal` or `vertical`\n* `flow` flow dragging method. Usually well suited for background * motion.\n* `free` dragging with no constraints on the activated element, returns to its original position\n* `curvilinear` (not implemented)\n\n\n#### dragit.mouse.scope\n\n* `focus`\t\t    restricts closest point finding to the current trajectory, thus only change time.\n* `selected`\t\texpands the scope to all currently displayed trajectories, thus may change time and the current focus.\n\n### dragit.focus\n\n* Functions related to the focus that is being dragged\n\n### dragit.trajectory\n\nHandles trajectories drawing.\n\n* `dragit.trajectory.display(class)`                   : displays the currently dragged element's trajectory\n* `dragit.trajectory.displayUpdate`                    : update the trajectory\n* `dragit.trajectory.displayAll(class)`                : displays all trajectories\n* `dragit.trajectory.toggle(class)`                    : toggle the display of current trajectory\n* `dragit.trajectory.toggleAll(class)`                 : toggle the display of all trajectories\n* `dragit.trajectory.remove(class)`                    : removes the created trajectory\n* `dragit.trajectory.removeAll(class)`                 : removes all trajectories\n\n### dragit.evt\n\nEvents management mechanism to register and trigger functions.\n\n* `dragit.evt.register(event, function, context)`      : register a function for a given `event` or an array of multiple `event` \n* `dragit.evt.call(event)`                             : trigger registered functions\n\n### dragit.statemachine\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"img/diagram-state-machine.png\" width=600/\u003e\n\u003c/p\u003e\n\n* `dragit.statemachine.current_state`                  : the current state of the interaction (e.g mouseenter, dragstart)\n* `dragit.statemachine.current_id`                     : the id of the currently manipulated element\n* `dragit.statemachine.setState(event)`                : sets the current state of the state machine\n* `dragit.statemachine.getState()`                     : gets the current state of the state machine\n\n\n### dragit.custom\n\nDefine the type of design for the focus point `vars.custom_focus` (default) and trajectories `vars.custom_trajectory` (default).\n\n* `dragit.custom.line`\n* `dragit.custom.point`\n\n\n### dragit.constraint\n\nFor each object, this allows to set some expected positions when multiple are available. This can be used in multiple scenarios: \n\n* To filter out a space and only make visible a specific trajectory\n* When multiple permutations are possible and we need to decide whiche one\n\n* `dragit.constraint` : array of constraints\n\n### dragit.utils\n\nA collection of useful functions for path calculation and animation.\n\n* `dragit.utils.animateTrajectory(path, star_time, duration)`  : animates the path from start_time and with a given duration\n* `dragit.utils.closestPoint`\n* `dragit.utils.closestValue`\n* `dragit.utils.findYgivenX `\n* `dragit.utils.translateAlong(path, duration)`\n* `dragit.utils.slider(el, play_button)`  : automatically creates a slider to browse all the time points\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromsson%2Fdragit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fromsson%2Fdragit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromsson%2Fdragit/lists"}