2e:null 2f:["$","title",null,{"children":"Timeline UML and MDA | Figay | Observable"}] 34:T5a5,testJonLD = [ { "@id": "http://www.semanticweb.org/fini151/ontologies/2021/10/untitled-ontology-7", "@type": ["http://www.w3.org/2002/07/owl#Ontology"] }, { "@id": "http://www.semanticweb.org/fini151/ontologies/2021/10/untitled-ontology-7#a", "@type": ["http://www.w3.org/2002/07/owl#Class"] }, { "@id": "http://www.semanticweb.org/fini151/ontologies/2021/10/untitled-ontology-7#a1", "@type": [ "http://www.w3.org/2002/07/owl#NamedIndividual", "http://www.semanticweb.org/fini151/ontologies/2021/10/untitled-ontology-7#a" ] }, { "@id": "http://www.semanticweb.org/fini151/ontologies/2021/10/untitled-ontology-7#b", "@type": ["http://www.w3.org/2002/07/owl#Class"] }, { "@id": "http://www.semanticweb.org/fini151/ontologies/2021/10/untitled-ontology-7#b1", "@type": [ "http://www.w3.org/2002/07/owl#NamedIndividual", "http://www.semanticweb.org/fini151/ontologies/2021/10/untitled-ontology-7#b" ] }, { "@id": "http://www.semanticweb.org/fini151/ontologies/2021/10/untitled-ontology-7#c", "@type": ["http://www.w3.org/2002/07/owl#Class"] }, { "@id": "http://www.semanticweb.org/fini151/ontologies/2021/10/untitled-ontology-7#c1", "@type": [ "http://www.w3.org/2002/07/owl#NamedIndividual", "http://www.semanticweb.org/fini151/ontologies/2021/10/untitled-ontology-7#c" ] } ]35:T73d,MDA = [ { id: 1, group: 1, content: "BPMI BPMN", start: "2004-05-01", type: "point" }, { id: 2, group: 2, content: "BPMN 1.0", start: "2006-02-01", type: "point" }, { id: 3, group: 2, content: "BPMN 1.1", start: "2009-01-01", type: "point" }, { id: 4, group: 2, content: "BPMN 1.2", start: "2009-01-01", type: "point" }, { id: 5, group: 2, content: "BPMN 2.0", start: "2011-01-01", type: "point" }, { id: 6, group: 2, content: "ISO/CEI 19510:2013", start: "2013-07-01", type: "point" }, { id: 7, group: 2, content: "BPMN 2.02", start: "2013-12-01", type: "point" }, { id: 8, group: 2, content: "DMN 1.0", start: "2015-09-01", type: "point" }, { id: 9, group: 2, content: "DMN 1.1", start: "2016-06-01", type: "point" }, { id: 10, group: 2, content: "DMN 1.2", start: "2019-01-01", type: "point" }, { id: 11, group: 2, content: "DMN 1.3", start: "2021-02-01", type: "point" }, { id: 12, group: 2, content: "CMMN 1.0", start: "2014-05-01", type: "point" }, { id: 13, group: 2, content: "CMMN 1.1", start: "2016-12-01", type: "point" }, { id: 14, group: 2, content: "", start: "2025-12-01", type: "point" }, { id: 15, group: 3, content: "XPDL 2.0", start: "2005-10-03", type: "point" }, { id: 16, group: 3, content: "XPDL 1.0", start: "2002-12-01", type: "point" }, { id: 17, group: 3, content: "XPDL 2.1", start: "2008-12-01", type: "point" }, { id: 18, group: 3, content: "XPDL 2.2", start: "2012-07-01", type: "point" } ]36:T6a3,twopi`graph g{ ranksep=10; ratio=auto; "Specification" -- "'UML Profile for BPMN Processes'" [label="is a"] "Specification" -- "'UML Profile for ROSETTA'" [label="is a"] "Specification" -- "'Action Language for Foundational UML'" [label="is a"] "Specification" -- "'UML Profile for Schedulability, Performance, & Time'" [label="is a"] "Specification" -- "'UML Profile for Modeling QoS and FT'" [label="is a"] "Specification" -- "'UML Profile for CORBA Components'" [label="is a"] "Specification" -- "'UML Testing Profile 2'" [label="is a"] "Specification" -- "'Unified Modeling Language'" [label="is a"] "Specification" -- "'UML Profile for Enterprise Distributed Object Computing'" [label="is a"] "Specification" -- "'Precise Semantics of UML State Machines'" [label="is a"] "Specification" -- "'UML Profile for NIEM'" [label="is a"] "Specification" -- "'UML Diagram Interchange'" [label="is a"] "Specification" -- "'Precise Semantics of UML Composite Structures'" [label="is a"] "Specification" -- "'UML Profile for Voice-based Applications'" [label="is a"] "Specification" -- "'UML Profile for MARTE'" [label="is a"] "Specification" -- "'UML Profile for System on a Chip'" [label="is a"] "Specification" -- "'Semantics of a Foundational Subset for Executable UML Models'" [label="is a"] "Specification" -- "'UML Profile for Telecommunication Services'" [label="is a"] "Specification" -- "'UML Profile for Enterprise Application Integration'" [label="is a"] "Specification" -- "'UML Human-Usable Textual Notation'" [label="is a"] "Specification" -- "'UML Profile for CORBA and CORBA Components'" [label="is a"] "Specification" -- "'UML Profile for CORBA'" [label="is a"] }`37:T41b,layout = { let _id = 0; return function (layout) { return function* (parts, ...args) { yield html`

...loading...

`; const str = parts .map((s, i) => s + (i < args.length ? args[i] : "")) .join(""); yield graphviz.layout(str, "svg", layout).then((svg) => { const id = ++_id; setTimeout( (id) => { var svg = d3.select(`#id_${id}`).select("svg"); var g = svg.select("g"); var [x, y, width, height] = svg.attr("viewBox").split(" "); var zoom = d3.zoom(); svg.call( zoom .extent([ [0, 0], [width, height] ]) .scaleExtent([0.1, 8]) .on("zoom", ({ transform }) => g.attr("transform", transform)) ); svg.call(zoom.translateTo, width / 2, -height / 2); }, 1000, id ); return html`

${svg}

`; }); }; }; }38:[{"id":"368a8dc99aa58d34e5b627d1e5357b59cee9634cda4a91d89b20c803018c2c6a9efea07555cf708da68fd6313cdfc7169bf6e15d9bf2a27c940ec54b979d7982","href":"https://static.observableusercontent.com/files/368a8dc99aa58d34e5b627d1e5357b59cee9634cda4a91d89b20c803018c2c6a9efea07555cf708da68fd6313cdfc7169bf6e15d9bf2a27c940ec54b979d7982","name":"OMGSpecificationsInferredTransformed@1.json","type":"application/json","lastModified":1636807613550.454,"size":775995},{"id":"15221c8e794d7e6519cade5a75617f3928fd06f3eac2f394ff005b07c0cf8ab0a9a2f30953fdc441c3ce94d2054007dee8f393b5e78d167add4bd90fd6d093a3","href":"https://static.observableusercontent.com/files/15221c8e794d7e6519cade5a75617f3928fd06f3eac2f394ff005b07c0cf8ab0a9a2f30953fdc441c3ce94d2054007dee8f393b5e78d167add4bd90fd6d093a3","name":"OMGSpecificationsInferredTransformed@18.json","type":"application/json","lastModified":1636830021461.272,"size":609015}] 32:{"id":"0844dd70d3a54381","slug":"timeline-uml-and-mda","title":"Timeline UML and MDA","thumbnail":"ee6e48e5e886bc6013e47161e3cfda299ed5c60c715d94b9b646418468dd5a0a","access_level":"public","create_time":"$D2021-11-11T19:03:26.477Z","update_time":"$D2021-11-18T22:26:37.459Z","view_time":null,"first_public_time":"$D2021-11-17T11:33:23.105Z","fork":{"id":"1f7c7bd6e64b0bc5","slug":"timeline-bpm","title":"Timeline BPM","owner":{"id":"37f7a7f77e187b5e","login":"nfigay","name":"Figay"}},"stars":1,"starred":false,"owner":{"type":"team","id":"37f7a7f77e187b5e","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/071fc1ce1d8fbec71d4409987642a0c881b8a3651627b51e2cdaa7fcde295a10","tier":"starter_2024"},"version":697,"publish_version":697,"role":null,"authored":false,"authors":[{"type":"individual","id":"71983294fb89ee80","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/604017b640b1f50c2b41a96fcf316faa227738b7b2b4d0f6221ace789ebbfd42","tier":null}],"members":[{"type":"individual","id":"71983294fb89ee80","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/604017b640b1f50c2b41a96fcf316faa227738b7b2b4d0f6221ace789ebbfd42","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Timeline UML and MDA","cells":[{"id":0,"value":"md`# Timeline UML and MDA`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"d3v6 = require(\"d3@6/dist/d3.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"function reverseString(string) {\n return string.split(\"\").reduceRight((res, v) => (res += v), \"\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"mytimeline = html`

\n This example illustrates usage of Vis.js timeline, with as data the Business Modeling standardized languages.\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"timelineProcessStandards = {\n var groups = new vis.DataSet([\n { content: \"BPMI\", id: \"1\", value: 3, className: \"3\" },\n { content: \"OMG BPMN\", id: \"2\", value: 1, className: \"1\" },\n { content: \"Wfmc XPDL\", id: \"3\", value: 2, className: \"2\" }\n\n // { content: \"LinkedIn Articles\", id: \"4\", value: 4, className: \"4\" }\n ]);\n // create data and a Timeline\n var container = document.getElementById(\"visualization\");\n var items = new vis.DataSet(MDA);\n var options = {\n zoomable: true,\n zoomkey: \"altKey\",\n moveable: true,\n verticalScroll: true,\n horizontalScroll: true,\n orientation: \"both\",\n editable: false,\n groupEditable: false,\n width: \"100%\",\n zoomFriction: 5\n };\n var timeline = new vis.Timeline(container, items, options);\n timeline.setGroups(groups);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"testJonLD.map((currentElement) => ({\n id: reverseString(reverseString(currentElement[\"@type\"][0]).split(\"#\")[0])\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"vis = require(\"vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"moment = require(\"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"neato = layout(\"neato\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"twopi = layout(\"twopi\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"graphviz = {\n const path = await require.resolve(\"@hpcc-js/wasm\");\n const hpccWasm = await require(path);\n // Setting wasmFolder is not typically needed ---\n const pathParts = path.split(\"/\");\n pathParts.pop();\n hpccWasm.wasmFolder(pathParts.join(\"/\"));\n hpccWasm.graphviz.version = await hpccWasm.graphvizVersion();\n return hpccWasm.graphviz;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"https://github.com/digitalbazaar/jsonld.js/\nFor integrating latter on jsonld published RDF\n\nOpen Link Structured data editor (chrome-extension://pglecohilpohlmjbdbbcmfpapfpcmbjl/rdf-editor/index.html#/editor?uri=https:%2F%2Fwww.omg.org%2Fspec%2FAbout.rdf&ioType=http&view=statements )\nFor extracting RDF from OMG web site\n\nhttp://robot.obolibrary.org/ for merging imported ontology (not necessarily what needs to be done\n\nDealing with category manually with Protege, then reasoning and export\n\nShould be rationalized and automated.\n\nSpecification with date to be extracted to the timeline\n\nhttps://observablehq.com/@observablehq/hello-inputs is to be explored in order to see how we can present a tabular way the data, per group and according to what we want to visualize in order to explain linked data and what semantic web technologies allow.\n\nhttps://www.rubensworks.net/blog/2019/10/06/using-rdf-in-javascript/\n\nLet's note that json['@id'] could be used in palce of json.@id\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"newEngine = require(\" https://cdn.skypack.dev/pin/@comunica/actor-init-sparql-rdfjs@v1.22.3-X4m1Ip73peTDZ06H3XDW/mode=imports,min/optimized/@comunica/actor-init-sparql-rdfjs.js\")\n .engine","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"datax = FileAttachment(\"OMGSpecificationsInferredTransformed@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"viewof specifications = Inputs.table(datax.sort())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"columns = datax.columns","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"viewof dataType = Inputs.select(\n datax.map((d) => d.kindOfThing),\n { sort: true, unique: true, label: \"kindOfThing\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"selectedSpecifications = datax.filter((d) => d.kindOfThing === \"Specification\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"timelineSpecification = selectedSpecifications\n .map((specification, index) => ({\n id: index,\n group: 1,\n content: specification.specificationAbbreviation[0].value,\n start: specification.publicationDate[0].value,\n title: specification.specificationTitle[0].value,\n type: \"point\"\n }))\n .reverse()\n .sort((a, b) => a.date - b.date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"mytimeline2 = html`

\n This example illustrates usage of Vis.js timeline, with as data the OMG Specifications.\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"timelineOMGSpecifications = {\n var groups = new vis.DataSet([\n { content: \"OMG\", id: \"1\", value: 1, className: \"1\" }\n\n // { content: \"LinkedIn Articles\", id: \"4\", value: 4, className: \"4\" }\n ]);\n // create data and a Timeline\n var container = document.getElementById(\"visualization2\");\n var items = new vis.DataSet(timelineSpecification);\n var options = {\n zoomable: true,\n zoomkey: \"altKey\",\n moveable: true,\n verticalScroll: true,\n horizontalScroll: true,\n orientation: \"both\",\n editable: false,\n groupEditable: false,\n width: \"100%\",\n zoomFriction: 5\n };\n var timeline = new vis.Timeline(container, items, options);\n timeline.setGroups(groups);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"store = schemarama.parseJsonLd(jsonLd)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"jsonLd = FileAttachment(\"OMGSpecificationsInferredTransformed@18.json\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"

The required libraries used for the demonstrator

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"Comunica SPARQL Engine for querying RDF data and feed the visual graph creation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"Schemarama: Validator used for n3 store creation from a RDF File with JSON-LD syntax","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"schemarama = require(\"https://bundle.run/schemarama@0.0.3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"From Comunica documentation, invocation should be done the following way:\n\nconst newEngine = require('@comunica/actor-init-sparql').newEngine;\n\nconst myEngine = newEngine();","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"However, when trying to apply it, I do have an issue:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"n3 = import(\"https://cdn.skypack.dev/n3@1.11.2?min\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"graphy = require(\"https://bundle.run/graphy@4.3.3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"require(\"@rdfjs/data-model@1.3.4/dist/rdf-data-model.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"rdflib = require(\"rdflib@2.2.10/lib/index.js\").catch(\n () => window[\"_interopRequireDefault\"]\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"quadstore = import(\"https://cdn.skypack.dev/quadstore@9.1.0?min\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"comunica = require(\"https://bundle.run/@comunica/actor-rdf-parse-jsonld@1.22.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"datafactory = require(\"https://bundle.run/rdf-data-factory@1.1.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"{\n // This can be any RDFJS source\n const store = new n3.Store();\n const newEngine = engine.newEngine;\n\n // const myEngine = newEngine();\n\n // From the documentation\n // import { DataFactory } from 'rdf-data-factory';\n // const factory = new DataFactory();\n\n const factory = new datafactory.DataFactory();\n\n store.addQuad(\n factory.quad(\n factory.namedNode(\"https://www.rubensworks.net/#me\"),\n factory.namedNode(\"http://schema.org/name\"),\n factory.literal(\"Ruben\")\n )\n );\n store.addQuad(\n factory.quad(\n factory.namedNode(\"https://www.rubensworks.net/#me\"),\n factory.namedNode(\"http://schema.org/knows\"),\n factory.namedNode(\"https://ruben.verborgh.org/profile/#me\")\n )\n );\n\n return newEngine;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"engine = require(\"@comunica/actor-init-sparql-file@1.22.3/index.js\").catch(\n () => window[\"newEngine\"]\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"import(\"https://cdn.skypack.dev/@ontologies/schema@2.0.0?min\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"jsonld = require(\"https://cdn.jsdelivr.net/npm/jsonld@1.0.0/dist/jsonld.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"{\n const doc = {\n \"http://schema.org/name\": \"Manu Sporny\",\n \"http://schema.org/url\": { \"@id\": \"http://manu.sporny.org/\" },\n \"http://schema.org/image\": {\n \"@id\": \"http://manu.sporny.org/images/manu.png\"\n }\n };\n const context = {\n name: \"http://schema.org/name\",\n homepage: { \"@id\": \"http://schema.org/url\", \"@type\": \"@id\" },\n image: { \"@id\": \"http://schema.org/image\", \"@type\": \"@id\" }\n };\n const compacted = await jsonld.compact(doc, context);\n const flattened = await jsonld.flatten(doc);\n return compacted;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"