Git Product home page Git Product logo

clipcart.js's Introduction

Why

There is a common pattern when you explore data visualization with many different data objects - it's hard to remember details about what you've found. After some combination of filters/searches/interactions how could you save interesting "data points", or interesting records from results what you've obtained? You have to do some kind of notes and that's annoing.

Clipcart.js is a very simple class (without additional dependences) which you could add to your d3-based dataviz. The name is a mix of clipboard and e-commerce cart, for obvious reasons: when you click on some interesting elements of visualization, they are saved in clipcart object and could be exported later.

Simplest way to use

  1. Add clipcart.js and clipcart.css somewhere in your html
  2. You just need to provide CSS class name for elements you want to save in Clipcart during your exploration.
var clp = new Clipcart('#clipboard');  // create Clipcart, add div with an id of "clipboard" to a page
...
// somewhere in your code ...
// after creating from your data ( with d3.js) set of elements (with a CSS class "poi", for example)
clp.add_nodes(".poi"); // now data embedded in these elements of interest 
                       // will be added to  Clipcart object if you click(this is default) on such element
                       // ... you could add your own code for other events, of course

Now if you are working with a datavis (and hopefully collecting some interesting points), you could download them in CSV file by clicking on #clipboard div on your page (by default it looks like a gray circle with number of collected points inside)

Live usage example - in this case, data point of interest is an oil/gas deposit with all details. You could click it on map to add info to clipcart (click on rectangle, click on some areas on map, look at a gray circle at upper left, then click on that circle to download saved data for oil/gas areas in CSV format)

Features

  • download results as CSV file
  • you could select which fileds from data objects should be saved
  • if you click twice on a same data point, it will be saved only one time
  • Non-flat, multi-hierarhy data structures will be flatted out to one-level object before they added to clipcart

More detailed API

At this moment, just look at arguments for Clipcart constructor in clipcart.js ...

clipcart.js's People

Contributors

devrand avatar

Watchers

 avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.