<?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/"
	xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>OUseful.Info, the blog... &#187; Viewing OpenLearn Mindmaps Using d3.js</title>
	<atom:link href="http://blog.ouseful.info/2012/05/11/viewing-openlearn-mindmaps-using-d3-js/feed/?withoutcomments=1" rel="self" type="application/rss+xml" />
	<link>http://blog.ouseful.info</link>
	<description>Trying to find useful things to do with emerging technologies in open education</description>
	<lastBuildDate>Thu, 23 May 2013 09:43:20 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.com/</generator>
<cloud domain='blog.ouseful.info' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://s2.wp.com/i/buttonw-com.png</url>
		<title>OUseful.Info, the blog... &#187; Viewing OpenLearn Mindmaps Using d3.js</title>
		<link>http://blog.ouseful.info</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://blog.ouseful.info/osd.xml" title="OUseful.Info, the blog..." />
	<atom:link rel='hub' href='http://blog.ouseful.info/?pushpress=hub'/>
		<item>
		<title>Viewing OpenLearn Mindmaps Using d3.js</title>
		<link>http://blog.ouseful.info/2012/05/11/viewing-openlearn-mindmaps-using-d3-js/</link>
		<comments>http://blog.ouseful.info/2012/05/11/viewing-openlearn-mindmaps-using-d3-js/#comments</comments>
		<pubDate>Fri, 11 May 2012 14:14:04 +0000</pubDate>
		<dc:creator>Tony Hirst</dc:creator>
				<category><![CDATA[OU2.0]]></category>
		<category><![CDATA[d3.js]]></category>
		<category><![CDATA[openlearn]]></category>

		<guid isPermaLink="false">http://blog.ouseful.info/?p=7799</guid>
		<description><![CDATA[In a comment on Generating OpenLearn Navigation Mindmaps Automagically, Pete Mitton hinted that the d3.js tree layout example might be worth looking at as a way of visualising hierarchical OpenLearn mindmaps/navigation layouts. It just so happens that there is a networkx utility that can publish a tree structure represented as a networkx directed graph in [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=blog.ouseful.info&#038;blog=325417&#038;post=7799&#038;subd=ouseful&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>In a comment on <a href="http://blog.ouseful.info/2012/05/04/generating-openlearn-navigation-mindmaps-automagically/#comment-22166">Generating OpenLearn Navigation Mindmaps Automagically</a>, Pete Mitton hinted that the <a href="http://mbostock.github.com/d3/talk/20111018/tree.html">d3.js tree layout example</a> might be worth looking at as a way of visualising hierarchical OpenLearn mindmaps/navigation layouts.</p>
<p>It just so happens that there is a networkx utility that can publish a tree structure represented as a networkx directed graph in the JSONic form that d3.js works with (<a href="http://networkx.lanl.gov/reference/generated/networkx.readwrite.json_graph.tree_data.html">networkx.readwrite.json_graph</a>), so I had a little play with the code I used to generate Freemind mind maps from OpenLearn units and refactored it to generate a networkx graph, and from that a d3.js view:</p>
<p><a href="https://views.scraperwiki.com/run/d3_demo/"><img src="http://ouseful.files.wordpress.com/2012/05/openlearn-mindmap-in-d3js.png?w=700&#038;h=469" alt="" title="openlearn mindmap in d3js" width="700" height="469" class="alignnone size-full wp-image-7800" /></a></p>
<p>(The above view is a direct copy of Mike Bostock&#8217;s example code, feeding from an automagically generated JSON representation of an OpenLearn unit.)</p>
<p>For demo purposes, I did a couple of views: a <a href="https://scraperwiki.com/views/d3_tree_demo/">pure HTML/JSON view</a>, and a <a href="https://scraperwiki.com/views/d3_demo/">Python one, that throws the JSON into an HTML template</a>.</p>
<p>The d3.js JSON generating code can be found on Scraperwiki too: <a href="https://scraperwiki.com/views/openlearn_tree_json/">OpenLearn Tree JSON</a>. When you run the view, it parses the OpenLearn XML and generates a JSON representation of the unit (pass the unit code via a <em>?ucode=UNITCODE</em> URL parameter, for example <a href="https://scraperwiki.com/views/openlearn_tree_json/?unit=OER_1">https://scraperwiki.com/views/openlearn_tree_json/?unit=OER_1</a>.</p>
<p>The Python powered d3.js view also responds to the unit URL parameter, for example:<br />
<a href="https://views.scraperwiki.com/run/d3_demo/?unit=OER_1">https://views.scraperwiki.com/run/d3_demo/?unit=<strong>OER_1</strong></a></p>
<p>The d3.js view is definitely very pretty, although at times the layout is a little cluttered. I guess the next step is a functional one, though, which is to find how to linkify some of the elements so the tree view can act as a navigational surface.</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/ouseful.wordpress.com/7799/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/ouseful.wordpress.com/7799/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=blog.ouseful.info&#038;blog=325417&#038;post=7799&#038;subd=ouseful&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://blog.ouseful.info/2012/05/11/viewing-openlearn-mindmaps-using-d3-js/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/abbd9f90565ce9ae4d065d93a81d8c03?s=96&#38;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D96" medium="image">
			<media:title type="html">Tony Hirst</media:title>
		</media:content>

		<media:content url="http://ouseful.files.wordpress.com/2012/05/openlearn-mindmap-in-d3js.png" medium="image">
			<media:title type="html">openlearn mindmap in d3js</media:title>
		</media:content>
	</item>
	</channel>
</rss>
