<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/rss-style.xsl" type="text/xsl"?>
<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>Visualising Conversation Threads In Hyperbolic Space &#8211; Terence Eden’s Blog</title>
	<atom:link href="https://shkspr.mobi/blog/2012/09/visualising-conversation-threads-in-hyperbolic-space/feed/" rel="self" type="application/rss+xml" />
	<link>https://shkspr.mobi/blog</link>
	<description>Regular nonsense about tech and its effects 🙃</description>
	<lastBuildDate>Tue, 02 Sep 2025 09:00:23 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://shkspr.mobi/blog/wp-content/uploads/2023/07/cropped-avatar-32x32.jpeg</url>
	<title>Visualising Conversation Threads In Hyperbolic Space &#8211; Terence Eden’s Blog</title>
	<link>https://shkspr.mobi/blog</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title><![CDATA[Visualising Conversation Threads In Hyperbolic Space]]></title>
		<link>https://shkspr.mobi/blog/2012/09/visualising-conversation-threads-in-hyperbolic-space/</link>
					<comments>https://shkspr.mobi/blog/2012/09/visualising-conversation-threads-in-hyperbolic-space/#respond</comments>
				<dc:creator><![CDATA[@edent]]></dc:creator>
		<pubDate>Sun, 02 Sep 2012 09:12:54 +0000</pubDate>
				<category><![CDATA[/etc/]]></category>
		<category><![CDATA[app.net]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[twitter]]></category>
		<guid isPermaLink="false">http://shkspr.mobi/blog/?p=6274</guid>

					<description><![CDATA[In 2009, Kosso and I petitioned Twitter to allow us to search for Tweets by their &#34;in reply to&#34; ID.  The idea was that developers could created a properly threaded view of conversations.  Of course, Twitter being ultra-responsive to developers, did absolutely nothing.  Skip three years into the future, and App.net is providing all the API goodness that Twitter doesn&#039;t.  This means that we can…]]></description>
										<content:encoded><![CDATA[<p>In 2009, <a href="http://code.google.com/p/twitter-api/issues/detail?id=1238">Kosso and I petitioned Twitter</a> to allow us to search for Tweets by their "in reply to" ID.</p>

<p>The idea was that developers could created a properly threaded view of conversations.</p>

<p>Of course, Twitter being ultra-responsive to developers, did <em>absolutely nothing</em>.</p>

<p>Skip three years into the future, and App.net is providing all the API goodness that Twitter doesn't.  This means that we can easily create new ways to view conversations.</p>

<p>So that is exactly what I've done.</p>

<p>You can <a href="https://web.archive.org/web/20121004005303/shkspr.mobi/hyper">play with HyperThread yourself at shkspr.mobi/hyper/</a>.</p>

<p>This is a <a href="http://en.wikipedia.org/wiki/Hyperbolic_tree">hypertree</a> visualisation of a simple conversation.  The centre node is the start of the conversation. Each reply goes off in its own thread.  Clicking on a node, re-centres the tree.
<img src="https://shkspr.mobi/blog/wp-content/uploads/2012/09/Simple-Conversation-Thread.png" alt="Simple Conversation Thread" title="Simple Conversation Thread" width="530" height="536" class="aligncenter size-full wp-image-6282"></p>

<p>As a conversation grows in complexity, the conversation fades out at the edges. Clicking down a conversation thread allows you to easily follow a thread.
<img src="https://shkspr.mobi/blog/wp-content/uploads/2012/09/Conversation-Thread.png" alt="Conversation Thread" title="Conversation Thread" width="530" height="536" class="aligncenter size-full wp-image-6281"></p>

<p>Of course, with extremely long and complex threads, the tree becomes more difficult to navigate. This is something I hope to fix in future versions.
<img src="https://shkspr.mobi/blog/wp-content/uploads/2012/09/Complex-Conversation-Thread.png" alt="Complex Conversation Thread" title="Complex Conversation Thread" width="530" height="536" class="aligncenter size-full wp-image-6280"></p>

<p>Here is a video explaining how it all works.</p>

<iframe title="Threading Conversations Using A Hypertree" width="620" height="349" src="https://www.youtube.com/embed/mZOqw3UxpLg?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>

<p>You can <a href="https://web.archive.org/web/20121004005303/shkspr.mobi/hyper">play with HyperThread yourself at </a><a href="https://shkspr.mobi/hyper/</a>.">https://shkspr.mobi/hyper/</a>.</p>

<p>The visualisation uses <a href="https://web.archive.org/web/20120906012229/http://thejit.org/">The JavaScript InfoVis Toolkit</a>.</p>

<p>The <a href="http://stackoverflow.com/questions/12219340/threaded-app-net-conversation-into-tree/">tree sorting algorithm is courtesy of the good folk at StackOverflow</a>.</p>

<p>A few points to make here:</p>

<ul>
    <li>This is a prototype. Some things may not work. Some essential functionality is missing.</li>
    <li>The layout algorithm is wonky. Sometimes the threaded layout looks really weird.</li>
    <li>The longer the conversation, the more complex and slower the visualisation.</li>
    <li>This only retrieves the first two hundred posts of any conversation.</li>
    <li>If posts have been deleted, the entire view may not work.</li>
    <li>Some threads just don't work.</li>
</ul>

<p>Inspired in part by <a href="https://web.archive.org/web/20200927052022/https://secure.flickr.com/photos/unkemptwomen/8080741422/in/photostream/">Lucy Pepper's Monkey.deck</a>
Lots more <a href="https://web.archive.org/web/20120908072005/http://adndev.net/?p=119">conversation about threading at adndev</a>.</p>
<img src="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/info/okgo.php?ID=6274&HTTP_REFERER=RSS" alt="" width="1" height="1" loading="eager">]]></content:encoded>
					
					<wfw:commentRss>https://shkspr.mobi/blog/2012/09/visualising-conversation-threads-in-hyperbolic-space/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
