数据可视化工具Prefuse学习（一）

     在信息化的社会，人们每天涉猎大量信息，如何高效的处理信息挑战着人们的大脑。可视化技术能够从海量信息中提取数据，并将信息以交互式方式展现在人们面前，能够有效减轻人们对信息的处理过程。可视化技术用途广泛，涉及到的领域包括网络、交通实施（如地铁地图）等方面。下面介绍一种可视化工具Prefuse及其简单应用。

1. Prefuse简介

      Prefuse是一个可扩展的软件框架，用于帮助软件开发人员创建交互式的信息可视化应用。Prefuse可以用来开发单独的应用，应用中的可视化构件和Web applets。Prefuse具有下列特征：

• Prefuse具有支持任意数据属性、数据索引、选择查询的Table、Graph和Tree类型数据结构，并且具有高效的内存利用率。
• 具有布局、颜色、大小、形状编码、失真技术、动画等构件。
• 用于普通交互、直接操纵的交互控制库。
• 支持平移和缩放的视图转换技术，包括几何和语义缩放。
• 数据交互式过滤的动态查询技术。
• 运用许多现有的搜索引擎的集成文本查找技术。
• 用于动态布局和动画的物理仿真引擎。
• 多视图灵活性，包括“预览+详细”和“多小图”显示。
• 具有内置的如SQL的表达式语言，用于向prefuse数据结构写查询和创建导出数据域。
  
• 支持向SQL数据库请求查询和映射查询结果到prefuse数据结构。

   2. Prefuse信息可视化参考模型

•  Source Data: 用于可视化的数据的集合，数据可以是图形的表、社会化网络图、文件目录结构或者任何其它数据集。
•  Data Tables:  用源数据构造数据表（Prefuse中数据的内部表示），可能涉及数据转换。
•  Visual Abstraction: 构造后的数据表根据可视化映射建立可视化抽象，可视化抽象是一个包括可视化特征（如空间布局、颜色、大小和形状）的数据模   型。
•  Interactive Views: 可视化抽象中数据的实际渲染通过视图转换完成，渲染构件将可视化抽象中的内容画到许多交互视图中。通过支持平移和缩放操作，这些视图能够向数据提供各种各样的视角。通过鼠标和键盘操作，用户能够与可视化之间交互。

   3. 如何使用Prefuse构建应用

•  Step 1. 加载需要可视化的数据到Prefuse数据结构中，或者从文件中读取数据，从数据库中加载数据，或者通过一个定制的数据源。
•  Step 2. 创建一个Visualization将加载的数据映射到visual abstraction。Tables,Graphs和Trees被加到Visualization，并且给予他们唯一的数据组名用于之后引用。
•  Step 3. 创建一个RendererFactory并向Visualization注册，该工厂负责将Renderers赋给可视化项目。
•  Step 4. 构造一系列visual abstracton上的数据处理动作，这些动作可以是任何事情，常用的包括设置可视化项目的位置、颜色、大小和形状。动作实例可以组成ActionLists的形式用于执行各种处理任务，能够直接触发的动作被加入Visualization，并且赋予一个唯一的名字用于引用。
•  Step 5. 初始化一个或者多个交互式Displays用于查看和管理可视化项目，通过向Displays添加Controls可以描述交互行为，查找和过滤数据项目可以通过添加dynamic query bindings实现。

   4. 构建一个简单的社会网络可视化

 

  1 import javax.swing.JFrame;
  2 import prefuse.Constants;
  3 import prefuse.Display;
  4 import prefuse.Visualization;
  5 import prefuse.action.ActionList;
  6 import prefuse.action.RepaintAction;
  7 import prefuse.action.assignment.ColorAction;
  8 import prefuse.action.assignment.DataColorAction;
  9 import prefuse.action.layout.graph.ForceDirectedLayout;
 10 import prefuse.activity.Activity;
 11 import prefuse.controls.DragControl;
 12 import prefuse.controls.PanControl;
 13 import prefuse.controls.ZoomControl;
 14 import prefuse.data.Graph;
 15 import prefuse.data.io.DataIOException;
 16 import prefuse.data.io.GraphMLReader;
 17 import prefuse.render.DefaultRendererFactory;
 18 import prefuse.render.LabelRenderer;
 19 import prefuse.util.ColorLib;
 20 import prefuse.visual.VisualItem;
 21 
 22 public class Example {
 23 
 24     public static void main(String[] argv) {
 25         
 26         // -- 1. load the data ------------------------------------------------
 27         
 28         // load the socialnet.xml file. it is assumed that the file can be
 29         // found at the root of the java classpath
 30         Graph graph = null;
 31         try {
 32            // graph = new GraphMLReader().readGraph("/socialnet.xml");
 33             graph = new GraphMLReader().readGraph("C:/Documents and Settings/kimmy/桌面/Prefuse/data/socialnet.xml");
 34             
 35         } catch ( DataIOException e ) {
 36             e.printStackTrace();
 37             System.err.println("Error loading graph. Exiting...");
 38             System.exit(1);
 39         }
 40         
 41         
 42         // -- 2. the visualization --------------------------------------------
 43         
 44         // add the graph to the visualization as the data group "graph"
 45         // nodes and edges are accessible as "graph.nodes" and "graph.edges"
 46         Visualization vis = new Visualization();
 47         vis.add("graph", graph);
 48         vis.setInteractive("graph.edges", null, false);
 49         
 50         // -- 3. the renderers and renderer factory ---------------------------
 51         
 52         // draw the "name" label for NodeItems
 53         LabelRenderer r = new LabelRenderer("name");
 54         r.setRoundedCorner(8, 8); // round the corners
 55         
 56         // create a new default renderer factory
 57         // return our name label renderer as the default for all non-EdgeItems
 58         // includes straight line edges for EdgeItems by default
 59         vis.setRendererFactory(new DefaultRendererFactory(r));
 60         
 61         
 62         // -- 4. the processing actions ---------------------------------------
 63         
 64         // create our nominal color palette
 65         // pink for females, baby blue for males
 66         int[] palette = new int[] {
 67             ColorLib.rgb(255,180,180), ColorLib.rgb(190,190,255)
 68         };
 69         // map nominal data values to colors using our provided palette
 70         DataColorAction fill = new DataColorAction("graph.nodes", "gender",
 71                 Constants.NOMINAL, VisualItem.FILLCOLOR, palette);
 72         // use black for node text
 73         ColorAction text = new ColorAction("graph.nodes",
 74                 VisualItem.TEXTCOLOR, ColorLib.gray(0));
 75         // use light grey for edges
 76         ColorAction edges = new ColorAction("graph.edges",
 77                 VisualItem.STROKECOLOR, ColorLib.gray(200));
 78         
 79         // create an action list containing all color assignments
 80         ActionList color = new ActionList();
 81         color.add(fill);
 82         color.add(text);
 83         color.add(edges);
 84         
 85         // create an action list with an animated layout
 86         ActionList layout = new ActionList(Activity.INFINITY);
 87         layout.add(new ForceDirectedLayout("graph"));
 88         layout.add(new RepaintAction());
 89         
 90         // add the actions to the visualization
 91         vis.putAction("color", color);
 92         vis.putAction("layout", layout);
 93         
 94         
 95         // -- 5. the display and interactive controls -------------------------
 96         
 97         Display d = new Display(vis);
 98         d.setSize(720, 500); // set display size
 99         // drag individual items around
100         d.addControlListener(new DragControl());
101         // pan with left-click drag on background
102         d.addControlListener(new PanControl()); 
103         // zoom with right-click drag
104         d.addControlListener(new ZoomControl());
105         
106         // -- 6. launch the visualization -------------------------------------
107         
108         // create a new window to hold the visualization
109         JFrame frame = new JFrame("prefuse example");
110         // ensure application exits when window is closed
111         frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
112         frame.add(d);
113         frame.pack();           // layout components in window
114         frame.setVisible(true); // show the window
115         
116         // assign the colors
117         vis.run("color");
118         // start up the animated layout
119         vis.run("layout");
120     }
121     
122 }

 

   5. 生成结果

 

 References:

 [1] http://prefuse.org/doc/manual/