31:T70c,chart = { const root = tree(dataNest); const svg = d3.create("svg") .style("max-width","740px") .style("max-height","740px"); const colorScale = ["#be6298","#73b1c4","#c9ac3d","#7F7ABE","#9B79CE"]; svg.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr("d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y)); svg.append("g") .selectAll("circle") .data(root.descendants()) .join("circle") .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) `) .attr("fill", d => colorScale[d.depth % colorScale.length]) .attr("r", d => d.children ? 4.5 : 3); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .style('cursor', 'pointer') .selectAll("text") .data(root.descendants()) .join("text") .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0}) `) .attr("dy", "0.31em") .attr("x", d => d.x < Math.PI === !d.children ? 6 : -6) .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end") .text(d => d.data.name.length<25 ?d.data.name.toLowerCase() :d.data.name.toLowerCase().slice(0,16)+".."+d.data.name.toLowerCase().slice(-5)) .on("click", function(d) { window.open("https://en.wikipedia.org/wiki/"+d.data.name); }) .clone(true).lower() .attr("stroke", "white"); return svg.attr("viewBox", autoBox).node(); }32:T4cf,md` ## Instructions You can use the above interface to unfold any concept on Wikipedia. ### Entity id and link id You can either use Scholia or Wikidata to find concept ids and link ids. Scholia (recommended): - Go to https://scholia.toolforge.org/ and enter the name of a concept. You will be presented with a network of concepts and links. - Change the view of the network to 'Table' to reveal the ids of concepts and links. Wikidata: - Go to https://wikidata.org/ and search for any concept. At the top of the wikidata page you will find the entity id for the concept ('Qxxxxx'). - Concepts can be linked by many different types of relations. The link id of the 'subclass of' relationship is for example 'P279'. On the wikidata page of every concept there is a list of 'Statements' which can help you find suitable relationships for the concept. Hover over or click on a relationship and you will see the link id in the form of 'Pxxx'. ### Invert link A relationship has a direction. By inversing the relationship you unfold the main concept in the opposite direction. ### Depth Select the amount of steps you would like to unfold the main concept. A high number may take longer to update and cause the browser to stall. `33:T87b,dataWiki = {{ class SPARQLQueryDispatcher { constructor( endpoint ) { this.endpoint = endpoint; } query( sparqlQuery ) { const fullUrl = this.endpoint + '?query=' + encodeURIComponent( sparqlQuery ); const headers = { 'Accept': 'application/sparql-results+json' }; return fetch( fullUrl, { headers } ).then( body => body.json() ); } } let wikidata_entity_id = "wd:"+configNow[0]; let link_prefix = configNow[3]?"^wdt:":"wdt:"; let wikidata_link_id = link_prefix+configNow[1]; const endpointUrl = 'https://query.wikidata.org/sparql'; let sparqlQuery = `SELECT DISTINCT ?level (replace(str(?subCat),str(wd:),'') AS ?sub_id) ?subCatLabel (replace(str(?parentCat),str(wd:),'') AS ?parent_id) WHERE { VALUES ?cat {${wikidata_entity_id}} # Insert root concept { BIND(${wikidata_entity_id} AS ?subCat) # Insert root concept again. Bug: does not know '?cat'. BIND("root" AS ?parentCat) BIND(0 AS ?level) } UNION { BIND(1 AS ?level) ?subCat ${wikidata_link_id} ?cat. BIND(?cat AS ?parentCat) } `; const repeatPath = (string, repeats) => { let tmpString = string; for(let i=1; i`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }35:T805,function configUpdate(config = {}) { // https://observablehq.com/@jashkenas/inputs const { value = [], title, description, submit } = Array.isArray(config) ? { value: config } : config; let [lon, lat, dep, inv] = value; lon = lon != null ? lon : ""; lat = lat != null ? lat : ""; dep = dep != null ? dep : ""; inv = inv; const lonEl = html``; const latEl = html``; const depEl = html``; const invEl = html``; const form = input({ type: "coordinates", title, description, submit, getValue: () => { const lon = lonEl.value; const lat = latEl.value; const dep = depEl.valueAsNumber; const inv = invEl.checked; return [lon, lat, isNaN(dep) ? 1 : dep, inv]; }, form: html` ` }); form.output.remove(); return form; }36:[] 2f:{"title":"Wikidata Concept Tree Generator","cells":[{"id":1,"value":"md`# Wikidata Concept Tree Generator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md` \nGenerator of hierachical concept trees with data from wikidata.org. \n- **Enter** your own Wikidata parameters.\n- **Click** text on tree to open the corresponding Wikipedia page.\n- **Download** output as SVG/PNG (menu on left) or TSV file (link below).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"DOM.download(new Blob([d3.tsvFormat(dataTable)], {type: \"text/tsv\"}), \"wikidata-concept-tree.tsv\", \"Download data as a TSV file\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"viewof configNow = configUpdate({\n title: \"WIKIDATA PARAMETERS\",\n value: [\"Q11660\", \"P279\",2,false],\n submit: \"EXECUTE\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"md`\n## Examples\n\n| Entity | ID | Link | ID | Invert |\n| :-------- | :--- | :------- | :- | :-------- |\n| ARTIFICIAL INTELLIGENCE | Q11660 | subclass of | P279 | no |\n| BOB DYLAN | Q392 | influenced by | P737 | no |\n| GRAPH | Q141488 | subclass of | P279 | no |\n| WORK OF ART | Q838948 | subclass of | P279 | no |\n| DOW JONES INDUSTRIAL AVERAGE | Q180816 | has part | P527 | yes |\n| CORONAVIRIDAE | Q1134583 | parent taxon | P171 | no |\n| KARL MARX | Q9061 | child | P40 | yes |\n| RENE DECARTES | Q9191 | influenced by | P737 | yes/no |\n| AFRICA | Q15 | has part | P527 | yes |\n| EARTH | Q2 | has part | P527 | yes | \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"dataTable = dataWiki.results.bindings.map(x=> {return {level:+x.level.value,sub_id:x.sub_id.value,sub_label:x.subCatLabel.value, parent_id:x.parent_id.value,}});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"dataNest = {\n let obj = {name:dataTable[0].sub_label, id:dataTable[0].sub_id, children:[]};\n let cParent = obj;\n\n const search = (tree, target) => {\n if (tree.id === target) {\n return tree;\n }\n for (const child of tree.children) {\n const res = search(child, target);\n if (res) {\n return res;\n }\n }\n };\n dataTable.slice(1).forEach(item=>{\n if(item.parent_id != cParent.id){\n // set new parent\n cParent = search(obj,item.parent_id);\n }\n cParent.children.push({name:item.sub_label, id:item.sub_id, children:[]});\n })\n return obj\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"tree = data => d3.tree()\n .size([2 * Math.PI, radius])\n .separation((a, b) => (a.parent == b.parent ? 1 : 3) / a.depth)\n (d3.hierarchy(data))","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"width = 594","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"radius = width / 1.8","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1052,"value":"function autoBox() {\n document.body.appendChild(this);\n const {x, y, width, height} = this.getBBox();\n document.body.removeChild(this);\n return [x, y, width, height];\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}