1 / 12

BPS Prototype

BPS Prototype. August 10, 2009. User Requirements. See a graph visualization for a selected input file Modify the visualization layout to explore the graph Browse through the individual nodes/edges properties Update the properties of a given edge/node

finn-ayala
Download Presentation

BPS Prototype

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. BPS Prototype August 10, 2009

  2. User Requirements • See a graph visualization for a selected input file • Modify the visualization layout to explore the graph • Browse through the individual nodes/edges properties • Update the properties of a given edge/node • Apply filters to the resulting output graph See User Stories at: http://code.google.com/p/berkeley-prosopography-services/wiki/UserStories

  3. GraphML Input Format <node id="per.007" > <data key="gender">M</data> <data key="label">Sobkogno Tchetgen</data> </node> <node id="per.008" > <data key="gender">M</data> <data key="label">Joseph Njia</data> </node> <node id="per.009" > <data key="gender">F</data> <data key="label">Josepha Wounka</data> </node>

  4. Family Tree Structure Blue: Father Lineage Red: Mother Lineage LEGEND polygamous relationship remarried widow + marital relationship• offspring • • sibling relationship Principals

  5. Flex Code • Visualizer package contains the main Actionscript class • This class defines several methods: loadData(), layout(), addControls(), addDetails(), filter(), onFilter(), visualize() • MXML script defines the application components/controls • Prototype components include: HBOX, pullDownList, Form, Vis, Panel, Button, httpService • Control components include: HoverControl, ClickControl, SearchBox, Legend, TextSprite

  6. loadData() var ds:DataSource = new DataSource( "../../Tutorial/src/xml/Tchetgen_Tree.xml", "graphml"); var loader:URLLoader = ds.load(); loader.addEventListener(Event.COMPLETE, function(evt:Event):void { var ds:DataSet = loader.data as DataSet; visualize(Data.fromDataSet(ds)); }); This function loads the data from a specified URL (uniform resource locator). Next steps include: 1) passing URL as a parameter from the interface (to support multiple input files), 2) adding a progress bar to display the completed percentage.

  7. Visualize() vis = new Visualization(data); data.nodes.sortBy("data.label,"data.gender); vis.data.nodes.setProperties; vis.data.edges.setProperties; vis.operators.add(labeler); vis.operators.add(new NodeLinkTreeLayout("topToBottom",50,25,25)); vis.operators.add(new ShapeEncoder("data.gender")); vis.controls.add(new HoverControl); vis.update(); addDetail(); This function is called once the loadData() step is complete. Here, the nodes are sorted by alphabetical name, and visual properties for the nodes and edges are set (labels, shapes and event controls). Currently working on adding a data filter.

  8. Graph Layout Role ArrayCollection Root parentOf NodeLinkTree childOf siblingOf grandchildOf relativeOf Sub-Root

  9. Graph Layout Circle Sub-Root Root Same idea, except laid out around a circle instead of a tree

  10. Graph Layout RadialTree Q: How should this type of layout represent roles and relationships?

  11. Application Interface <Application> <HBOX> <Layout> Edges | Nodes Radial NodeLinkTree Circle 1 2 3 4 5 6 7 <Panel> <Vis> <Form> <Filter> Male Name: Mo Ngonga Gender: Female Titles: Daughter, Sister (4) Document: Tchetgen_Tree.xml Image: Not Available Female ALL <Button> <PullDownList> Update Display Select Input File…

  12. Problems • Work locally (machine getting old; breaking down) • Need web server for development/testing • Unable to import additional flare packages (widgets.ProgressBar, widgets.SearchBox)

More Related