| license: mit | |
| height: 600 |
The link between two languages shows the foreign language used in the source language to say that something sound gibberish or is difficult to understand.
Source for the data: https://en.wikipedia.org/wiki/Greek_to_me#In_other_languages
Made with d3 and dagre-d3
| <!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> |