VisualSedimentation
Visual sedimentation is a novel design metaphor that progressively generates and updates visualizations of streaming data, inspired by the process of physical sedimentation. This process is the result of objects falling due to gravity forces, that aggregate into compact layers over time. The process is well understood since our environment is shaped by sedimentation: mountains, hills or rivers are the visible result of this long process.
Install / Use
/learn @INRIA/VisualSedimentationREADME
VisualSedimentation
Visual sedimentation is a javascript visualizations library for streaming data, inspired by the process of physical sedimentation. This process is the result of objects falling due to gravity forces, that aggregate into compact layers over time. The process is well understood since our environment is shaped by sedimentation: mountains, hills or rivers are the visible result of this long process.
Ressources
Browser Support
Visual Sedimentation is under developement process, actually we are not focus on a production version. The library work on last version of chrome and firefox.
Installing
Download the latest version here:
Or, from the command line:
git clone git://github.com/INRIA/VisualSedimentation.git
When developing locally, note that your browser may enforce strict permissions for reading files out of the local file system. For example, you can run Python's built-in server:
python -m SimpleHTTPServer 8888 &
Once this is running, go to http://localhost:8888/.
To cite the project
@article{huron:hal-00846260,
url = {http://hal.inria.fr/hal-00846260},
title = {{Visual Sedimentation}},
author = {Huron, Samuel and Vuillemot, Romain and Fekete, Jean-Daniel},
booktitle = {{IEEE Transactions on Visualization and Computer Graphics}},
publisher = {IEEE},
pages = {2446-2455},
journal = {IEEE Transactions on Visualization and Computer Graphics},
volume = {19},
number = {12 },
doi = {10.1109/TVCG.2013.227 },
year = {2013},
month = Dec,
}
Dependancy
Already included :
- jquery.js http://jquery.com/ Copyright 2010, John Resig Released under Dual licensed under the MIT or GPL Version 2 licenses.
- d3.js http://d3js.org/ Copyright 2012, Michael Bostock Released under BSD licenses.
- Box2DWeb http://www.gphysics.com Copyright 2006, Erin Catto Released under zlib License.
- Sizzle.js http://sizzlejs.com/ Copyright 2010, The Dojo Foundation
Licences
Visual Sedimentation is under CeCILL-B licence. "B" means BSD. Copyright 2013, by Samuel Huron & Romain Vuillemot :
- Licence text in french: http://www.cecill.info/licences/Licence_CeCILL-B_V1-fr.txt
- Licence text in english: http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt
Forging
Visual sedimentation was forging inside :
- INRIA AVIZ team http://aviz.fr/
- IRI Centre Pompidou team http://www.iri.centrepompidou.fr/
Related Skills
diffs
341.8kUse the diffs tool to produce real, shareable diffs (viewer URL, file artifact, or both) instead of manual edit summaries.
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
1.9kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
ui-ux-designer
Use this agent when you need to design, implement, or improve user interface components and user experience flows. Examples include: creating new pages or components, improving existing UI layouts, implementing responsive designs, optimizing user interactions, building forms or dashboards, analyzing existing UI through browser snapshots, or when you need to ensure UI components follow design system standards and shadcn/ui best practices.\n\n<example>\nContext: User needs to create a new dashboard page for team management.\nuser: "I need to create a team management dashboard where users can view team members, invite new members, and manage roles"\nassistant: "I'll use the ui-ux-designer agent to design and implement this dashboard with proper UX considerations, using shadcn/ui components and our design system tokens."\n</example>\n\n<example>\nContext: User wants to improve the user experience of an existing form.\nuser: "The signup form feels clunky and users are dropping off. Can you improve it?"\nassistant: "Let me use the ui-ux-designer agent to analyze the current form UX and implement improvements using our design system and shadcn/ui components."\n</example>\n\n<example>\nContext: User wants to evaluate and improve existing UI.\nuser: "Can you take a look at our pricing page and see how we can make it more appealing and user-friendly?"\nassistant: "I'll use the ui-ux-designer agent to take a snapshot of the current pricing page, analyze the UX against Notion-inspired design principles, and implement improvements using our design tokens."\n</example>
