Created
October 20, 2011 08:43
-
-
Save mhawksey/1300700 to your computer and use it in GitHub Desktop.
Export example from NodeXL
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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} | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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