Skip to content

Instantly share code, notes, and snippets.

@mhawksey
Created October 20, 2011 08:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save mhawksey/1300700 to your computer and use it in GitHub Desktop.
Save mhawksey/1300700 to your computer and use it in GitHub Desktop.
Export example from NodeXL
{
"nodes": [
{"id":0, "name": "Twitter Powered Subtitles for Conference Audio/Videos on Youtube", "url":"http://blog.ouseful.info/2009/03/08/twitter-powered-subtitles-for-conference-audiovideos-on-youtube/", "nodeSize":2.12},
{"id":1, "name": "Twitter Powered Youtube Subtitles, Reprise: Anytime Commenting", "url":"http://blog.ouseful.info/2009/03/10/twitter-powered-youtube-subtitles-reprise-anytime-commenting/", "nodeSize":1.7},
{"id":2, "name": "Twitter Powered Subtitles for BBC iPlayer Content c/o the MASHe Blog", "url":"http://blog.ouseful.info/2010/02/17/twitter-powered-subtitles-for-bbc-iplayer-content-co-the-mashe-blog/", "nodeSize":1.91},
{"id":3, "name": "Scheduling Content Round the Edges – Supporting OU/BBC Co-Productions", "url":"http://blog.ouseful.info/2010/02/22/scheduling-content-round-the-edges-supporting-oubbc-co_productions/", "nodeSize":1.55},
{"id":4, "name": "Maintaining a Google Calendar from a Google Spreadsheet, Reprise", "url":"http://blog.ouseful.info/2010/03/07/maintaining-a-google-calendar-from-a-goole-spreadsheet-reprise/", "nodeSize":1.54},
{"id":5, "name": "Reversible, Reverse History and Side-by-Side Storytelling", "url":"http://blog.ouseful.info/2010/03/22/reversible-and-reverse-history-storytelling/", "nodeSize":1.76},
{"id":6, "name": "Multi-Dimensional and Multiple-Perspective Storytelling", "url":"http://blog.ouseful.info/2010/03/25/multi-dimensional-and-multiple-perspective-storytelling/", "nodeSize":1.6},
{"id":7, "name": "Searching the Backchannel – Martin Bean, OU VC, Twitter Captioned at JISC10", "url":"http://blog.ouseful.info/2010/04/19/searching-the-backchannel-martin-bean-ou-vc-twitter-captioned-at-jisc10/", "nodeSize":2.1},
{"id":8, "name": "BBC iPlayer Gets a New Beta Release, plus Some Thoughts on My Changing TV Habits", "url":"http://blog.ouseful.info/2010/05/26/bbc-iplayer-gets-a-new-beta-release-plus-some-thoughts-on-my-changing-tv-habits/", "nodeSize":2.49},
{"id":9, "name": "uTitle: Anytime Twitter Captioning of Youtube Videos", "url":"http://blog.ouseful.info/2010/06/21/utitle-anytime-twitter-captioning-of-youtube-videos/", "nodeSize":1.7},
{"id":10, "name": "Backchannel Side Effects – Personal Meeting Notes", "url":"http://blog.ouseful.info/2010/07/16/backchannel-side-effects-personal-meeting-notes/", "nodeSize":1.54},
{"id":11, "name": "Crowd Sourcing a Promotion Case…", "url":"http://blog.ouseful.info/2010/08/11/crowd-sourcing-a-promotion-case/", "nodeSize":1.84},
{"id":12, "name": "Visual UI Editor For Google Apps Script", "url":"http://blog.ouseful.info/2011/05/12/visual-ui-editor-for-google-apps-script/", "nodeSize":2.64},
{"id":13, "name": "Twitter + voting/polling + Yahoo Pipes = TwEVS (The Making Of)", "url":"http://mashe.hawksey.info/2009/08/twevs-the-build/", "nodeSize":1.94},
{"id":14, "name": "Twitter powered subtitles for BBC iPlayer", "url":"http://mashe.hawksey.info/2010/02/twitter-powered-subtitles-for-bbc-iplayer/", "nodeSize":1.55},
{"id":15, "name": "Searching the backchannel with Twitter subtitles", "url":"http://mashe.hawksey.info/2010/04/searching-the-backchannel-with-twitter-subtitles/", "nodeSize":1.53},
{"id":16, "name": "Convergence @youtube meets @twitter: In timeline commenting of YouTube videos using Twitter [uTitle]", "url":"http://mashe.hawksey.info/2010/06/convergence-youtube-meets-twitter-in-timeline-commenting-of-youtube-videos-using-twitter-utitle/", "nodeSize":1.54},
{"id":17, "name": "97%* of desktop web browsers can now enjoy iTitle Twitter Subtitling – Vimeo edition", "url":"http://mashe.hawksey.info/2010/07/ititle-vimeo-edition-97-perc-coverage/", "nodeSize":1.73},
{"id":18, "name": "Give it a REST: iTitle/uTitle linking (oh and you can comment on Vimeo vids in uTitle)", "url":"http://mashe.hawksey.info/2010/08/give-it-a-rest-ititleutitle-linking/", "nodeSize":1.73},
{"id":19, "name": "Material to support Tony Hirst’s (@psychemedia’s) promotion", "url":"http://mashe.hawksey.info/2010/08/material-to-support-tony-hirsts-psychemedias-promotion/", "nodeSize":2.46},
{"id":20, "name": "iTitle: Full circle with Twitter subtitle playback in YouTube (ALT-C 2010 Keynotes)", "url":"http://mashe.hawksey.info/2010/11/ititle-altc2010/", "nodeSize":1.53},
{"id":21, "name": "Making ripples in a big pond: Optimising videos with an iTitle Twitter track", "url":"http://mashe.hawksey.info/2010/12/making-ripples-in-a-big-pond-optimising-videos-with-an-ititle-twitter-track/", "nodeSize":1.77},
{"id":22, "name": "App, App and Away: Workshop Handout #open4ed #GAS", "url":"http://mashe.hawksey.info/2011/05/app-app-and-away-workshop-handout-open4ed-gas/", "nodeSize":1.57},
{"id":23, "name": "Automating your inbox with Google Apps Script", "url":"http://mashe.hawksey.info/2011/05/automating-your-inbox-with-google-apps-script/", "nodeSize":1.57},
{"id":24, "name": "My draft application for the ALT Learning Technologist of the Year Award 2011", "url":"http://mashe.hawksey.info/2011/05/my-draft-application-for-alt-learning-technologist-of-the-year-award-2011/", "nodeSize":1.87},
{"id":25, "name": "[Work in Progress] Creating a framework for custom form interfaces using Google Apps Script", "url":"http://mashe.hawksey.info/2011/05/work-in-progress-google-spreadsheetsites-flexible-event-booking-form/", "nodeSize":1.57},
{"id":26, "name": "Creating Google Charts From CSV Data Inside a Yahoo Pipe", "url":"http://ouseful.wordpress.com/2009/03/12/creating-google-charts-from-csv-data-inside-a-yahoo-pipe/", "nodeSize":1.59},
{"id":27, "name": "Easier Twitter Powered Subtitles for Youtube Movies", "url":"http://ouseful.wordpress.com/2009/03/17/easier-twitter-powered-subtitles-for-youtube-movies/", "nodeSize":1.83},
{"id":28, "name": "Who’s Tweeting Our Hashtag?", "url":"http://ouseful.wordpress.com/2009/08/11/whos-tweeting-our-hashtag/", "nodeSize":1.87},
{"id":29, "name": "Evidence, Even If Flawed, For Blog Metrics", "url":"http://ukwebfocus.wordpress.com/2010/06/25/evidence-even-if-flawed-for-blog-metrics/", "nodeSize":1.58},
{"id":30, "name": "Captioned Videos of IWMW 2010 Talks", "url":"http://ukwebfocus.wordpress.com/2010/07/23/captioned-videos-of-iwmw-2010-talks/", "nodeSize":2.55},
{"id":31, "name": "Twitter Captioned Videos Gets Even Better", "url":"http://ukwebfocus.wordpress.com/2010/07/28/twitter-captioned-videos-gets-even-better/", "nodeSize":2},
{"id":32, "name": "Escaping the Constraints of Space and Time", "url":"http://ukwebfocus.wordpress.com/2010/08/20/escaping-the-constraints-of-space-and-time/", "nodeSize":1.76},
{"id":33, "name": "Are the Benefits of Multiple Event Hashtags Now Accepted?", "url":"http://ukwebfocus.wordpress.com/2010/09/10/are-the-benefits-of-multiple-event-hashtags-now-accepted/", "nodeSize":1.5},
{"id":34, "name": "An Early Example of a TTML Application", "url":"http://ukwebfocus.wordpress.com/2010/09/16/an-early-example-of-a-ttml-application/", "nodeSize":1.89},
{"id":35, "name": "Asynchronous Twitter Discussions Of Video Streams", "url":"http://ukwebfocus.wordpress.com/2010/11/22/asynchronous-twitter-discussions-of-video-streams/", "nodeSize":1.5},
{"id":36, "name": "Blog Widget For Creating EPub and PDF Files", "url":"http://ukwebfocus.wordpress.com/2010/12/17/blog-widget-for-creating-epub-and-pdf-files/", "nodeSize":1.58},
{"id":37, "name": "Twitter Posts Are Not Private: What are the Implications?", "url":"http://ukwebfocus.wordpress.com/2011/02/09/twitter-posts-are-not-private-what-are-the-implications/", "nodeSize":1.5},
{"id":38, "name": "When Technology (Eventually) Enhances Accessibility", "url":"http://ukwebfocus.wordpress.com/2011/03/10/when-technology-eventually-enhances-accessibility/", "nodeSize":1.5},
{"id":39, "name": "A Few Days Left to Download a Structured Archive of Tweets", "url":"http://ukwebfocus.wordpress.com/2011/03/17/a-few-days-left-to-download-a-structured-archive-of-tweets/", "nodeSize":1.5},
{"id":40, "name": "The Virtual Revolution: Twitter subtitles for BBC iPlayer", "url":"http://www.rsc-ne-scotland.org.uk/mashe/2010/02/the-virtual-revolution-twitter-subtitles-for-bbc-iplayer/", "nodeSize":1.58},
{"id":41, "name": "Twitter powered subtitles for BBC iPlayer", "url":"http://www.rsc-ne-scotland.org.uk/mashe/2010/02/twitter-powered-subtitles-for-bbc-iplayer/", "nodeSize":2.52},
{"id":42, "name": "Gordon Brown’s Building Britain’s Digital Future announcement with twitter subtitles", "url":"http://www.rsc-ne-scotland.org.uk/mashe/2010/03/gordon-browns-building-britains-digital-future-announcement-with-twitter-subtitles/", "nodeSize":1.95},
{"id":43, "name": "JISC10 Conference Keynotes with Twitter Subtitles", "url":"http://www.rsc-ne-scotland.org.uk/mashe/2010/04/jisc10-conference-keynotes-with-twitter-subtitles/", "nodeSize":2.14},
{"id":44, "name": "Google I/O 2010 – Keynote Day 2 Android Demo with Twitter Subtitles", "url":"http://www.rsc-ne-scotland.org.uk/mashe/2010/05/google-io-2010-keynote-day-2-android-demo-with-twitter-subtitles/", "nodeSize":1.54},
{"id":45, "name": "Convergence @youtube meets @twitter: In timeline commenting of YouTube videos using Twitter [uTitle]", "url":"http://www.rsc-ne-scotland.org.uk/mashe/2010/06/convergence-youtube-meets-twitter-in-timeline-commenting-of-youtube-videos-using-twitter-utitle/", "nodeSize":2.19},
{"id":46, "name": "iTitle", "url":"http://www.rsc-ne-scotland.org.uk/mashe/ititle/", "nodeSize":4}
],
"links": [
{"source": 1, "target": 45},
{"source": 2, "target": 41},
{"source": 2, "target": 40},
{"source": 3, "target": 41},
{"source": 5, "target": 46},
{"source": 6, "target": 42},
{"source": 7, "target": 43},
{"source": 7, "target": 46},
{"source": 8, "target": 41},
{"source": 8, "target": 43},
{"source": 8, "target": 44},
{"source": 9, "target": 45},
{"source": 10, "target": 43},
{"source": 12, "target": 25},
{"source": 12, "target": 24},
{"source": 13, "target": 28},
{"source": 13, "target": 26},
{"source": 14, "target": 27},
{"source": 15, "target": 7},
{"source": 16, "target": 8},
{"source": 17, "target": 30},
{"source": 17, "target": 31},
{"source": 18, "target": 30},
{"source": 18, "target": 31},
{"source": 19, "target": 11},
{"source": 19, "target": 28},
{"source": 19, "target": 4},
{"source": 19, "target": 0},
{"source": 20, "target": 0},
{"source": 21, "target": 0},
{"source": 21, "target": 30},
{"source": 22, "target": 12},
{"source": 23, "target": 12},
{"source": 24, "target": 11},
{"source": 30, "target": 46},
{"source": 30, "target": 27},
{"source": 31, "target": 46},
{"source": 32, "target": 5},
{"source": 32, "target": 46},
{"source": 33, "target": 46},
{"source": 34, "target": 41},
{"source": 34, "target": 42},
{"source": 35, "target": 46},
{"source": 37, "target": 46},
{"source": 38, "target": 46},
{"source": 39, "target": 46}
]
}
<!DOCTYPE html>
<html>
<head>
<title>Force-Directed Layout</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
<style type="text/css">
path.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
marker#licensing {
fill: green;
}
path.link.licensing {
stroke: green;
}
path.link.resolved {
stroke-dasharray: 0,2 1;
}
circle {
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
}
text {
font: 10px sans-serif;
pointer-events: none;
}
text.shadow {
stroke: #fff;
stroke-width: 3px;
stroke-opacity: .8;
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 962,
h = 502;
d3.json("force.json", function(json) {
var force = d3.layout.force()
.charge(-220)
.linkDistance(80)
.nodes(json.nodes)
.links(json.links)
.size([w, h])
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);
// Per-type markers, as they don't inherit styles.
svg.append("svg:defs").selectAll("marker")
.data(force.nodes())
.enter().append("svg:marker")
.attr("id", function(d) { return "suit"+d.id; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", function(d) { return d.nodeSize*3+8 || 5; })
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
var path = svg.append("svg:g").selectAll("path")
.data(force.links())
.enter().append("svg:path")
.attr("class", function(d) { return "link suit"; })
.attr("marker-end", function(d) { return "url(#suit"+d.target.id+")"; });
var circle = svg.append("svg:g").selectAll("circle.node")
.data(force.nodes())
.enter().append("svg:circle")
.attr("r", function(d) { return d.nodeSize*3 || 5; })
.on("click", function(d) { window.open(d.url);})
.call(force.drag);
var text = svg.append("svg:g").selectAll("g")
.data(force.nodes())
.enter().append("svg:g");
// A copy of the text with a thick white stroke for legibility.
text.append("svg:text")
.attr("x", 8)
.attr("y", ".31em")
.attr("class", "shadow")
.text(function(d) { return d.name; });
text.append("svg:text")
.attr("x", 8)
.attr("y", ".31em")
.text(function(d) { return d.name; });
// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
path.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
});
circle.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
text.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment