Skip to content

Instantly share code, notes, and snippets.

@Gimly
Last active January 1, 2020 11:08
Show Gist options
  • Save Gimly/96c6cf87bcfc1b9a74f4ced27794809b to your computer and use it in GitHub Desktop.
Save Gimly/96c6cf87bcfc1b9a74f4ced27794809b to your computer and use it in GitHub Desktop.
Graph showing links between languages using the expression equivalent to "Greek to me" in each language
license: mit
height: 600
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
text {
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px;
}
.node rect {
stroke: #999;
fill: #fff;
stroke-width: 1.5px;
}
.edgePath path {
stroke: #333;
stroke-width: 1.5px;
}
</style>
<title>"Speak greek to me"</title>
</head>
<body>
<svg width="1024" height="600">
<g/>
</svg>
<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script src="http://d3js.org/d3-selection-multi.v1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.4.17/dagre-d3.min.js"></script>
<script type="text/javascript">
// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});
var languages = ["English", "Alien", "Albanian", "Aramaic", "Afrikaans", "Arabic", "Asturian", "Bulgarian", "Chinese", "Catalan", "Cebuano", "Chavacano",
"Cantonese", "Cambodian", "Croatian", "Czech", "Danish", "Dutch", "Esperanto", "Estonian", "Filipino", "Finnish", "French",
"Garshuni", "German", "Greek", "Hebrew", "Hungarian", "Icelandic", "Indonesian", "Italian", "Japanese", "Javanese", "Latin",
"Latvian", "Lithuanian", "Macedonian", "Mandarin", "Low Saxon", "Norwegian", "Patagonian", "Polish", "Portuguese", "Romanian",
"Russian", "Serbian", "Slovak", "Slovene", "Spanish", "Swedish", "Turkish", "Ukrainian", "Venetian", "Vietnamese", "Volapük", "Yiddish"];
// Automatically label each of the nodes
languages.forEach(function (language) { g.setNode(language, { label: language }); });
// Set up the edges
g.setEdge("English", "Greek", { label: "" });
g.setEdge("English", "Dutch", { label: "" });
g.setEdge("Albanian", "Chinese", { label: "" });
g.setEdge("Afrikaans", "Greek", { label: "" });
g.setEdge("Arabic", "Chinese", { label: "" });
g.setEdge("Arabic", "Garshuni", { label: "" });
g.setEdge("Asturian", "Chinese", { label: "" });
g.setEdge("Bulgarian", "Patagonian", { label: "" });
g.setEdge("Catalan", "Chinese", { label: "" });
g.setEdge("Cebuano", "Latin", { label: "" });
g.setEdge("Cebuano", "Chinese", { label: "" });
g.setEdge("Chavacano", "German", { label: "" });
g.setEdge("Cantonese", "English", { label: "" });
g.setEdge("Croatian", "Spanish", { label: "" });
g.setEdge("Czech", "Spanish", { label: "" });
g.setEdge("Danish", "Volapük", { label: "" });
g.setEdge("Dutch", "Chinese", { label: "" });
g.setEdge("Dutch", "Greek", { label: "" });
g.setEdge("Esperanto", "Volapük", { label: "" });
g.setEdge("Estonian", "Chinese", { label: "" });
g.setEdge("Filipino", "Chinese", { label: "" });
g.setEdge("Finnish", "Hebrew", { label: "" });
g.setEdge("French", "Chinese", { label: "" });
g.setEdge("French", "Hebrew", { label: "" });
g.setEdge("German", "Spanish", { label: "" });
g.setEdge("German", "Chinese", { label: "" });
g.setEdge("German", "Polish", { label: "" });
g.setEdge("Greek", "Chinese", { label: "" });
g.setEdge("Greek", "Turkish", { label: "" });
g.setEdge("Hebrew", "Chinese", { label: "" });
g.setEdge("Hungarian", "Chinese", { label: "" });
g.setEdge("Icelandic", "Hebrew", { label: "" });
g.setEdge("Indonesian", "Alien", { label: "" });
g.setEdge("Italian", "Arabic", { label: "" });
g.setEdge("Italian", "Aramaic", { label: "" });
g.setEdge("Javanese", "Dutch", { label: "" });
g.setEdge("Japanese", "Chinese", { label: "" });
g.setEdge("Latin", "Greek", { label: "" });
g.setEdge("Latvian", "Chinese", { label: "" });
g.setEdge("Lithuanian", "Chinese", { label: "" });
g.setEdge("Macedonian", "Spanish", { label: "" });
g.setEdge("Mandarin", "Alien", { label: "" });
g.setEdge("Norwegian", "Greek", { label: "" });
g.setEdge("Low Saxon", "Spanish", { label: "" });
g.setEdge("Polish", "Chinese", { label: "" });
g.setEdge("Portuguese", "Chinese", { label: "" });
g.setEdge("Portuguese", "Greek", { label: "" });
g.setEdge("Portuguese", "Latin", { label: "" });
g.setEdge("Portuguese", "Arabic", { label: "" });
g.setEdge("Portuguese", "Aramaic", { label: "" });
g.setEdge("Portuguese", "Hebrew", { label: "" });
g.setEdge("Portuguese", "Japanese", { label: "" });
g.setEdge("Romanian", "Chinese", { label: "" });
g.setEdge("Russian", "Chinese", { label: "" });
g.setEdge("Serbian", "Spanish", { label: "" });
g.setEdge("Serbian", "Chinese", { label: "" });
g.setEdge("Slovak", "Spanish", { label: "" });
g.setEdge("Slovene", "Spanish", { label: "" });
g.setEdge("Spanish", "Chinese", { label: "" });
g.setEdge("Spanish", "Greek", { label: "" });
g.setEdge("Spanish", "Aramaic", { label: "" });
g.setEdge("Swedish", "Greek", { label: "" });
g.setEdge("Turkish", "French", { label: "" });
g.setEdge("Turkish", "Arabic", { label: "" });
g.setEdge("Ukrainian", "Chinese", { label: "" });
g.setEdge("Venetian", "Turkish", { label: "" });
g.setEdge("Vietnamese", "Cambodian", { label: "" });
g.setEdge("Yiddish", "Aramaic", { label: "" });
// Set some general styles
g.nodes().forEach(function (v) {
var node = g.node(v);
node.rx = node.ry = 5;
});
var svg = d3.select("svg"),
inner = svg.select("g");
// Set up zoom support
var zoom = d3.behavior.zoom().on("zoom", function () {
inner.attr("transform", "translate(" + d3.event.translate + ")" +
"scale(" + d3.event.scale + ")");
});
svg.call(zoom);
// Create the renderer
var render = new dagreD3.render();
// Run the renderer. This is what draws the final graph.
render(inner, g);
// Center the graph
var initialScale = 0.75;
zoom
.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
.scale(initialScale)
.event(svg);
svg.attr('height', g.graph().height * initialScale + 40);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment