0.0.1 • Public • Published


First, read the documentation at

You can install via:

npm install gmin

G.min.js is bundled with Gramex 0.x. Add these lines to the end of your code:

<script src="{{ static_url('/js/jquery2.min.js') }}">
<script src="{{ static_url('/js/G.min.js') }}">

NOTE: jQuery 2.0 or above is required to work with SVG elements.


Visit to run unit tests. Or...

  • Install nodejs. Note: On Cygwin, re-save the npm .sh files with UNIX line-endings
  • npm install -g uglify-js mocha
  • Clone this repo and go to the test folder
  • Run a web server, e.g. python -mSimpleHTTPServer
  • Visit

Selenium tests

The test/ui folder has UI test cases. To run them, go to the test folder and run:

python -mSimpleHTTPServer

Then open ui/index.html in Selenium IDE > File > Open Test Suite.


  1. Click to filter
    • TODO: Handle URL filtering for multiple values of the same key.
  2. Hover to highlight
  3. Search as you type
    • TODO: debounce to be implemented
    • TODO: search refresh event to be exposed
  4. Click to reveal
  5. Pan & Zoom
    • TODO: smooth viewbox animation
    • TODO: pinch to zoom on touch devices
    • TODO: slide to pan on touch devices
    • TODO: mousewheel to increase / decrease level of zoom on desktops
    • TODO: hover to pan or drag to pan on desktops
    • TODO: click on control to toggle zoom behaviour
  6. ZoomTo: Smoothly zoom to an element
  7. Brush to filter. (This is a 2D slider. With custom draggable handles, one can mimic horizontal sliders, vertical sliders AND rectangle selections. This will interact in exactly the same way that a rectangle in PowerPoint interacts.)
  8. Drag to re-position / re-size / rotate. Move / resize an element anywhere on the page, apply an arbitrary transformation, AND STORE IT
  9. Formula-based refresh of content / attributes, like AngularJS / MoneyFlicks


  1. Preserve aspect ratio on resize
  2. Equal height columns


  1. Slider.
  2. Timeline
  3. Loading indicator
  4. Dropdown
    • TODO: Search as you type
    • TODO: Multiselect
    • TODO: Hierarchy
    • TODO: Select all (clear all), Show selected (show all)
  5. Gradient picker
  6. Color picker

Common TODO

  • If there is a clash, e.g. multiple highlights acting on the same element, how to resolve it?
  • How should highlights be used as persistent filters across operations?
  • Implement namespaces so that interactions can be toggled independently
  • Events thrown by all of these


To publish this on npm, run:

git push --follow-tags
npm publish               # as sanand0




Package Sidebar


npm i gramex-ui

Weekly Downloads






Last publish


  • sanand0