2f:null 30:["$","title",null,{"children":"Experimenting the JavaScript InfoVis Toolkit Changing variable sizing the TM | Figay | Observable"}] 35:T527,html`

LinkedIn Articles

In this series of notebooks, data are representing my LinkedIn articles grouped by publication year. The aim of the series the notebook belongs to is to identify how Jit.js can be integrated and adapted to Observable, and to assess workability of this combination. The data are captured in a static JSON tree attached as a file to the notebook. The structure is the one expected for Jit Treemaps.
In this particular notebook, the purpose is to change the numeric criteria used for the sizing of the JIT visualization. In previous notebooks of the series, it was the number of article per year. Here it is the number of views of the articles which is considered.
So in addition to highlithing interest of treemaps in terms of information visualization, the notebook also shows how the dataset should be changed.
One arising question to be answered: can we deal differently with data capture, in order to switch between views through a parameter. The next version of this notebook will integrate the proposed solution.
Left click to set a node as root for the visualization.
Right click to set the parent node as root for the visualization.

`36:T407,html`

Here two parameters concerning the canvas where the treemap is drawn were put a observable parameter you can modify in your notebook. When changed, the treemap is drawn again, but the place the labels are drawn and the place the boxes are drawn is not the same, i.e. there is an unexpected behavior. So the idea here is to identify looking at the code of Jit.js why we do have such an issue. I don't know at this stage if it can be corrected or not. If not, it means that interacting with the treemap will have to be restricted to Jit itself - which provides such mechanisms - but that it will be difficult taking advantage of the observable one. Let's follow...
var viz = new $jit.TM.Squarified(
{
//Where to inject the canvas. Any div container will do.
'injectInto':'infovis2',
width: width ,//978,
height: height ,//600 ,
...
width and height were made notebook variables (cells) with values which can be modified with sliders.

`37:Tbf3,TreemapVisualizationScript1={tm; var labelType, useGradients, nativeTextSupport, animate; (function f1() { var ua = navigator.userAgent, iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i), typeOfCanvas = typeof HTMLCanvasElement, nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), textSupport = nativeCanvasSupport && (typeof document.createElement('canvas').getContext('2d').fillText == 'function'); //I'm setting this based on the fact that ExCanvas provides text support for IE //and that as of today iPhone/iPad current text support is lame labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML'; nativeTextSupport = labelType == 'Native'; useGradients = nativeCanvasSupport; animate = !(iStuff || !nativeCanvasSupport); })(); var Log = { elem: false, write: function(text){ if (!this.elem) this.elem = document.getElementById('log'); this.elem.innerHTML = text; this.elem.style.left = (200 - this.elem.offsetWidth / 2) + 'px'; } }; var viz = new $jit.TM.Squarified( { //Where to inject the canvas. Any div container will do. 'injectInto':'infovis2', width: width ,//978, height: height ,//600 , cushion: useGradients, //parent box title heights titleHeight: 15, //enable animations animate: animate, //box offsets offset: 0, //Attach left and right click events Events: { enable: true, onClick: function(node) { if(node) viz.enter(node); }, onRightClick: function() { viz.out(); } }, duration: 1000, //Enable tips Tips: { enable: true, //add positioning offsets offsetX: 20, offsetY: 20, //implement the onShow method to //add content to the tooltip when a node //is hovered onShow: function(tip, node, isLeaf, domElement) { var html = "

" + node.id + "

"; var data = node.data; if(data.NbConstruct) { html += "

"+"Number of views " + data.NbConstruct+ "

"; } html += "

"+data.articleTitle+ "

"; if(data.image) { html += ' Smiley face

"; } tip.innerHTML = html; } }, onCreateLabel: function(domElement, node){ domElement.innerHTML = node.name; var style = domElement.style; style.display = ''; style.border = '1px solid transparent'; domElement.onmouseover = function() { style.border = '1px solid #9FD4FF'; }; domElement.onmouseout = function() { style.border = '1px solid transparent'; } }} ); viz.loadJSON(json); viz.compute(); viz.refresh(); return ("OK"); }38:[{"id":"b38bcb5c232c8d3972ae2388e557b63735e963c2a2eedc601f3541cd06146dd872ef33e2c62cbc524f99e1c3bdd8184ea0eac107134637a1a1c617db3c8e9e43","href":"https://static.observableusercontent.com/files/b38bcb5c232c8d3972ae2388e557b63735e963c2a2eedc601f3541cd06146dd872ef33e2c62cbc524f99e1c3bdd8184ea0eac107134637a1a1c617db3c8e9e43","name":"LinkedInArticles_Views_20201204@2.json","type":"application/json","lastModified":1607089267071.374,"size":38131}] 33:{"id":"e775b7cc64eb35ba","slug":"experimenting-the-javascript-infovis-toolkit-changing-va","title":"Experimenting the JavaScript InfoVis Toolkit Changing variable sizing the TM","thumbnail":"cea0d93d6522c241008ae7c731ba203f56d8cc15620588bfb6710cc9869d980f","access_level":"public","create_time":"$D2020-12-04T09:50:42.916Z","update_time":"$D2020-12-04T13:45:13.445Z","view_time":null,"first_public_time":"$D2020-12-04T13:48:48.157Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"37f7a7f77e187b5e","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/071fc1ce1d8fbec71d4409987642a0c881b8a3651627b51e2cdaa7fcde295a10","tier":"starter_2024"},"version":539,"publish_version":539,"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":{"id":"43e39cc6b8a73145","slug":"javascript-infovis-toolkit","title":"Javascript Infovis Toolkit","owner":{"id":"37f7a7f77e187b5e","login":"nfigay","name":"Figay"}},"type":"notebook","body":{"title":"Experimenting the JavaScript InfoVis Toolkit Changing variable sizing the TM","cells":[{"id":0,"value":"md`# Experimenting the JavaScript InfoVis Toolkit Changing variable sizing the TM\nRealized with the help of Fil\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$$jit = require(\"https://philogb.github.io/jit/static/v20/Jit/jit-yc.js\").catch(\n () => window.$jit\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"attachment = FileAttachment(\"LinkedInArticles_Views_20201204@2.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":" json=FileAttachment(\"LinkedInArticles_Views_20201204@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`\nThe used CSS stylesheets are referenced here.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"tm=html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"viewof height = slider({\n min: 100,\n max: 800,\n step: 1,\n value: 600,\n title: \"Canvas height\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"viewof width = slider({\n min: 600,\n max: 1000,\n step: 1,\n value: 978,\n title: \"Canvas width\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"html`\n

Here we have to deal with the differences in terms of numbers of views, wich can differ with a factor 100.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 34:"$33:body"