Created
October 20, 2013 13:22
-
-
Save nezuQ/7069592 to your computer and use it in GitHub Desktop.
日本語版Linked Dataクラウド図JSON化サンプル
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> | |
<meta charset="utf-8"> | |
<html> | |
<head> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
<style type="text/css"> | |
.link { stroke: #ccc; } | |
.nodetext { pointer-events: none; font: 12px; } | |
</style> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
/* | |
* [元ネタ] | |
* 日本語版Linked Dataクラウド図 | Linked Open Data Initiative | |
* (by Fumihiro Kato) | |
* http://linkedopendata.jp/?p=411 | |
*/ | |
var w = 960, | |
h = 500 | |
var svg = d3.select("body").append("svg") | |
.attr("width" ,w) | |
.attr("height",h); | |
var json = { | |
"groups":{ | |
1:"Industry", | |
2:"Geographic", | |
3:"Life Science", | |
4:"Cross-domain", | |
5:"Media", | |
6:"Government", | |
7:"Publication", | |
8:"LOD Cloud", | |
9:"User generated content" | |
}, | |
"nodes":[ | |
{"name":"DBPedia Japanese","group":6,"openlicence":1}, | |
{"name":"Open DATA METI Statistics","group":4,"openlicence":1}, | |
{"name":"LSJ","group":2,"openlicence":1}, | |
{"name":"PinQA","group":9,"openlicence":0}, | |
{"name":"GeoLOD","group":2,"openlicence":0}, | |
{"name":"Kyoto Manga Museum","group":7,"openlicence":0}, | |
{"name":"VIAF","group":8,"openlicence":1}, | |
{"name":"LC","group":8,"openlicence":1}, | |
{"name":"KAKEN","group":7,"openlicence":0}, | |
{"name":"CiNii","group":7,"openlicence":0}, | |
{"name":"DBPedia","group":8,"openlicence":1}, | |
{"name":"Aozora Bunko","group":8,"openlicence":0}, | |
{"name":"RIHN","group":7,"openlicence":0}, | |
{"name":"NDL Authorities","group":7,"openlicence":0}, | |
{"name":"Geonames","group":8,"openlicence":1}, | |
{"name":"Biomass pedia","group":3,"openlicence":1}, | |
{"name":"LODAC Species","group":3,"openlicence":0}, | |
{"name":"Yokohama Art LOD","group":7,"openlicence":0}, | |
{"name":"Neji LOD","group":1,"openlicence":1}, | |
{"name":"Earthquake Archives Fukushima","group":7,"openlicence":0}, | |
{"name":"WordNet-ja","group":4,"openlicence":0}, | |
{"name":"LODAC Museum","group":7,"openlicence":0}, | |
{"name":"SOCIA","group":5,"openlicence":0}, | |
{"name":"Freebase","group":8,"openlicence":1}, | |
{"name":"Japanese Wikipedia Ontology","group":4,"openlicence":1}, | |
{"name":"save MLAK","group":7,"openlicence":1} | |
], | |
"links":[ | |
{"source":0,"target":20,"value":3}, | |
{"source":0,"target":24,"value":5}, | |
{"source":0,"target":24,"value":5}, | |
{"source":0,"target":10,"value":5}, | |
{"source":1,"target":0,"value":1}, | |
{"source":2,"target":3,"value":1}, | |
{"source":2,"target":0,"value":3}, | |
{"source":2,"target":10,"value":1}, | |
{"source":3,"target":0,"value":1}, | |
{"source":4,"target":0,"value":3}, | |
{"source":5,"target":0,"value":3}, | |
{"source":9,"target":8,"value":3}, | |
{"source":10,"target":0,"value":3}, | |
{"source":11,"target":0,"value":1}, | |
{"source":11,"target":13,"value":3}, | |
{"source":12,"target":0,"value":1}, | |
{"source":12,"target":13,"value":1}, | |
{"source":13,"target":6,"value":5}, | |
{"source":13,"target":7,"value":3}, | |
{"source":15,"target":9,"value":1}, | |
{"source":15,"target":0,"value":1}, | |
{"source":15,"target":10,"value":1}, | |
{"source":16,"target":0,"value":3}, | |
{"source":16,"target":10,"value":3}, | |
{"source":16,"target":23,"value":1}, | |
{"source":17,"target":0,"value":1}, | |
{"source":18,"target":0,"value":1}, | |
{"source":19,"target":0,"value":3}, | |
{"source":19,"target":13,"value":3}, | |
{"source":19,"target":14,"value":3}, | |
{"source":20,"target":0,"value":3}, | |
{"source":21,"target":0,"value":3}, | |
{"source":21,"target":17,"value":1}, | |
{"source":21,"target":25,"value":3}, | |
{"source":22,"target":21,"value":5}, | |
{"source":24,"target":16,"value":3}, | |
{"source":24,"target":25,"value":3} | |
] | |
} | |
; | |
var force = self.force = d3.layout.force() | |
.nodes(json.nodes) | |
.links(json.links) | |
.gravity(.05) | |
.distance(175) | |
.charge(-100) | |
.size([w, h]) | |
.start(); | |
var link = svg.selectAll("line.link") | |
.data(json.links) | |
.enter().append("svg:line") | |
.attr("class", "link") | |
.attr("x1", function(d) { return d.source.x; }) | |
.attr("y1", function(d) { return d.source.y; }) | |
.attr("x2", function(d) { return d.target.x; }) | |
.attr("y2", function(d) { return d.target.y; }) | |
.attr("stroke-width", function(d) { return d.value; }); | |
var node_drag = d3.behavior.drag() | |
.on("dragstart", dragstart) | |
.on("drag", dragmove) | |
.on("dragend", dragend); | |
function dragstart(d, i) { | |
force.stop() | |
} | |
function dragmove(d, i) { | |
d.px += d3.event.dx; | |
d.py += d3.event.dy; | |
d.x += d3.event.dx; | |
d.y += d3.event.dy; | |
tick(); | |
} | |
function dragend(d, i) { | |
d.fixed = true; | |
tick(); | |
force.resume(); | |
} | |
var node = svg.selectAll("g.node") | |
.data(json.nodes) | |
.enter().append("g") | |
.attr("class", "node") | |
.call(node_drag); | |
node.append("circle") | |
.attr("class", "circle") | |
.attr("fill", "blue") | |
.attr("stroke", "black") | |
.attr("stroke-width", 4) | |
.attr("r", 8); | |
node.append("text") | |
.attr("class", "nodetext") | |
.attr("dx", 12) | |
.attr("dy", 3) | |
.text(function(d) { return d.name }); | |
force.on("tick", tick); | |
function tick() { | |
link.attr("x1", function(d) { return d.source.x; }) | |
.attr("y1", function(d) { return d.source.y; }) | |
.attr("x2", function(d) { return d.target.x; }) | |
.attr("y2", function(d) { return d.target.y; }); | |
node.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