2d:null 2e:["$","title",null,{"children":"MaterialsMine Ontology Visualization II | Michael Deagen | Observable"}] 33:T9ae,chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-400)) .force("x", d3.forceX()) .force("y", d3.forceY()); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .style("font", "12px sans-serif"); const g = svg.append("g") g.append("defs").selectAll("marker") .data(types) .join("marker") .attr("id", d => `arrow-${d}`) .attr("viewBox", "0 -5 10 10") .attr("refX", 15) .attr("refY", -0.5) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("path") .attr("fill", color) .attr("d", "M0,-5L10,0L0,5"); const link = g.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .selectAll("path") .data(links) .join("path") .attr("stroke", d => color(d.type)) .attr("marker-end", d => `url(${new URL(`#arrow-${d.type}`, location)})`); const globalNode = g.append("g") .attr("fill", "currentColor") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round"); const node = globalNode .selectAll("g") .data(nodes) .join("g") .call(drag(simulation)); node.append("circle") .attr("stroke", "white") .attr("stroke-width", 1.5) .attr("r", 4); node.append("text") .attr("x", 8) .attr("y", "0.31em") .text(d => d.id) .clone(true).lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3); let zoomLvl = 1; let lastK = 0; simulation.on("tick", () => { link.attr("d", linkArc); node.attr("transform", d => `translate(${d.x},${d.y})`); }); invalidation.then(() => simulation.stop()); svg.call(d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([0.1, 80]) .on("zoom", zoomed)); function zoomed() { let e = d3.event if(e.transform.k > 2 && lastK != e.transform.k){ lastK = e.transform.k; console.log("zoomed"); zoomLvl =Math.log2(e.transform.k); globalNode.attr("stroke-width", 1.5/zoomLvl ); link.attr("stroke-width", 1.5/(zoomLvl)); } g.attr("transform", e.transform); } return svg.node(); }34:[{"id":"c2f8813e55809ab4a337d888d3f8ea60feae95d24efd58fc7dbaba0c5243092be9d2e4cf1400cb8db3db4e765a7339aa82c923fd417fab6b22032dbf6e5af2f8","href":"https://static.observableusercontent.com/files/c2f8813e55809ab4a337d888d3f8ea60feae95d24efd58fc7dbaba0c5243092be9d2e4cf1400cb8db3db4e765a7339aa82c923fd417fab6b22032dbf6e5af2f8","name":"MM-ontology_compounds@2.json","type":"application/json","lastModified":1627048109514.173,"size":618871},{"id":"9e65bb8b7d394778d645bf18cdb77b3195aa3c1e42217bdc37f6de491d48c14b9d7bbb8f875ac973f30b9185b5f10e84a1f0f5b05cb4603eb096f0f75cd547a0","href":"https://static.observableusercontent.com/files/9e65bb8b7d394778d645bf18cdb77b3195aa3c1e42217bdc37f6de491d48c14b9d7bbb8f875ac973f30b9185b5f10e84a1f0f5b05cb4603eb096f0f75cd547a0","name":"MM-ontology_compounds@1.json","type":"application/json","lastModified":1619182441488.495,"size":595441}] 31:{"id":"aef1a42f26cdb101","slug":"materialsmine-ontology-visualization-ii","title":"MaterialsMine Ontology Visualization II","thumbnail":"8c77e6d34ab31e23e9c21d46a4d9a058d56019c60458a0525b266f92ad40e8e8","access_level":"public","create_time":"$D2021-04-23T12:15:20.528Z","update_time":"$D2021-09-23T18:01:14.236Z","view_time":null,"first_public_time":"$D2021-04-23T12:25:42.917Z","has_unpublished_edits":null,"fork":{"id":"98c237e4b644530c","slug":"materialsmine-ontology-visualization","title":"MaterialsMine Ontology Visualization","owner":{"id":"5ca8a3812ea4a326","login":"mdeagen","name":"Michael Deagen"}},"stars":1,"starred":false,"owner":{"type":"team","id":"5ca8a3812ea4a326","login":"mdeagen","name":"Michael Deagen","avatar_url":"https://avatars-next.observableusercontent.com/0b8e876e2eac1058faa6c1a2624346f3e72350b8a7e6c9acaec6a9ad920b0476","tier":"starter_2024"},"version":288,"publish_version":288,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3611c0325cb99e9","login":"mdeagen","name":"Michael Deagen","avatar_url":"https://avatars-next.observableusercontent.com/0b8e876e2eac1058faa6c1a2624346f3e72350b8a7e6c9acaec6a9ad920b0476","tier":null}],"members":[{"type":"individual","id":"d3611c0325cb99e9","login":"mdeagen","name":"Michael Deagen","avatar_url":"https://avatars-next.observableusercontent.com/0b8e876e2eac1058faa6c1a2624346f3e72350b8a7e6c9acaec6a9ad920b0476","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"MaterialsMine Ontology Visualization II","cells":[{"id":0,"value":"md`# MaterialsMine Ontology Visualization II\n\nThis D3.js visualization of a directed graph takes its data from a SPARQL query in order to provide an interactive glimpse into the underlying structure of a knowledge graph. The SPARQL query returns triples (node–edge–node) from the knowledge graph, in which the nodes are *classes* and the edges are the *semantic links* between *instances* of those classes. Some classes (e.g., characterization equipment/devices) are excluded from the query for brevity. **Drag and zoom to explore the graph.**\n\nIncludes [directional edges](https://observablehq.com/@d3/mobile-patent-suits) and [pan/zoom capability](https://observablehq.com/@scax/force-directed-graph-with-zoom-and-stroke-scaling-svg).\n\nSemantic links between concepts feature a categorical color encoding:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"swatches({color})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`The following query was used to retrieve the source/target classes and link types:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"query = `\nPREFIX rdf: \nPREFIX rdfs: \nPREFIX prov: \nPREFIX owl: \nPREFIX sio: \nPREFIX mm: \nPREFIX matl: \nPREFIX dct: \nPREFIX bibo: \nPREFIX npub: \nPREFIX dcat: \nSELECT DISTINCT ?source ?type ?target WHERE {\n ?Subject rdf:type ?source .\n ?Object rdf:type ?target .\n ?target rdf:type owl:Class .\n ?Subject ?type ?Object .\n FILTER(?type != prov:used)\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`###### NOTE: Due to long query runtime (~45 s), raw JSON output was saved and uploaded as a file attachment to this notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"SPARQLresults = await FileAttachment(\"MM-ontology_compounds@2.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"prefixes = parseSPARQLPrefixes(query)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"links = parseSPARQL(SPARQLresults,prefixes)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"data = ({nodes: Array.from(new Set(links.flatMap(l => [l.source, l.target])), id => ({id})), links})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"types = Array.from(new Set(links.map(d => d.type)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"colorscheme = [\"rgb(31,119,180)\", \"rgb(174,199,232)\", \"rgb(255,127,14)\", \"rgb(255,187,120)\", \"rgb(44,160,44)\", \"rgb(152,223,138)\", \"rgb(214,39,40)\", \"rgb(255,152,150)\", \"rgb(148,103,189)\", \"rgb(197,176,213)\", \"rgb(140,86,75)\", \"rgb(196,156,148)\", \"rgb(227,119,194)\", \"rgb(247,182,210)\", \"rgb(127,127,127)\", \"rgb(199,199,199)\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"color = d3.scaleOrdinal(types, colorscheme)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"height = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"import { parseSPARQL, parseSPARQLPrefixes } from '@damienlieber/sparql-parsing-function'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"import { linkArc } with { links, types, data, color, height } from \"@d3/mobile-patent-suits\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"