notes-visloom.txt

Thu Jun 13 14:58:45 PDT 2013

Visualise network flows

[x] force directed
    http://bl.ocks.org/mbostock/4062045

[x] upload to git

[ ] re-factor display states
    [ ] reload calls the display code, 
        [ ] readdata should exit to display code
        [ ] create a display controller
    [ ] use a switch statement
    [ ] drop into the current state on a JSON reload

[ ] reload the data every N seconds
    [ ] push updates remotely
    [ ] track the current display state
    [ ] call a redraw/index based on state
    [ ] enum variables ?

    [ ] dynamically scale the data based on the node count
        [ ] user confogurable max node count

[ ] Make it run on an IPHONE!!

[ ] event handlers on the circles
    [ ] NO HOVER!!! (touch screen friendly)
    'selection.on(type[, listener[, capture]])'
    [ ] what do we pop in the UI
        [ ] display hosts when we select a switch
        [ ] display a config node (as a BOX)

    [ ] detect select, deselect
    [ ] create an temp array of things to add/remove ?
        

[ ] search bar 
[ ] still need a table view

[ ] need a ui for datapaths
    [ ] the logical L2 connectivity
    [ ] the logical mesh that may not be HW dependent

[ ] find a game deisgner of they are interested
    [ ] move from games to industrial design

[x] summarise data when the node count gets too high
    [x] stop at 30-40
    [x] types, #of nodes
    [x] switch view, culls the nodes

[ ] need to visualise the distribution of the LOOM and OF controller
    systems as well 

[x] show flows between notes
    [ ] show the flow table

[ ] other rendering options

    [ ] https://github.com/anvaka/VivaGraphJS

    [ ] http://www.zephyrosanemos.com/windstorm/current/live-demo.html

    [ ] fisheye distortion
        http://bost.ocks.org/mike/fisheye/

    [ ] Flare ? if collapsable
        http://mbostock.github.io/d3/talk/20111018/tree.html
        http://bl.ocks.org/mbostock/4063570

    [ ] sankey for flows

    var sankey = d3.sankey()
        .size([width, height])
        .nodeWidth(15)
        .nodePadding(10)
        .nodes(energy.nodes)
        .links(energy.links)
        .layout(32);

    [ ] Chord diagram for flows ?
        http://bost.ocks.org/mike/uberdata/

[x] define a data structure

[x] show entities by type (www, ftp, etc)
    [x] label nodes
    [x] show nodes attached to a type object

[x] show entities by switch 
    [x] animate between this and the by-type view
    [x] show nodes attached to a switch
    [x] show interconnect betwen switches