2e:null 2f:["$","title",null,{"children":"Experimenting the JavaScript InfoVis Toolkit | Figay | Observable"}] 34:Tbcb,TreemapVisualizationScript2={tm02; 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: 978, 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

" + 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'; } }} ); viz01.loadJSON(json); viz01.refresh(); return ("Ok"); }36:T734,{ var json = { 'label': ['label A', 'label B', 'label C', 'label D'], 'values': [ { 'label': 'date A', 'values': [20, 40, 15, 5] }, { 'label': 'date B', 'values': [30, 10, 45, 10] }, { 'label': 'date E', 'values': [38, 20, 35, 17] }, { 'label': 'date F', 'values': [58, 10, 35, 32] }, { 'label': 'date D', 'values': [55, 60, 34, 38] }, { 'label': 'date C', 'values': [26, 40, 25, 40] }] }; var json2 = { 'values': [ { 'label': 'date A', 'values': [10, 40, 15, 7] }, { 'label': 'date B', 'values': [30, 40, 45, 9] }, { 'label': 'date D', 'values': [55, 30, 34, 26] }, { 'label': 'date C', 'values': [26, 40, 85, 28] }] }; var areaChart = new $jit.AreaChart({ //id of the visualization container injectInto: 'infovis', //add animations animate: true, //separation offsets Margin: { top: 5, left: 5, right: 5, bottom: 5 }, labelOffset: 10, //whether to display sums showAggregates: true, //whether to display labels at all showLabels: true, //could also be 'stacked' type: 'stacked', //label styling Label: { type: 'HTML' , size: 13, family: 'Arial', color: 'white' }, //enable tips Tips: { enable: true, onShow: function(tip, elem) { tip.innerHTML = "" + elem.name + ": " + elem.value; } }, //add left and right click handlers filterOnClick: true, restoreOnRightClick:true }); //load JSON data. areaChart.loadJSON(json); }37:[{"id":"ab26cabe78ae137ea6984abe7c3b4cb157658f669ac7aea7fa4ec40ebb3b7b86db369b2ac76bc9f80d1ffc94311dc0e9ca6fc14049227f0738d99d5f7a436137","href":"https://static.observableusercontent.com/files/ab26cabe78ae137ea6984abe7c3b4cb157658f669ac7aea7fa4ec40ebb3b7b86db369b2ac76bc9f80d1ffc94311dc0e9ca6fc14049227f0738d99d5f7a436137","name":"LinkedInArticles_20201201.json","type":"application/json","lastModified":1606861042341.877,"size":37765}] 32:{"id":"1068e18d1eae9b33","slug":"experimenting-the-javascript-infovis-toolkit","title":"Experimenting the JavaScript InfoVis Toolkit","thumbnail":"6668b28b615c3b67c10d8946de39d63827d8c1832174e803fb715ca669ba5153","access_level":"public","create_time":"$D2020-11-17T09:48:19.782Z","update_time":"$D2020-12-04T08:16:18.626Z","view_time":null,"first_public_time":"$D2020-11-17T23:26:24.721Z","fork":false,"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":441,"publish_version":441,"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","cells":[{"id":0,"value":"md`# Experimenting the JavaScript InfoVis Toolkit\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":"html`\n

LinkedIn Articles

\nIn this example a static JSON tree representing LinkedIn articles grouped by publication year. It aims at studying how Jit.js can be integrated and adapted to Observable, and to assess workability of this combination.

\nLeft click to set a node as root for the visualization.
\nRight click to set the parent node as root for the visualization.
\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"attachment = FileAttachment(\"LinkedInArticles_20201201.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":" json=FileAttachment(\"LinkedInArticles_20201201.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":271,"value":"tm02=html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"tm01=html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"md`\nLet's note that if labels appear on the second treemap, they don't appear on the first one, which is defined exactly the same way. Things happen like if label is applied to only one canvas. There are also label issues with the following chart. Should we then restrict to a single visualization per notebook? :(\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"tm=html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"