Skip to content

Instantly share code, notes, and snippets.

@lmatteis

lmatteis/gist:2877bcbee0688c1aac47

Last active August 29, 2015 14:16
Show Gist options
  • Save lmatteis/2877bcbee0688c1aac47 to your computer and use it in GitHub Desktop.
Save lmatteis/2877bcbee0688c1aac47 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>LingHub</title>
<!-- Bootstrap theme -->
<link href="http://linghub.lider-project.eu/assets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css">
<!-- JQuery (not required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.rdf_table {
background-color: #eee;
margin-top: 40px;
margin-bottom: 40px;
}
.rdf_table_nested {
background-color: #eee;
}
.rdf_prop {
font-weight: bold;
width: 180px;
}
.rdf_table td {
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
font-size: 120%;
}
.rdf_embedded_table {
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
}
.rdf_embedded_table td {
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
font-size: 110%;
}
.panel-default {
margin-bottom: 0px;
border-bottom: 0px;
}
.panel-heading {
font-size: 140%;
font-weight: bold;
}
.rdf_table_nested td{
padding-left: 2px;
}
.rdf_table td.rdf_value {
min-width: 350px;
}
.rdf_subheader {
text-transform: uppercase;
font-weight: bold;
word-wrap:break-word;
}
.rdf_subsection {
border-top: 2px solid #ddd;
padding-top: 1em;
}
.rdf_table_nested tr:hover {
background-color: #ddd;
}
.rdf_table tr:hover {
background-color: #ddd;
}
.rdf_header h1 {
font-weight: bold;
}
.rdf_header {
border-bottom: 1px solid #eee;
margin-top: 30px;
overflow: hidden;
word-wrap: break-word;
}
.rdf_classof {
font-style: italic;
}
.rdf_datatype a {
font-size: 80%;
font-style: italic;
color: #333;
}
a.anchor {
display: block;
position: relative;
top: -150px;
visibility: hidden;
}
div.footer_link {
border-right: 1px solid #ccc;
text-align: right;
}
a.footer_link {
font-variant: small-caps;
font-weight: bold;
}
.more img {
height: 16px;
padding-left: 2px;
}
ul.five_stars {
padding:0;
margin:0;
}
ul.five_stars li{
list-style: none;
}
ul.five_stars li:hover {
cursor: pointer;
}
ul.five_stars li:hover .star{
color: gold;
}
</style>
<script>
function flagFallBack(tag) {
if(tag.src.indexOf("und.gif", tag.src.length - 7) === -1) {
tag.src='/assets/flag/und.gif';
tag.parentNode.appendChild(document.createTextNode(''));
}
}
</script>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body style="padding-top:60px;">
<div class="navbar navbar-default navbar-fixed-top" style="background-color:#eee;border-bottom:1px solid #ccc;height: 60px;">
<div class="container">
<div class="navbar-header">
<a href="/"><img src="http://linghub.lider-project.eu/assets/logo_small.png" style="padding-top:10px;padding-bottom:10px;"/></a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<!--<div class="alert alert-danger">
<h3 style="margin-top:5px;">Step 1</h3>
<p>This is the default basic style for Yuzu, you should adapt this
to your site by editing <tt>common/html/page.html</tt>. For more
details see README</p>
</div>-->
<h1>Linguistic Linked Open Data Cloud</h1>
<p>This diagram is automatically generated from the data contained in LingHub,
and shows the current status of the linguistic linked open data cloud.</p>
<!--
<ul class="five_stars">
<li><span class="star">★</span> make your stuff available on the Web (whatever format) under an open license.</li>
<li><span class="star">★★</span> make it available as structured data (e.g., Excel instead of image scan of a table).</li>
<li><span class="star">★★★</span>use non-proprietary formats (e.g., CSV instead of Excel).</li>
<li><span class="star">★★★★</span> use URIs to denote things, so that people can point at your stuff.</li>
<li><span class="star">★★★★★</span> link your data to other data to provide context.</li>
</ul>
-->
<h3>Legend</h3>
<select class="legend">
<option name="type">By resource type</option>
<option name="license">By license</option>
</select>
<a href="#" class="export_svg">Download SVG</a>
<div id="diagram"></div>
<script
type="text/javascript"
src="http://linghub.lider-project.eu/assets/d3.min.js">
</script>
<script type="text/javascript">
// Hard coded name resource types
name_to_type = {
"agrovoc-skos": "lexicon.generalKB",
"alpino-rdf": "corpus",
"apertium-rdf": "lexicon.lexicon",
"apertium-rdf-ca-it": "lexicon.lexicon",
"apertium-rdf-en-ca": "lexicon.lexicon",
"apertium-rdf-en-es": "lexicon.lexicon",
"apertium-rdf-en-gl": "lexicon.lexicon",
"apertium-rdf-es-ca": "lexicon.lexicon",
"apertium-rdf-es-gl": "lexicon.lexicon",
"apertium-rdf-es-ro": "lexicon.lexicon",
"apertium-rdf-es-pt": "lexicon.lexicon",
"apertium-rdf-fr-ca": "lexicon.lexicon",
"apertium-rdf-fr-es": "lexicon.lexicon",
"apertium-rdf-pt-ca": "lexicon.lexicon",
"asjp": "lexicon.lexicon",
"automated similarity judgment program lexical data": "meta.db",
"babelnet": "lexicon.lexicon",
"bible-ontology": "lexicon.generalKB",
"clean-energy-data-reegle": "lexicon.generalKB",
"clld-ewave": "meta.typology",
"clld-afbo": "meta.typology",
"clld-apics": "meta.typology",
"clld-glottolog": "meta.typology",
"clld-phoible": "meta.typology",
"clld-sails": "meta.typology",
"clld-wals": "meta.typology",
"clld-wold": "meta.typology",
"cornetto": "lexicon.lexicon",
"dbnary": "lexicon.lexicon",
"fao-geopolitical-ontology": "lexicon.generalKB",
"fiesta": "corpus",
"gemet": "lexicon.generalKB",
"germlex": "lexicon.lexicon",
"gesis-thesoz": "lexicon.generalKB",
"glottolog": "meta.db",
"gold": "meta.term",
"gutenberg": "corpus",
"ids": "lexicon.lexicon",
"ietflang": "meta.term",
"intercontinental dictionary series": "lexicon.lexicon",
"jrc-name": "lexicon.generalKB",
"jrc-names": "lexicon.generalKB",
"lexicon": "lexicon.lexicon",
"lexinfo": "meta.term",
"lexvo": "meta.term",
"lingvoj": "meta.term",
"linked-hypernyms": "lexicon.generalKB",
"lodac-bdls": "lexicon.generalKB",
"masc": "corpus",
"metashare": "meta.db",
"mexico": "corpus",
"mlsa": "corpus",
"muninn-world-war-i": "lexicon.generalKB",
"olia": "meta.term",
"olia-discourse": "meta.term",
"opencyc": "lexicon.generalKB",
"panlex": "lexicon.lexicon",
"parole-simple-ont": "lexicon.lexicon",
"phoible": "meta.typology",
"pleiades": "lexicon.generalKB",
"saldo-rdf": "lexicon.lexicon",
"saldom-rdf": "lexicon.lexicon",
"simple": "lexicon.lexicon",
"swefn-rdf": "lexicon.lexicon",
"the speech accent archive": "corpus",
"umthes": "lexicon.generalKB",
"wikilinks-rdf-nif": "corpus",
"wold": "meta.typology",
"world atlas of language structuctures": "meta.db",
"world loanword database": "lexicon.lexicon",
"xlid-lexica": "lexicon.lexicon",
"yleinen suomalainen asiasanasto": "lexicon.generalKB",
"zhishi-me": "lexicon.generalKB"
}
/* Set the diagrams Height & Width */
var h = 950, w = 1200;
var defaultVertexSize = 11.0;
var minimumSize = 24.0;
/* Establish/instantiate an SVG container object */
var svg = d3.select("#diagram")
.append("svg")
.attr("height",h)
.attr("width",w);
d3.json("llod-cloud.json", makeDiag);
// build the arrow.
/*
svg.append("svg:defs").selectAll("marker")
.data(["end"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 0 13 10")
.attr("refX", 9)
.attr("refY", -5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M 0,0 13,5 0,10 z")
.attr('fill', "#ccc")
*/
function bubbleSize(node) {
var size = defaultVertexSize;
if("size" in node) {
size = defaultVertexSize / 10.0 * Math.log(node["size"] + 1) + defaultVertexSize;
} else {
size = minimumSize;
}
if(!isNaN(size)) {
return size;
} else {
return minimumSize;
}
}
function arrowWidth(node) {
var width = Math.log(node["weight"]) / 2 - 1;
if(!isNaN(width)) {
return width;
} else {
return 1;
}
}
function bubbleType(node) {
var type = "unknown";
if("tags" in node) {
type = "meta";
}
var name_plus_tags = "";
if("name" in node) {
name_plus_tags = node["name"];
}
name_plus_tags=name_plus_tags+" [";
if("tags" in node) {
for(i in node["tags"]) {
name_plus_tags = name_plus_tags+" \""+i+"\"";
}
}
name_plus_tags = name_plus_tags+" ]";
name_plus_tags = name_plus_tags.toLowerCase();
if(name_plus_tags.indexOf('lexicon') > 0) {
type="lexicon.lexicon";
}
if(name_plus_tags.indexOf('lexical-resources') > 0) {
type="lexicon.lexicon";
}
if(name_plus_tags.indexOf("typology")!=-1) {
type="meta.db";
}
if("name" in node) {
if(node["key"].toLowerCase().indexOf("dbpedia")!=-1) { type="lexicon.generalKB"; }
if(node["key"].toLowerCase().indexOf("ontos")!=-1) { type="lexicon.generalKB"; }
if(node["key"].toLowerCase().indexOf("asit")!=-1) { type="lexicon.generalKB"; }
if(node["key"].toLowerCase().indexOf("heart failure")!=-1) { type="lexicon.generalKB"; }
if(node["key"].toLowerCase().indexOf("zhishi.me")!=-1) { type="lexicon.generalKB"; }
}
if(name_plus_tags.indexOf("dbpedia")!=-1) { type="lexicon.generalKB"; }
if(name_plus_tags.indexOf("yago")!=-1) { type="lexicon.generalKB"; }
if(name_plus_tags.indexOf("thesaurus")!=-1) { type="lexicon.generalKB"; }
if(name_plus_tags.indexOf("vocab-mappings")!=-1) { type="lexicon.generalKB"; }
if(name_plus_tags.indexOf("wiktionary")!=-1) { type="lexicon.lexicon"; }
if(name_plus_tags.indexOf("sentiment")!=-1) { type="lexicon.lexicon"; }
if(name_plus_tags.indexOf("lemon")!=-1) { type="lexicon.lexicon"; }
if(name_plus_tags.indexOf("isocat")!=-1) { type="meta.term" ; }
if(name_plus_tags.indexOf("biblio")!=-1) { type="meta.other"; }
if(name_plus_tags.indexOf("general ontology of linguistic description")!=-1) { type="meta.term"; }
if(name_plus_tags.indexOf("corpus")!=-1) { type="corpus"; }
if(name_plus_tags.indexOf("treebank")!=-1) { type="corpus"; }
if(name_plus_tags.indexOf("corpora")!=-1) { type="corpus"; }
if(name_plus_tags.indexOf("semanticquran")!=-1) { type="corpus"; }
if(name_plus_tags.indexOf("wordnet")!=-1) { type="lexicon.lexicon"; }
for(name2 in name_to_type) {
if(node["key"] == name2) {
type = name_to_type[name2];
}
}
return type;
}
function bubbleColor(type) {
// html color codes: http://html-color-codes.info/
if(colorMap[type])
return colorMap[type]
else
return '#777';
}
function breakText(text) {
if(text.length > 10) {
var i = text.indexOf(" ", 10);
if(i > 0) {
var test = breakText(text.substring(i+1));
test.unshift(text.substring(0,i));
return test;
} else {
return [text];
}
} else {
return [text];
}
}
function makeDiag(json) {
var nodes = [];
var node_names = [];
for(var key in json) {
var license = json[key].license || "none";
if("triples" in json[key]) {
nodes.push({
"name": breakText(json[key]["name"]),
"lines": breakText(json[key]["name"]).length,
"key": key,
"size": json[key]["triples"],
"license": license,
"url": "http://linghub.lider-project.eu/datahub/" + key
});
} else {
nodes.push({
"name": breakText(json[key]["name"]),
"lines": breakText(json[key]["name"]).length,
"license": license,
"url": "http://linghub.lider-project.eu/datahub/" + key,
"key": key
});
}
node_names.push(key);
}
var links = [];
for(var key in json) {
for(var target in json[key]["links"]) {
if(node_names.indexOf(target) >= 0) {
links.push({
"source": node_names.indexOf(key),
"lines": breakText(json[key]["name"]).length,
"target": node_names.indexOf(target),
"weight": json[key]["links"][target]
});
}
}
}
/* Draw the edges/links between the nodes */
var edges = svg.selectAll("line")
.data(links)
.enter()
.append("line")
.style("stroke", "#ccc")
.style("stroke-width", arrowWidth)
.attr("marker-end", "url(#end)");
/* Draw the node labels first */
var bubbles = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node");
bubbles.append("title")
.text(function(d) { return d["name"]; });
bubbles.append("circle")
.attr("cursor", "pointer")
.attr("r", bubbleSize)
.attr("stroke", "rgb(94, 94, 94)")
.on("click", function(d) { window.open(d["url"],"_blank"); })
.attr('type', bubbleType)
.attr('license', function(d) { return d.license })
/*
.attr("fill", function(d) {
var type = bubbleType(d);
return bubbleColor(type);
});
*/
bubbles.append("text")
.style("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.on("click", function(d) { window.open(d["url"],"_blank"); })
.attr("y", function(d) { return (d["lines"] * -0.7 + 0.0) + "em"; })
.attr("cursor", "pointer")
.selectAll("text")
.data(function(d, i) { return d["name"] })
.enter().append("tspan")
.attr("x", "0")
.attr("dy", "1.2em")
.text(function(d) { return d.toString(); });
/* Establish the dynamic force behavor of the nodes */
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([w,h])
.linkDistance([2 * defaultVertexSize])
.charge([-12000])
.gravity(5.0)
.start();
/* Run the Force effect */
force.on("tick", function() {
bubbles.attr("transform", function(d) {
var r = bubbleSize(d);
d.x = Math.max(r, Math.min(w-r, d.x));
d.y = Math.max(r, Math.min(h-r, d.y));
return "translate(" + d.x + "," + d.y + ")";
});
edges.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; });
}); // End tick func
var k = 0;
while ((force.alpha() > 1e-5) && (k < 500)) {
force.tick(),
k = k + 1;
}
// luca wrote stuff after this
// i modify the SVG after it's been drawn
$('svg g.node text').each(function() {
var $this = $(this)
var $circle = $this.parent().find('circle')
circleWidth = $circle.attr('r') * 2;
// make smaller until it fits
for(var i=10; i > 0; i--) {
var width = $this.width()
if(width > circleWidth) {
$this.attr('font-size', i+'px')
$this.attr('y', $this.attr('y'));
} else {
continue;
}
}
})
$('select.legend').on('change', function() {
var $this = $(this)
var selected = $this.find('option:selected').attr('name')
if(selected == 'type') {
redrawLegend('type')
} else if (selected == 'license') {
redrawLegend('license')
}
});
var typeColor = {
"meta":'#FDAE6B',
"meta.db":'#F08080',
"meta.term":'#FD8C3B',
"meta.typology":'#E6550D',
"lexicon":'#74C476',
"lexicon.generalKB":'#A1D99B',
"lexicon.lexicon":'#31A354',
"corpus":'#3182BD'
}
var licenseColor = {
"none": "#ddd",
"http://creativecommons.org/licenses/by-nc/2.0/": "#A9A9A9"
}
var typeText = {
"meta":'Other Metadata',
"meta.db":'Linguistic Resource Metadata',
"meta.term":'Linguistic Data Categories',
"meta.typology":'Typological Databases',
"lexicon":'Other Lexical Resources',
"lexicon.generalKB":'Terminologies, Thesauri and Knowledge Bases',
"lexicon.lexicon":'Lexicons and Dictionaries',
"corpus":'Corpora'
}
var licenseText = {
"none": "None specified",
"http://creativecommons.org/licenses/by-nc/2.0/": "Creative Commons 2.0"
}
function redrawLegend(key) {
if(key == 'type') {
colorMap = typeColor;
textMap = typeText;
} else if (key == 'license') {
colorMap = licenseColor;
textMap = licenseText;
}
// remove all legend nodes
$("g[legend_node=true]").remove()
// build legend in SVG
var colors = {}
$('svg g circle').each(function() {
var $this = $(this);
colors[$this.attr(key)] = colorMap[$this.attr(key)]
$this.attr('fill', colorMap[$this.attr(key)])
})
var count = 0;
for(var i in colors) {
count++;
var gnode = svg.append("g")
.attr("transform", "translate(3, "+(count * 25)+")")
.attr("legend_node", true)
gnode.append("circle")
.attr('r', 6)
.attr("cx", "0.5em")
.attr('fill',colors[i])
gnode.append("text")
.attr('style','font-size: 12px;')
.attr("dx", "2em")
.attr("dy", "0.3em")
.text(function(d) { return textMap[i]});
}
}
redrawLegend('type')
$('svg').attr('viewBox', '0 0 1417 778')
$('svg').attr('style', 'position: relative;')
$('svg').attr('xmlns', 'http://www.w3.org/2000/svg')
}
$(function() {
$('.export_svg').click(function() {
open("data:image/svg+xml," + encodeURIComponent($('svg').get(0).outerHTML));
})
})
</script>
</div>
</div>
<div class="navbar" style="background-color:#fff;padding-top:100px;">
<div class="container">
<div class="row">
<div class="col-lg-1 col-lg-offset-8 footer_link">
<a href="/about" class="footer_link">About</a><br/>
<a href="/license" class="footer_link">License</a><br/>
<a href="/download" class="footer_link">Download</a><br/>
<a href="https://github.com/liderproject/linghub" class="footer_link">Source</a>
</div>
<div class="col-lg-3" style="line-height:5.5em;vertical-align:middle;">
<a href="/license">
<img src="http://linghub.lider-project.eu/assets/cc/by-nc-sa.png" height="30px"/></a>
<a href="http://www.lider-project.eu/"><img src="http://www.lider-project.eu/sites/default/files/logo.jpg" height="50px"/></a>
</div>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60200248-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment