clooney makes graphs with famo.us
Clooney builds graphs quickly, and handles updates in a generic way.
using layout logic from d3.js, it renders them with the famo.us layout engine.
here's the demo
it currently using the require.js-way, but i'll reduce this dependency soon.
named after george clooney.
Generic Data format
//a generic data format for all graphs
data= [{
value:30,
label:"Rivest",
color:"steelblue"
},
{
value:40,
label:"Shamir",
color:"darkred"
},
{
value:60,
label:"Adleman",
color:"lightsalmon"
}]Generic Graph APi
//compute the graph
graph = new Clooney({
data: data,
width: 400,
height: 400,
type: "horizontal_bar"
})
//put the graph (a container surface) in your app..
view = graph.build()
mainContext.add(view)
//then to update it..
g.update({
align:"middle",
type:"vertical_bar"
})
//they automatically animate with a 'wall' physics transition
//the to hide it..
g.hide()all options
options= {
data:[] //objects with a number as 'value'. change any value and it updates intellegently
width:400//graph container width (and x-axis scale size)
height:400//graph container height (and y-axis scale size)
align:"start|middle|end" //start=left for horizontal charts, start=bottom for vertical charts
type:"horizontal_bar|vertical_bar|area_bar|treemap" //the type of chart
hidden: true|false //lets you control when it opens/closes
}Utility methods
they just wrap around 'g.update()', if you wanna use them
g= new Clooney()
//show/hide the data
g.hide()
g.show()
//container size
g.resize({width:500})
g.resize({height:0})
//options.align
g.align('start')
g.align('middle')
g.align('end')
//ordering
g.sort()
g.sort(my_sort_method)
g.sort('desc')
g.randomize()//re-arrange randomly
//sugar
g.wave()//wiggle each value in a sequence
g.randomize()//change order at random
g.random_walk()//mindlessly guide things out of orderDirect manipulation
if you're a badass, you can manipulate the divs manually, through the graph object aswell.
g.bars[1].focus()
g.bars[1].height=800
g.bars[1].draw()