<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Beauty of Code &#187; Visualization</title>
	<atom:link href="http://beauty-of-code.de/category/visualization/feed/" rel="self" type="application/rss+xml" />
	<link>http://beauty-of-code.de</link>
	<description>About code and visualisation</description>
	<lastBuildDate>Tue, 31 Aug 2010 09:13:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Reanimating Hypergraph</title>
		<link>http://beauty-of-code.de/2010/07/reanimating-hypergraph/</link>
		<comments>http://beauty-of-code.de/2010/07/reanimating-hypergraph/#comments</comments>
		<pubDate>Mon, 05 Jul 2010 09:48:24 +0000</pubDate>
		<dc:creator>Jens</dc:creator>
				<category><![CDATA[Hypergraph]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[Visualization]]></category>

		<guid isPermaLink="false">http://beauty-of-code.de/?p=160</guid>
		<description><![CDATA[After a break of several years, I decided to continue the Hypergraph project. For  those of you who don’t know Hypergraph: this is an open source Java  framework which provides ways to model hyperbolic geometry and  visualises graphs and trees using hyperbolic geometry. There has been  some research on hyperbolic trees [...]]]></description>
			<content:encoded><![CDATA[<p>After a break of several years, I decided to continue the <a href="http://hypergraph.sourceforge.net">Hypergraph </a>project. For  those of you who don’t know Hypergraph: this is an open source Java  framework which provides ways to model hyperbolic geometry and  visualises graphs and trees using hyperbolic geometry. There has been  some research on hyperbolic trees which shows that especially  hierarchical data can be view very well using hyperbolic trees.</p>
<p>Every few weeks I received a mail asking for the current status of  the project, whether it’s completely dead or whether certain  enhancements can be made. There were also various (legitimate)  complaints about the missing documentation of the project.</p>
<p>Hence I thought I should continue to work on the project at least if  time allows it. Here I would like to give an overview about the next  development steps and the reasons for this. I’m afraid, I can’t give a  time estimation as I’m not working on this project on a regular basis.</p>
<p>Well, the next steps will be:</p>
<ol>
<li>Finish the refactoring to      become independent of the UI (support  at least AWT/Sing and SWT)</li>
<li>Get rid of the graph data      structure and algorithms; replace it  by JgraphT</li>
<li>Tidy up the existing graph      layout algorithms</li>
<li>Tidy up the example      applications and add new examples</li>
<li>Enhance the Javadoc</li>
<li>Relaunch the website, including      a better documentation</li>
</ol>
<p>As you can see, I start with the parts which are more fun to me and  end up with the (usually boring, but necessary) documentation.</p>
<p><strong>Independence</strong><strong> of the UI framework</strong></p>
<p>The existing Hypergraph code consists of three parts: packages  related to the graph structure, a package for the hyperbolic geometry  and a package for the visualisation of the hyperbolic graphs and  hyperbolic trees in a JPanel. At first sight, this sounds like a  reasonable architecture, but if you look at the code in detail, you will  find that this is not the case, here some examples:</p>
<ul>
<li>The colour attribute for edges and vertices are stored using  java.awt.Colour. If you use this graph in frameworks which don’t use  java.awt.Colour, this causes a problem.</li>
<li>The projector which is responsible for projecting the hyperbolic  plane to the screen coordinates depends on JComponent</li>
<li>The animator which is responsible for smoothly translating the  hyperbolic plane uses javax.swing.Timer.</li>
</ul>
<p>If the code shall be used by different UI frameworks, these  dependencies have to be resolved, which is the first aim. Large parts  are already done and committed to the SWT branch, but there is still  something to do.</p>
<p><strong>Replacement of the Graph API by JGraphT</strong></p>
<p>When I started in 2002/2003, I decided to write my own graph API. By  now, there are some established projects written in Java which offer the  functionality I need and I decided to use <a href="http://jgrapht.org">JGraphT</a>.</p>
<p>The advantage is that I don’t need to worry about the (correct)  implementation of any algorithms or data structure &#8211; there is no need to  reinvent the wheel.</p>
<p>There are disadvantes though: I have to rewrite any code that depend  on the existing graph data structure, which is quite a lot by the nature  of the project. Also there doesn’t seem to be any reader for GraphML or  GraphXML files, so need to implement them.</p>
<p><strong>Tidying up the layout algorithms</strong></p>
<p>The most striking issue with the hyperbolic layout algorithms is the  poor quality of the code. I have to confess that I can’t read the code  at all…</p>
<p>But there are some other deficiencies: the layout algorithms are  graph layout algorithms. Well, that sounds tautologic, but for example  the force directed layout is actually a generic multi dimensional  scaling algorithm which could also be applied to other data than graphs.  It will be interesting to see whether hyperbolic geometry can also be  used for other visualisation besides hyperbolic trees and graphs.</p>
<p>This will happen more or less at the same time as the introduction of  JGraphT as this is related.</p>
<p><strong>Tidying up the example applications</strong></p>
<p>Similar to the layout algorithms, the code quality of the  applications is quite poor – the programs are a mixture of examples and  proof of concept. Even the main applet to show hyperbolic trees should  be tidied up.</p>
<p>I haven’t thought yet about which examples and which actual  applications I should include in the distribution. If you have any  proposals or if you would like to have an example for a specific concept  in Hypergraph, please add a comment.</p>
<p><strong>Enhancement of  the Javadoc and relaunching the website</strong></p>
<p>The need to enhance the Javadoc should be obvious to anybody who has  worked with the code. The same applies to the website: it’s not complete  at all.</p>
<p>Currently, it’s difficult or at least not comfortable to add new  content to the website due to the way the html files are generated and  deployed.</p>
<p>As I have also spent some time working with CouchDB, I might decide  to use CouchDB as a storage and web server and create some mixture of  blog and wiki for the new website.</p>
<p><strong>Conclusion</strong></p>
<p>As you can see, there is a lot to do and I hope to provide a new  release soon which covers at least the first two issues. I will also try  to write about how the issues are resolved, i.e. describe the new  architecture of Hypergraph.</p>
<p>As a last remark, let me mention that I’m not very glad about the  project’s name Hypergraph. When I created the project, I thought this is  a nice combination of hyperbolic geometry and graphs. However, I  completely ignored that hypergraph is actually a fixed notion in graph  theory which can lead to confusion. I wonder whether there is some other  name which hints at the main focus of the project: data visualisation  using hyperbolic geometry. If you have any ideas, please add a comment.</p>
]]></content:encoded>
			<wfw:commentRss>http://beauty-of-code.de/2010/07/reanimating-hypergraph/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Cumulus plugin for Wordpress</title>
		<link>http://beauty-of-code.de/2009/06/cumulus-plugin-for-wordpress/</link>
		<comments>http://beauty-of-code.de/2009/06/cumulus-plugin-for-wordpress/#comments</comments>
		<pubDate>Wed, 17 Jun 2009 22:19:56 +0000</pubDate>
		<dc:creator>Jens</dc:creator>
				<category><![CDATA[Visualization]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://beauty-of-code.de/?p=102</guid>
		<description><![CDATA[In the context of my Hypergraph project, I have been asked whether Hypergraph can be used to show the tags of Wordpress blogs.
To be honest, I don&#8217;t think that this would be a good idea. On this page I use the Cumulus plugin by Roy Tanck. This plugin does a good job in visualizing the [...]]]></description>
			<content:encoded><![CDATA[<p>In the context of my <a href="http://hypergraph.sourceforge.net">Hypergraph</a> project, I have been <a href="http://sourceforge.net/tracker/?func=detail&amp;atid=543676&amp;aid=2803371&amp;group_id=75356">asked</a> whether Hypergraph can be used to show the tags of Wordpress blogs.</p>
<p>To be honest, I don&#8217;t think that this would be a good idea. On this page I use the <a href="http://wordpress.org/extend/plugins/wp-cumulus/">Cumulus plugin</a> by Roy Tanck. This plugin does a good job in visualizing the tags in your blog by distributing the tags on a 3D sphere. It&#8217;s easy to use, easy to understand &#8211; so if you are looking for some appealing visualisation of your tags, use this plugin and you&#8217;re done.</p>
<p>But why don&#8217;t I write a wordpress plugin for Hypergraph? First of all I currently don&#8217;t have the time <img src='http://beauty-of-code.de/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' /> . But apart of that, I don&#8217;t think it&#8217;s fit for purpose. Hypergraph, like other tools that show trees/graphs using hyperbolic geometry, is strong when there is some exponentially growing graph structure in the background. For example the organisational structure of a company or a class hierarchy are suitable.</p>
<p>However,  this is not the case for blogs: tags are used to loosely group blog entries which are somehow related, but even if we enforce a graph structure based on tags (which I don&#8217;t really propose), it won&#8217;t work. Of course one could link all entries with the same tag(s). Of course I haven&#8217;t conducted something like a field study to analyse a significant amount of blogs in the wild, but I assume that this will just create a lot of clutter, but won&#8217;t give additional meaning. Plugins like the mentioned Cumulus plugin circumvent this problem: they show the tags and not the articles, hence reducing the number of entities to show. They also don&#8217;t link the tags &#8211; even thought this would be some interesting challenge.</p>
<p>This leaves us with two open questions: Is it possible to cluster tags such that some similarity of tags can be established? If this can be done, would this give benefit to the visitor of a blog or another site?</p>
<p>Ideas and comments are of course most welcome.</p>
]]></content:encoded>
			<wfw:commentRss>http://beauty-of-code.de/2009/06/cumulus-plugin-for-wordpress/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Google Analytics API coming soon?</title>
		<link>http://beauty-of-code.de/2008/11/google-analytics-api-coming-soon/</link>
		<comments>http://beauty-of-code.de/2008/11/google-analytics-api-coming-soon/#comments</comments>
		<pubDate>Thu, 20 Nov 2008 23:47:26 +0000</pubDate>
		<dc:creator>Jens</dc:creator>
				<category><![CDATA[Visualization]]></category>
		<category><![CDATA[Google Analytics]]></category>

		<guid isPermaLink="false">http://beauty-of-code.de/?p=43</guid>
		<description><![CDATA[Google announced on their blog that a data export API is currently in private beta. Hopefully it will be public soon. This will boost a lot of new applications which will help to analyse the GA data.
To get an impression what can be done with an API, look at Nicolas Lierman&#8217;s pictures showing the traffic on his [...]]]></description>
			<content:encoded><![CDATA[<p>Google <a href="http://analytics.blogspot.com/2008/10/more-enterprise-class-features-added-to.html">announced</a> on their blog that a data export API is currently in private beta. Hopefully it will be public soon. This will boost a lot of new applications which will help to analyse the GA data.</p>
<p>To get an impression what can be done with an API, look at Nicolas Lierman&#8217;s <a href="http://www.aboutnico.be/wp-trackback.php?p=3">pictures</a> showing the traffic on his site. I can imagine that based on the new API, more and especially interactive visualisation like this will occur.</p>
]]></content:encoded>
			<wfw:commentRss>http://beauty-of-code.de/2008/11/google-analytics-api-coming-soon/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mapping of diseases</title>
		<link>http://beauty-of-code.de/2008/08/mapping-of-diseases/</link>
		<comments>http://beauty-of-code.de/2008/08/mapping-of-diseases/#comments</comments>
		<pubDate>Wed, 27 Aug 2008 21:34:39 +0000</pubDate>
		<dc:creator>Jens</dc:creator>
				<category><![CDATA[Visualization]]></category>

		<guid isPermaLink="false">http://www.beauty-of-code.de/?p=13</guid>
		<description><![CDATA[New York Times recently published an article about the work of Dr Butt from Stanford University. He and an increasing number of doctors are starting to group diseases not by their symptoms as in classical medicine, but by their genetic underpinnings.
While I can&#8217;t say much about the medical relevance, this work gives rise to an interesting [...]]]></description>
			<content:encoded><![CDATA[<p>New York Times recently published <a href="http://www.nytimes.com/2008/05/06/health/research/06dise.html">an article</a> about the work of Dr Butt from Stanford University. He and an increasing number of doctors are starting to group diseases not by their symptoms as in classical medicine, but by their genetic underpinnings.</p>
<p>While I can&#8217;t say much about the medical relevance, this work gives rise to an <a href="http://www.nytimes.com/interactive/2008/05/05/science/20080506_DISEASE.html">interesting visualisation</a>. Shown is a set of diseases which are related to each other by there genetic similarity. Each disease is represented by a circle with a size proportional to the number of genes involved.</p>
]]></content:encoded>
			<wfw:commentRss>http://beauty-of-code.de/2008/08/mapping-of-diseases/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Elastic vertical Simile Timeline</title>
		<link>http://beauty-of-code.de/2008/06/elastic-vertical-simile-timeline/</link>
		<comments>http://beauty-of-code.de/2008/06/elastic-vertical-simile-timeline/#comments</comments>
		<pubDate>Mon, 02 Jun 2008 20:47:33 +0000</pubDate>
		<dc:creator>Jens</dc:creator>
				<category><![CDATA[Visualization]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Timeline]]></category>

		<guid isPermaLink="false">http://www.beauty-of-code.de/?p=11</guid>
		<description><![CDATA[Today there was a post on the Simile mailing list on elastic timelines. In his post Joao Severino refers to a change in the timeline code by Liming Xu which is described in more detail on his blog.
The general idea is to identify overlapping events and then redefine the height of the timeline accordingly. Though [...]]]></description>
			<content:encoded><![CDATA[<p>Today there was a post on the Simile mailing list on elastic timelines. In his <a href="http://simile.mit.edu/mail/ReadMsg?listName=General&amp;msgId=25375">post</a> Joao Severino refers to a change in the timeline code by Liming Xu which is described in more detail on <a href="http://limingxu.com/blogs/xu_web_chronicle/archive/2006/07/10/59.aspx">his blog</a>.</p>
<p>The general idea is to identify overlapping events and then redefine the height of the timeline accordingly. Though I don&#8217;t think it&#8217;s very useful as it leads to very high timelines, I wonder to what extent this idea could be used to resolve a big issue with the vertical timeline which I use for the blog archive on this blog. If there are two events very close to each other in a vertical timeline, they will automatically overlap.</p>
<p>Potentially this could be resolved by combining hot zones (which currently need to be defined explicitly) with his idea of automatically adjusting the height of the timeline. The Timeline code would check whether two events overlap and add a hot zone for the area of the events.</p>
<p>Two problems would remain:</p>
<ol>
<li>Events which occur at the same time or so close that the hot zone would cover a very short time (minutes or so).<br />
This could be handled by a kind of summary event that basically says: here are two (or more events) at the same time, click for details. </li>
<li>Duration events.</li>
</ol>
<p>I don&#8217;t know yet how to get this resolved in detail, but I&#8217;ll try it sometime.</p>
]]></content:encoded>
			<wfw:commentRss>http://beauty-of-code.de/2008/06/elastic-vertical-simile-timeline/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ideas for analysing legacy code</title>
		<link>http://beauty-of-code.de/2008/05/ideas-for-analysing-legacy-code/</link>
		<comments>http://beauty-of-code.de/2008/05/ideas-for-analysing-legacy-code/#comments</comments>
		<pubDate>Sat, 31 May 2008 09:13:57 +0000</pubDate>
		<dc:creator>Jens</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Visualization]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.beauty-of-code.de/?p=10</guid>
		<description><![CDATA[Basildon Coder wrote about the P.G.Wodehouse method of Refactoring, which reminded me of a graphic I have seen at the Museum of Modern Art in &#8216;Design and the elastic mind&#8217;: Code Profiles by W. Bradford Paley. A demo how the graphic evolved can be seen on the site of the Whitney Museum.
The basic idea is [...]]]></description>
			<content:encoded><![CDATA[<p>Basildon Coder wrote about the <a href="http://basildoncoder.com/blog/2008/03/21/the-pg-wodehouse-method-of-refactoring/">P.G.Wodehouse method of Refactoring</a>, which reminded me of a graphic I have seen at the Museum of Modern Art in &#8216;Design and the elastic mind&#8217;: <a href="http://www.visualcomplexity.com/vc/project_details.cfm?id=223&amp;index=223&amp;domain=">Code Profiles</a> by W. Bradford Paley. A demo how the graphic evolved can be seen on the site of the <a href="http://artport.whitney.org/commissions/codedoc/Paley/CodeProfiles_800x600.htm">Whitney Museum</a>.</p>
<p>The basic idea is to have a program on one single page / in one single graphic, which shows the overall structure and density of the program part you are looking at. Bradford Pailey adds an overlay that shows the actual execution path on top of the code.</p>
<p>I wonder whether this idea, which is currently art rather than a programming tool,  can actually be implemented as part of an IDE plugin (I&#8217;m thinking of Eclipse as I&#8217;m working with Eclipse 99% of my time).</p>
<p>The code is of course already available in any IDE and profiling data could be obtained from the <a href="http://www.eclipse.org/tptp/">Eclipse Test and Performance Platform</a> or other profiling tools.</p>
<p>However, it&#8217;s not yet clear to me how the interaction between the different classes and packages can be covered. The graphic by Bradford Pailey shows a program that consists of one file only &#8211; at least that&#8217;s what it looks like.</p>
]]></content:encoded>
			<wfw:commentRss>http://beauty-of-code.de/2008/05/ideas-for-analysing-legacy-code/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Timeline script in IE and Firefox</title>
		<link>http://beauty-of-code.de/2008/05/timeline-script-in-ie-and-firefox/</link>
		<comments>http://beauty-of-code.de/2008/05/timeline-script-in-ie-and-firefox/#comments</comments>
		<pubDate>Fri, 30 May 2008 20:44:16 +0000</pubDate>
		<dc:creator>Jens</dc:creator>
				<category><![CDATA[Visualization]]></category>

		<guid isPermaLink="false">http://www.beauty-of-code.de/?p=9</guid>
		<description><![CDATA[I tested the simile timeline menu on the left in Safari, but since I haven&#8217;t spent much time on it yet, I forgot to test IE and Firefox &#8211; with embarrassing results, it didn&#8217;t work at all as I learned today.
It quickly turned out that the problem was in the following two lines:
...
&#60;script src="/wp-content/themes/boc/timeline-api.js" type="text/javascript"/&#62;
&#60;script type="text/javascript"&#62;
...
I was [...]]]></description>
			<content:encoded><![CDATA[<p>I tested the simile timeline menu on the left in Safari, but since I haven&#8217;t spent much time on it yet, I forgot to test IE and Firefox &#8211; with embarrassing results, it didn&#8217;t work at all as I learned today.</p>
<p>It quickly turned out that the problem was in the following two lines:</p>
<pre>...
&lt;script src="/wp-content/themes/boc/timeline-api.js" type="text/javascript"/&gt;
&lt;script type="text/javascript"&gt;
...</pre>
<p>I was naive enough to expect that any decent browser wouldn&#8217;t have any problems with the first line, but it turned out that IE and Firefox DID NOT process the &#8220;/&gt;&#8221; at the end of the first line. To be more precise, the javascript that followed the second line has not been processed at all, because the browsers were confused by the end of the first line.</p>
<p>When I changed it to </p>
<pre>...
&lt;script src="/wp-content/themes/boc/timeline-api.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
...</pre>
<p>everything worked fine. To be honest, I don&#8217;t understand why. If anyone can explain me the background of this behaviour &#8211; please leave a comment.</p>
<p>BTW: Safari worked as expected.</p>
]]></content:encoded>
			<wfw:commentRss>http://beauty-of-code.de/2008/05/timeline-script-in-ie-and-firefox/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Simile timeline</title>
		<link>http://beauty-of-code.de/2008/05/simile-timeline/</link>
		<comments>http://beauty-of-code.de/2008/05/simile-timeline/#comments</comments>
		<pubDate>Sun, 04 May 2008 20:32:39 +0000</pubDate>
		<dc:creator>Jens</dc:creator>
				<category><![CDATA[Visualization]]></category>

		<guid isPermaLink="false">http://www.beauty-of-code.de/?p=5</guid>
		<description><![CDATA[In 2006, some guys at the Simile project at MIT (especially D. F. Huynh)  introduced an AJAX tool called timeline, which visualizes timelines, i.e. events in their chronological order. When I started this blog, I thought about adding some timeline visualization for my blog entries, ideally in form of some wordpress plugin. Well, I probably [...]]]></description>
			<content:encoded><![CDATA[<p>In 2006, some guys at the Simile project at MIT (especially <a href="http://davidhuynh.net/">D. F. Huynh</a>)  introduced an AJAX tool called <a href="http://simile.mit.edu/timeline/">timeline</a>, which visualizes timelines, i.e. events in their chronological order. When I started this blog, I thought about adding some timeline visualization for my blog entries, ideally in form of some wordpress plugin. Well, I probably won&#8217;t write any timeline plugin for wordpress, as I found one today that uses the above mentioned tool: the <a href="http://www.freshlabs.de/journal/archives/2006/10/wordpress-plugin-simile-timeline/">wordpress simile plugin</a>.</p>
<p>I have downloaded it and this is the result, without any further editing:</p>
<div id="stl-timeline" class="stl-timeline"></div>
<p>I need to adjust it a bit in the next days, but shouldn&#8217;t be difficult to get it modified.</p>
<p>At the end of the day, I would like to embed the timeline into the design template for this blog, for example at the top, where the search is currently located.</p>
<p>I consider this kind of timeline as a very useful technology, as long as it can be used by as many people as possible. This means that using it in your own website must be very easy. The data retrieval is probably the big problem. To have a tool like this widely adopted, anyone must be able to extract data from a blog, from wikipedia, google, any of the big names in the internet etc.</p>
<p>I&#8217;ll investigate the possibilities in more detail during the next weeks.</p>
]]></content:encoded>
			<wfw:commentRss>http://beauty-of-code.de/2008/05/simile-timeline/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
