2e:null 2f:["$","title",null,{"children":"ATLAS Vocabulary Map | Figay | Observable"}] 34:[{"id":"f698739a9655fe208e4149f8b6e6084b432f900b2d620b9e7e94d9bf3800178e4a50477f07bb2e4350cf92b15bbad44df0fd28d685fc8b49d8140d19aa008fd0","href":"https://static.observableusercontent.com/files/f698739a9655fe208e4149f8b6e6084b432f900b2d620b9e7e94d9bf3800178e4a50477f07bb2e4350cf92b15bbad44df0fd28d685fc8b49d8140d19aa008fd0","name":"ATLAS Vocabulary@1.tsv","type":"text/tab-separated-values","lastModified":1632921832247.501,"size":33636}] 32:{"id":"fbba67d03e190c63","slug":"atlas-vocabulary-map","title":"ATLAS Vocabulary Map","thumbnail":"6fce9b7ad2067ee319a1f713084cb5aae77864f6563dd53c87eb68dccfaeacd8","access_level":"public","create_time":"$D2021-09-29T13:16:54.024Z","update_time":"$D2021-09-29T13:44:46.509Z","view_time":null,"first_public_time":"$D2021-11-06T18:48:43.510Z","fork":{"id":"62252d295a7ef79f","slug":"vocabulary-map","title":"Vocabulary Map","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":1238,"publish_version":1238,"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":"ATLAS Vocabulary Map","cells":[{"id":0,"value":"title = html`

ATLAS Vocabulary Map

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"definedTermsWithTSVDescription = html`Below is the import of an attach table with the tsv format (similar to csv), which is used as input for creating the vocabulary map displayed below. The concerned vocabulary is a vocabulary defined for ATLAS. It contains multiple inputs for a same term, with different origins and related to different domain. It illustrates the limitation of the vocabulary map restricted to a table with only Terms and Definitions. From this experience, a new extended Vocabulary Map will be created, considering the usage of SKOS for structuring the inputs of the Visual Map, and complementary features for such a map which could be of use for taking advantage of this visual interactive map, such as filtering, parameterizing the labels used in the boxes, specializing the relationships, etc.\n\n

The table was created from the notebook https://observablehq.com/@nfigay/combined-usage-of-skos-and-owl-an-experimentation.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"definedTermsWithTSV = FileAttachment(\"ATLAS Vocabulary@1.tsv\").tsv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"viewof table2 = Inputs.table(definedTermsWithTSV, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"An arising question concerns the management of the origin of the definition (document identifier or IRI), and of its domain, with a common way to consider the domains. Does any legacy and useable set of domains exist which we could use for categorizing the defined concepts?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1233,"value":"Another question: how to create the ifentifier of each input for the ATLAS considered concepts?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"graphDescription = html`Below is the automatically created vocabulary map as a force constrained graph, created with vis.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"// Create a div where our vis will eventually live\ngraph = {\n const div = document.createElement(\"div\");\n div.setAttribute(\"style\", \"height:600px\");\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"termsWithIdDescription = html`Here is the list of terms, shorten by size, which will be used for research within the definitions and creation of edges tagged \"references\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"termsWithId = nodes\n .map((currentElement) => ({\n term: currentElement.term,\n termId: currentElement.id\n }))\n .sort((a, b) => b.length - a.length)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"viewof table3 = Inputs.table(termsWithId, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"termsDescription = html`Below is the list of terms, used by the boldTerms function changing the labels of the nodes. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"terms = definedTermsWithTSV\n .map((currentElement) => ({\n term: currentElement.Term\n }))\n .sort((a, b) => b.length - a.length)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"viewof table4 = Inputs.table(terms, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"nodesDescription = html`Below is the array of nodes which will be used for drawing the graph. Terms and definitions are kept as they are, labels are derived from terms and definitions (term: definition). This can be enriched with different colors and ways to make the other defined terms more visible. \nThe id was created in the termsWithId table as the index of the array created from the import of the table. Other kind of identifier should be considered. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"nodes = definedTermsWithTSV.map((currentElement, index) => ({\n id: index,\n font: { multi: true },\n color: {\n background: \"white\",\n border: \"black\",\n highlight: { background: \"white\", border: \"red\" }\n },\n // label:\"\" +currentElement.Term +\"\" +\":\" +boldTerms(currentElement.Definition),\n definition: currentElement.Definition,\n term: currentElement.Term,\n image: SVGNode(currentElement.Term, currentElement.Definition),\n shape: \"image\"\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"viewof table5 = Inputs.table(nodes, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"edgesDescription = html`Edges are created in order to make more explicit the link between a term and another term being part of its definition.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"// let's create the edges\nedges = {\n var arr = [];\n nodes.forEach(function (Object, Index) {\n var createNode = 0;\n var targetNodeIndex = -1;\n termsWithId.forEach(function (Object2) {\n var myDefinition = Object.definition;\n var myTerm = Object2.term;\n if (myDefinition.includes(myTerm)) {\n arr.push({\n from: Index,\n to: Object2.termId,\n // label: \"references\",\n arrows: { to: { enabled: true, type: \"arrow\" } }\n });\n }\n });\n });\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"viewof table6 = Inputs.table(edges, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"optionsDescription = html`Here are the options for parametering the force constrained graph. It is not as free as when drawing, but it is quite faster, and the graph is interactive, i.e. you can move the nodes, zoom, etc. It is not aiming at being printed, but manipulated.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"options = {\n var myOptions = {\n edges: {\n font: {\n size: 12\n }\n },\n nodes: {\n shape: \"box\",\n font: {\n bold: {\n color: \"#0077aa\"\n }\n }\n }\n };\n return myOptions;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"networkDescription = html`Below is the creation of the network, which is displayed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"network = new vis.Network(graph, { edges, nodes, options })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"myDataSetDescription = html`Here is the experimentation of Dataset usage, which comes with vis.js. It is unclear at this stage if it brings any value, when used jointly with Observable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"myDataSet = new vis.DataSet(nodes.concat(edges), options)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"visDescription = html`Here is the inclusion of the vis.js library by referencing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"vis = require(\"vis\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"nonMaxWidthDescription = html`Here is the style allowing the cell width to be the same than the notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"nonMaxWidth = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1214,"value":"import { boldTermsInSVG } from \"@nfigay/vocabulary-map\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"import { SVGNode } from \"@nfigay/vocabulary-map\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"import { bboxText } from \"@nfigay/vocabulary-map\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"