2b:null 2c:["$","title",null,{"children":"From PIM to 2D to 3D to XR explorations | Fabien Benetou | Observable"}] 31:[] 2f:{"id":"1a1cced8fdd3c4af","slug":"from-pim-to-2d-to-3d-to-xr-explorations","title":"From PIM to 2D to 3D to XR explorations","thumbnail":"bc27841f061b7254d817a0eaa40217228c93440a5606d609423b4187948f0b4c","access_level":"public","create_time":"$D2022-04-17T16:08:28.334Z","update_time":"$D2022-05-07T11:49:29.049Z","view_time":null,"first_public_time":"$D2022-04-18T07:50:27.403Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"571c54f23a22112c","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":"starter_2024"},"version":2010,"publish_version":2010,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa8cd470e660c7d6","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":null}],"members":[{"type":"individual","id":"fa8cd470e660c7d6","login":"utopiah","name":"Fabien Benetou","avatar_url":"https://avatars-next.observableusercontent.com/0bac47d5eff199771ce966f6c35b81d0456f55f761089445a09ea05e73e51aab","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"From PIM to 2D to 3D to XR explorations","cells":[{"id":0,"value":"# From PIM to 2D to 3D to XR explorations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1066,"value":"## A personal public wiki as a source\n\nThe wiki https://fabien.benetou.fr is used as a public PIM, personal information management, or PKM, personal knowledge management. It covers topics based on interests, either personal or professional, at the moment. Some pages, like reading notes on book, are pretty structured thanks to template while others are entirely open. Most pages are open-ended, meaning that at no point there is any expectation to have a complete page on a topic. For example the Tools/ group evolve through usages. Some tools are used, their page updated, while others are not used anymore. Yet, the pages even though outdated remain accessible as in the future they could be used again or the experience of learning these tools could be used for other tools.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1074,"value":"## Visualization to manage growth\n\nBecause pages are open-ended the wiki also is. Groups can form they later on not be used anymore. Initially, with few dozens pages there was no need to visualize because everything could be remembered. As the number of pages grew (currently ${numberOfPages}) the ability to manage them also grew harder.\n\nConsequently the hope of visualizations is to be able to maintain a global view despite local changes. It is also to consider numbers only but unfortunately it is difficult to find structure thanks to single numbers. The number of page itself is indicate but less than how that number changed over time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":952,"value":"Showing the moment when pages have been created, from the first to the latest.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":393,"value":"Plot.plot({\n x: { type: \"utc\" }, \n marks: [\n Plot.tickX(datesOfLastEdits, {x: \"date\", strokeOpacity: 0.2 })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1708,"value":"Note that opacity here does not give a clear picture. We will have to zoom in as somehow 2 views of the same data seem to show something different. On the first visualization 2010 seems to be the most active year. On the next one 2016 seems to be.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1686,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.rectY(datesOfLastEdits, Plot.binX({y: \"count\"}, {x: \"date\", thresholds: d3.timeYear})),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1712,"value":"A more specific time window, from yearly binning to monthly binning, allows to see that there is a peak in 2016.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1695,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.rectY(datesOfLastEdits, Plot.binX({y: \"count\"}, {x: \"date\", thresholds: d3.timeMonth})),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1716,"value":"We can see try to a moving window to see what happens per month.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1668,"value":"viewof years = rangeSlider({\n title: 'Years',\n min: 2006,\n max: 2022,\n value: [2006, 2023],\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1720,"value":"If we select specifically the 2016 to 2017 range we see peaks in July and October.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1647,"value":"Plot.plot({\n x: { \n type: \"utc\",\n domain: [Date.parse(years[0]), Date.parse(years[1])]\n }, \n marks: [\n Plot.tickX(datesOfLastEdits, {x: \"date\", strokeOpacity: 0.2 })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1698,"value":"Plot.plot({\n x: { \n type: \"utc\",\n domain: [Date.parse(years[0]), Date.parse(years[1])]\n }, \n y: {\n grid: true\n },\n marks: [\n Plot.rectY(datesOfLastEdits, Plot.binX({y: \"count\"}, {x: \"date\", thresholds: d3.timeMonth})),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1768,"value":"## Multi timescales linked","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1777,"value":"Selecting automatically up (month to year) works but not the other way around. Could pick the first item day, e.g first month of the year of the middle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1756,"value":"timeScales = [d3.timeYear,d3.timeMonth,d3.timeDay]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1786,"value":"viewof selectedScale = Inputs.range([0, 2], {value : 1, step: 1, label: \"Scale\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1758,"value":"Plot.plot({\n x: { \n type: \"utc\",\n domain: [Date.parse(years[0]), Date.parse(years[1])]\n }, \n y: {\n grid: true\n },\n marks: [\n Plot.rectY(datesOfLastEdits, Plot.binX({y: \"count\"}, {x: \"date\", thresholds: timeScales[selectedScale]})),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1759,"value":"Plot.plot({\n x: { \n type: \"utc\",\n domain: [Date.parse(years[0]), Date.parse(years[1])]\n }, \n y: {\n grid: true\n },\n marks: [\n Plot.rectY(datesOfLastEdits, Plot.binX({y: \"count\"}, {x: \"date\", thresholds: timeScales[selectedScale+1]})),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1724,"value":"Finally if we look at the data itself with e.g https://fabien.benetou.fr/Site/AllRecentChanges we can notice that dozens of pages were created then for workshops namely `WorkshopICONJuly2016` and `WorkshopICONOctober2016`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1084,"value":"This notebook is dynamic. For example you can move the slider above to select specific years or a range. Also you can change the content of code itself, e.g `PageNameTest` below, press Shift+Enter and see the visualization under it change instantly. As a test use `\"Analysis.LibrarianMoveWalls\"` and notice when it was edited. Switch back to `\"Tools.Hubs\"` and compare. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":100,"value":"PageNameTest = 'Analysis.LibrarianMoveWalls'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":954,"value":"Showing when a specific page, here ${PageNameTest}, has been edited.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":152,"value":"editsOverTime( PageTestDiffInMs )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1185,"value":"To make the visualization more interesting you can show the history a page matching your interest. For example we will search for **${keywordExample}** but you can replace with anything else.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1179,"value":"keywordExample = \"square\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2009,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1194,"value":"Page containing the **${keywordExample}** keyword :\n\n${searchExample.map( e => \"\\n- [\"+e+\"](\"+BaseURL+e.replace(\".\",\"/\")+\"?highlight=\"+keywordExample+\")\")}\n\nPS: highlight only works on the Hubs page for now (testing mode)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1445,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1209,"value":"editsOverTime( (await fetch(BaseURL+searchExample[0].replace(\".\",\"/\")+DiffEnding).then(res => res.json()) ).map( e => {return {date: e.date*1000, edit:e.edit} } ) )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1100,"value":"Top 10 pages with the most editions. You can see the quantity in the `Rev` object. For example the page **${mostRevisedPages[0].Id}** has been edited **${mostRevisedPages[0].Rev}** times. You can compare that with the 2 examples **${examplePages[0]}** and **${examplePages[1]}** edited respectively **${ wiki.Nodes[examplePages[0]].Rev}** and **${ wiki.Nodes[examplePages[1]].Rev}** times.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1638,"value":"printTable(mostRevisedPages)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":394,"value":"mostRevisedPages = Object.entries(wiki.Nodes)\n .map( e => e[1] )\n .filter( e => (!e.Id.match(/RecentChanges/) && !e.Id.match(/PmWiki\\./) ) )\n .sort( (a,b) => (a.Rev < b.Rev) )\n .slice(0,10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1163,"value":"Number of pages per group","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":623,"value":"Plot.plot({\n marks: [\n Plot.barX(pagesPerGroup, {y: \"name\", x: \"pages\"}),\n // use Plot.groupX() here instead of manually binning\n Plot.text(pagesPerGroup, {y: \"name\", x: \"pages\", text: \"name\", dx: 100, fill: \"red\"}),\n ]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1730,"value":"Note that binning is limited to quantitive date and thus can not be used on group here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1060,"value":"#### Displaying an image from a page in 3D\n\nPossible to use in VR too.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":368,"value":"numberOfPages = {\n var i=0\n for(var propertyName in wiki.Nodes){\n i++\n }\n return i\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"datesOfLastEdits = {\n var i=[]\n for(var propertyName in wiki.Nodes){\n i.push({ \"date\": wiki.Nodes[propertyName].ChangeTime*1000, \"name\": wiki.Nodes[propertyName].Id})\n }\n return i\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":574,"value":"mostRevisedPagesOfLastYear = Object.entries(wiki.Nodes)\n .map( e => e[1] )\n //.filter( e => (!e.Id.match(/RecentChanges/) && !e.Id.match(/PmWiki\\./) ) )\n .filter( e => ( e.ChangeTime < Date.parse(new Date().getFullYear())/1000 ) ) // since last year\n .filter( e => ( e.ChangeTime > Date.parse(new Date().getFullYear()-1)/1000 ) ) // since last year\n .sort( (a,b) => (a.Rev < b.Rev) )\n .slice(0,10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":466,"value":"mostRecentlyCreatedPagesOfThisYear = Object.entries(wiki.Nodes)\n .map( e => e[1] )\n //.filter( e => (!e.Id.match(/RecentChanges/) && !e.Id.match(/PmWiki\\./) ) )\n //.filter( e => ( e.ChangeTime > Date.parse(new Date().getFullYear()-1)/1000 ) ) // since last year\n .filter( e => ( e.ChangeTime > Date.parse(new Date().getFullYear())/1000 ) ) // since the beginning of this year\n .sort( (a,b) => (a.ChangeTime < b.ChangeTime) )\n .slice(0,10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":986,"value":"pageNames = Array.from(new Set( Object.entries(wiki.Nodes)\n .map( e => e[1] )\n .map( e => e.Id )\n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":572,"value":"groups = Array.from(new Set( Object.entries(wiki.Nodes)\n .map( e => e[1] )\n .map( e => e.Group )\n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":600,"value":"pagesPerGroup = {\n var pagesPerGroup = {}\n groups.map( e => pagesPerGroup[e] = 0 )\n Object.entries(wiki.Nodes)\n .map( e => e[1])\n .map( e => pagesPerGroup[e.Group]++ )\n var res = Object.entries(pagesPerGroup).map( e => { return {\"name\":e[0], \"pages\":e[1]}} )\n return res\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"pageTextMetadata = wiki.Nodes[PageNameTest]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"PageTestDiff = fetch(BaseURL+PageNameTest.replace(\".\",\"/\")+DiffEnding).then(res => res.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1643,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":726,"value":"PageTestDiffInMs = PageTestDiff.map( e => {return {date: e.date*1000, edit:e.edit} } )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"PageTestImage = fetch(BaseURL+PageNameTest.replace(\".\",\"/\")+ImageEnding).then(res => res.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1063,"value":"### Example of dynamics page with 3D content","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1862,"value":"viewof search = Inputs.search(pageNames, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1864,"value":"viewof select = Inputs.select(search, {label: \"Select one\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1866,"value":"viewof range = Inputs.range([0, wiki.Nodes[select].Targets ? wiki.Nodes[select].Targets.length : 0], {value: 0, step : 1, label: \"Maximum linked pages\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1913,"value":"url1 = fetch(BaseURL+select.replace(\".\",\"/\")+ImageEnding).then(res => res.json()).then( e => e.res )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1987,"value":"/*\n Promise.all( \n wiki.Nodes[select].Targets.map( url => fetch(BaseURL+url.replace(\".\",\"/\")+ImageEnding) )\n).then(responses =>\n Promise.all(responses.map(response => response.json()))\n).then(data =>\n data\n)\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1920,"value":"/*\n urlchildren = {\n var urls = []\n wiki.Nodes[select].Targets.map( url => \n fetch(BaseURL+url.replace(\".\",\"/\")+ImageEnding).then(res => res.json()).then( e => urls.push( e.res ) ) \n ) \n return urls\n}\n */\n// result is asynchronous, might prefer Promise.all()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1878,"value":"\n

\n \n \n \n \n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":998,"value":"\n

\n \n \n \n \n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1504,"value":"Delaying the **Save GLB** button due to timing issues. Should instead hook back to the scene, possible with a generator. If you see the error message `aframe.scenes[0] not found` then enter the cell and run it again (Shift+Enter) shortcut as this will allow for the AFrame scene to \"unpack\" to a threejs Object3D and can then be saved. For now delaying by 5 seconds.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1534,"value":"glbExport = {\n await Promises.delay(5000);\n // could also consider scene as a mutable that get set by an AFrame component.\n // see https://observablehq.com/@observablehq/introduction-to-mutable-state\n if (!aframe.scenes[0]) return DOM.download(null, 'empty', 'Disable (scene not yet ready)');\n const exporter = new THREE.GLTFExporter();\n const glb = await new Promise(resolve =>\n exporter.parse([aframe.scenes[0].object3D], resolve, {\n binary: true,\n truncateDrawRange: false\n })\n );\n const blob = new Blob([glb], { type: 'model/gltf-binary' });\n return DOM.download(blob, 'observable-export.glb', 'Save GLB');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1395,"value":"The saved file can be tested in https://gltf-viewer.donmccurdy.com","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":117,"value":"Displaying an image in text ![Alt text](${PageTestImage.res} \"a title\")","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":21,"value":"Instead of fetch-ing a data source one could also consider SSE, cf Generators.observe() on an EventSource() in https://observablehq.com/d/bb29b94606d32b64","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":23,"value":"See also \n\n- https://observablehq.com/@utopiah/d3-pim-graph\n- https://observablehq.com/@utopiah/d3-in-3d-with-three-forcegraph-example\n- https://observablehq.com/@utopiah/pim-as-aframe-d3-observable-notebook\n- https://fabien.benetou.fr/Analysis/LibrarianMoveWalls\n - with https://observablehq.com/d/a953b5ba56b11efd in mind\n- https://fabien.benetou.fr/Wiki/Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":996,"value":"### Tests","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1039,"value":"pageIndexURL = \"https://vatelier.benetou.fr/MyDemo/newtooling/pageindex.json\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1851,"value":"Should provide a similar index of external links, as done in the past for the reverse search.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1475,"value":"pageText = fetch(BaseURL+PageNameTest.replace(\".\",\"/\")+\"?action=source\").then(res => res.text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1846,"value":"#### Live search","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1842,"value":"This could become an in browser shortcut with e.g Tridactyl using `:js var items = document.querySelectorAll(':hover'); alert( items[items.length-1].innerText )` replacing the alert by a search in the index.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1835,"value":"items = document.querySelectorAll(':hover')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1838,"value":"items[items.length-1].innerText","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1830,"value":"Exploring if every single word read could be checked live against the index of the wiki. If done both accurately (giving back useful pages in manageable quantities) and efficiently (e.g faster than reading time) could be done for any document read and possibly live conversations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1796,"value":"testTextParagraph = \"‘‘Here is the underlying idea of GPT-3,’’ Sutskever said intently, leaning forward in his chair. He has an intriguing way of answering questions: a few false starts — ‘‘I can give you a description that almost matches the one you asked for’’ — interrupted by long, contemplative pauses, as though he were mapping out the entire response in advance.\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1798,"value":"testTextParagraphCleaned = Array.from(new Set( testTextParagraph.split(\" \").map( e => e.replace(/\\W/g, '').toLowerCase() ).sort().filter( e => e.length > 2) ))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1816,"value":"testTextParagraphCleaned.map( e => searchWithinIndex(e) ).filter( (e) => e.length > 0 && e.length < 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1854,"value":"See also https://fabien.benetou.fr/Wiki/LearningSearch and https://fabien.benetou.fr/Tools/Vimperator including past work with dedicated engines like SphinxSearch or SQLite FTS5 Extension.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1242,"value":"### Visualizations as functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1232,"value":"editsOverTime = (data) => Plot.plot({\n color: {\n legend: true\n },\n x: { \n type: \"utc\",\n domain: [dateOfOldestPageCreation, dateOfLatestPageCreation]\n }, \n marks: [\n Plot.tickX( data, {x: \"date\", strokeOpacity: 0.2, stroke: \"edit\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1219,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1141,"value":"searchWithinIndex = (keyword) => {\n var res = []\n pageIndex.map( e => {\n if (e.content.match(keyword) ) res.push(e.pagename) \n })\n return res\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":969,"value":"### Intermediary values","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1140,"value":"pageIndex = fetch(pageIndexURL).then(res => res.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"wiki = fetch(WikiURL).then(res => res.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":796,"value":"dateOfOldestPageCreation = datesOfLastEdits.map( e => e.date).sort()[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":836,"value":"dateOfLatestPageCreation = datesOfLastEdits.map( e => e.date).sort().filter( e => Number(e)).reverse()[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1117,"value":"examplePages = [\"Analysis.LibrarianMoveWalls\", \"Tools.Hubs\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1417,"value":"searchExample = searchWithinIndex(keywordExample)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"### Configuration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"BaseURL = 'https://fabien.benetou.fr/'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"DiffEnding = '?action=diffjson'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"ImageEnding = '?action=serverrender'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"WikiURL = 'https://vatelier.benetou.fr/MyDemo/newtooling/wiki_graph.json?#cachebusting'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":553,"value":"Note that Observable seems to cache the dataset. You can change the hash at the end to force a download or even add `Date.now()` to always do so, assuming your dataset is live. Note sure what's the thinking behind this. Maybe the web server provide the dataset doesn't give the right header, e.g modified date.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1028,"value":"aframe = require(\"https://aframe.io/releases/1.3.0/aframe.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1283,"value":"Thanks to https://observablehq.com/@severo/roads-network-in-three-js on how to potentially save a glTF/glb file that can then be loaded in other WebXR tools e.g Hubs or Spoke.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1342,"value":"THREE = {\n const threeVersion = '0.123';\n const THREE = await require(`three@${threeVersion}`);\n for (const path of modulePaths) {\n const module = path.split('/').pop();\n THREE[\n module\n ] = await import(`https://unpkg.com/three@${threeVersion}/examples/jsm/${path}.js`).then(\n m => (module ? m[module] : m)\n );\n }\n return THREE;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1360,"value":"modulePaths = ['controls/OrbitControls', 'exporters/GLTFExporter']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1636,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1671,"value":"import {rangeSlider} from '@mootari/range-slider@1326'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1270,"value":"### Improvement ideas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1273,"value":"- completion on pagename\n- PmWiki skin with visualization to test in context\n - can we doth with URL parameters to be able to specific a specific cell to embbed\n- replace the Save GLB button by a saving to URL option, see e.g SSE on Glitch\n - done before with https://twitter.com/utopiah/status/1495713341133791242\n - then embbed and refresh directly from Hubs too\n- interface on search discussion from https://twitter.com/utopiah/status/1516765092502716425","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"