2f:null 30:["$","title",null,{"children":"Experimenting the JavaScript InfoVis Toolkit Integrating a carousel | Figay | Observable"}] 35:Tdc9, html`

`36:Tbcb,TreemapVisualizationScript = { 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: 1100, 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) { mutable CurrentArticle = node.id; 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 viz; }37:T40e,CreateJsonFrom = function createJson(data) { const dataSetName = "Dr Nicolas Figay's LinkedIn Articles"; var jsonDataSet = { children: [], data: { $color: "grey" }, id: "root", name: dataSetName }; var articleNumber = 0; for (let i = 0; i < Years.length; i++) { jsonDataSet.children[i] = { children: [], data: { $color: ColorOfYears[i], $area: AreaNumericCriteriaPerYear[Years[i]], articleTitle: "title" }, name: Years[i], id: Years[i], title: Years[i] }; jsonDataSet.children[i].children = YearsWithArticles.get(Years[i]) .reverse() .map(currentElement => ({ id: articleNumber++, name: currentElement.Title, children: [], data: { image: currentElement.ImageURL, link: currentElement.ArticleURL, articleTitle: currentElement.Title, $color: ColorOfYears[i], //"#C0C0C0", $area: currentElement.Likes } })); } return jsonDataSet; }38:[{"id":"90d6a909eec9bd72a8f42958acf02883dcf67cd7ae3fcfc0daae597fc42cb898f9f9c37e4f5ea1c981346d94c57a20ef46c2e0d1794ce4b263ca88d5aba8b26e","href":"https://static.observableusercontent.com/files/90d6a909eec9bd72a8f42958acf02883dcf67cd7ae3fcfc0daae597fc42cb898f9f9c37e4f5ea1c981346d94c57a20ef46c2e0d1794ce4b263ca88d5aba8b26e","name":"LinkedIn articles figures.tsv","type":"text/tab-separated-values","lastModified":1607939556416.945,"size":24561},{"id":"2de75e86ffb81decc08cfd471f23048f59e33ba7f19fe0f4cf2e121d927d49f2ee846451f139eca6d607cec3be571eb84184ad3065f9fda4ede6ae8b8b6558cf","href":"https://static.observableusercontent.com/files/2de75e86ffb81decc08cfd471f23048f59e33ba7f19fe0f4cf2e121d927d49f2ee846451f139eca6d607cec3be571eb84184ad3065f9fda4ede6ae8b8b6558cf","name":"LinkedIn articles figures@5.tsv","type":"text/tab-separated-values","lastModified":1608041219271.959,"size":24621},{"id":"ff5db9a710d8e8082c8b52c6967e701350e584809fcb69c3b93d496cc0eebb6eb9414e50064433316e893fb270077745425ddd29a4ccfb2a6efa2d6d2f0363c9","href":"https://static.observableusercontent.com/files/ff5db9a710d8e8082c8b52c6967e701350e584809fcb69c3b93d496cc0eebb6eb9414e50064433316e893fb270077745425ddd29a4ccfb2a6efa2d6d2f0363c9","name":"LinkedIn articles figures@8.tsv","type":"text/tab-separated-values","lastModified":1633677556755.218,"size":26565},{"id":"ed90100c69a27398badab43c06e432051cfcedd302e8cd8e99da4d766ca7b5064ee03654759a1b13ee330fd80a85ad69256bac5a738de52709f2dae37938a264","href":"https://static.observableusercontent.com/files/ed90100c69a27398badab43c06e432051cfcedd302e8cd8e99da4d766ca7b5064ee03654759a1b13ee330fd80a85ad69256bac5a738de52709f2dae37938a264","name":"LinkedIn articles figures@9.tsv","type":"text/tab-separated-values","lastModified":1633850816579.066,"size":26538},{"id":"61ba7bba139f138e777dbe533d85bef9e059b9a4b05d2ae6b8a658c387f4b4bd9704dd243dc68c166c5cece6280625261e5f670977dd4622a3261e63fd753ed1","href":"https://static.observableusercontent.com/files/61ba7bba139f138e777dbe533d85bef9e059b9a4b05d2ae6b8a658c387f4b4bd9704dd243dc68c166c5cece6280625261e5f670977dd4622a3261e63fd753ed1","name":"LinkedIn articles figures@12.tsv","type":"text/tab-separated-values","lastModified":1641321972666.899,"size":27665}] 33:{"id":"2bee3ff1ba7059e1","slug":"experimenting-the-javascript-infovis-toolkit-integratin","title":"Experimenting the JavaScript InfoVis Toolkit Integrating a carousel","thumbnail":"aaf5cb95aaefe8f8224890a8c40f6c1684e9469eb129dd36743c48e3522cd42f","access_level":"public","create_time":"$D2020-12-09T14:24:56.205Z","update_time":"$D2022-01-04T18:46:11.555Z","view_time":null,"first_public_time":"$D2020-12-13T15:36:48.782Z","fork":{"id":"18bddcdf653b2d28","slug":"experimenting-the-javascript-infovis-toolkit-feeding-dat","title":"Experimenting the JavaScript InfoVis Toolkit Feeding Data Automatically","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":2377,"publish_version":null,"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":0,"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 Integrating a carousel","cells":[{"id":0,"value":"md`# Experimenting the JavaScript InfoVis Toolkit Integrating a carousel\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"html`\n

\nThe different considered resources are:\n

CSS based Carousel (Done)
https://wlada.github.io/vue-carousel-3d/?ref=madewithvuejs.com (Done)
https://flickity.metafizzy.co/options.html#carousel-cell3 (Plan)

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1751,"value":"html`\n

1. A CSS based Carousel

\nQuite nice and simple but not is it appropriate to hour purpose, in particular when having to deal with interaction or modification according to some events.
\nIf having a list of image, presented sequentially in an HTML document, it can however be consider that it can be presented as such a carousel just adding such a stylesheet writen with CSS.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2030,"value":"ImagesCarousel=ArticlesData.map(currentElement => ({ 'URL': currentElement.ImageURL})).slice(0,8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2137,"value":"mutable CurrentArticle = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1783,"value":"html`\n

2. Vue-carousel-3d

\nFunctionally, this components seems to be appropriate to what is aimet at

\nIt is implied to include Vue and Carousel 3D. It tooks some time for solving how to referenced properly the libraries.\n

\nIt was also not obvious finding the way to provide images to the carousel. The mechanism is based on Vue.js, and I didn't find examples in carousel itself. I fortunately found something when looking for \"Vue.js image v-for bind\" on internet.\n
\n
\nI've now to find the mechanisms for linking the TreeMap and the Carousel together: clicking on an article in the TreeMap should put the focus on the article on the Carousel. Clicking on the Carousel should highlight the TreeMap cell with the article having the focus. Etc.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1880,"value":"treemap = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2182,"value":"carousel3 = html`

\n \n \n \n \n{{slide.title}}
Index:{{i}} Publication Date:{{slide.date}}\n \n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2167,"value":"vue = new Vue({\n el: carousel3,\n data: {\n slides: Slides\n },\n components: {\n 'carousel-3d': c,\n slide: s\n },\n methods: {\n goToSlide(index) {\n this.$refs.mycarousel.goSlide(index);\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1796,"value":"html`\n

3. Flickity

\nFunctionally, this components seems to be appropriate to what is aime at

\nIt is implied to include Flikity and here again not obvious. It tooks some time for solving how to refenrenced properly the libraries.\n

\nThe problem here is to make the script applying on the main-caroussel div\n
\n
\nCould take time, so other carousel components where investigated.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1737,"value":"html`\n

Annexes: variables, scripts and functions

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1707,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1690,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1652,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2067,"value":"Json = {\n return CreateJsonFrom(ArticlesData);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1656,"value":"ArticlesData = FileAttachment(\"LinkedIn articles figures@12.tsv\").tsv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2358,"value":"viewof tableArticles = Inputs.table(ArticlesData, {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2072,"value":"Slides = ArticlesData.map(currentElement => ({\n path: currentElement.ArticleURL,\n URL: currentElement.ImageURL,\n title: currentElement.Title,\n date: currentElement.PublicationDate\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":2081,"value":"carousel3d=require(\"vue-carousel-3d-update@0.1.25/dist/vue-carousel-3d.min.js\",\"https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js\").catch(()=>window.carousel3d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2084,"value":"c=carousel3d.Carousel3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2087,"value":"s=carousel3d.Slide","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2078,"value":"ArticlesURLs=ArticlesData.map(currentElement => ({'name': currentElement.ArticleURL}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1659,"value":"columns=ArticlesData.columns","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1662,"value":"Years=Object.keys(ArticlesPerYear)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1666,"value":"ArticlesPerYear=ArticlesData.reduce((accumulator, currentValue) => {\n const count = accumulator[currentValue.Year] || 0;\n accumulator[currentValue.Year] = count + 1; \n return accumulator;}, {});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1669,"value":"ViewsPerYear=ArticlesData.reduce((accumulator, currentValue) => {\n const count = accumulator[currentValue.Year] || 0;\n accumulator[currentValue.Year] = count + parseInt(currentValue.Views);\n return accumulator;\n}, {});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1672,"value":"LikesPerYear=ArticlesData.reduce((accumulator, currentValue) => {\n /*\n Get the count of Likes that we have seen for this Year so far.\n \n If this is the first time we are seeing this Year, then\n accumulator[currentValue.Year] will return undefined, which evaluates\n to false, so count is given the value of the right side of the\n or operator (||), which is 0.\n */\n const count = accumulator[currentValue.Year] || 0;\n \n // update the count for this year\n accumulator[currentValue.Year] = count + parseInt(currentValue.Likes);\n \n return accumulator;\n}, {}); // an empty object, {}, is our initial value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"CommentsPerYear=ArticlesData.reduce((accumulator, currentValue) => {\n /*\n Get the count of Comments that we have seen for this Year so far.\n \n If this is the first time we are seeing this Year, then\n accumulator[currentValue.Year] will return undefined, which evaluates\n to false, so count is given the value of the right side of the\n or operator (||), which is 0.\n */\n const count = accumulator[currentValue.Year] || 0;\n \n // update the count for this year\n accumulator[currentValue.Year] = count + parseInt(currentValue.Comments);\n \n return accumulator;\n}, {}); // an empty object, {}, is our initial value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1678,"value":"YearsWithArticles = d3.group(ArticlesData, d => d.Year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1681,"value":"AreaNumericCriteriaPerYear=LikesPerYear","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1687,"value":"$$jit = require(\"https://philogb.github.io/jit/static/v20/Jit/jit-yc.js\").catch(\n () => window.$jit\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2075,"value":"Vue=require(\"https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"css4treemap = 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":1710,"value":"ColorOfYears=d3.quantize(t => colorToHex(d3.interpolateSpectral(t * 0.8 + 0.1)), Years.length).reverse()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1713,"value":"function colorToHex(color) {\n if (color.substr(0, 1) === '#') {\n return color;\n }\n var digits = /(.*?)rgb\$(\\d+), (\\d+), (\\d+)\$/.exec(color);\n \n var red = parseInt(digits[2]);\n var green = parseInt(digits[3]);\n var blue = parseInt(digits[4]);\n \n var rgb = blue | (green << 8) | (red << 16);\n return digits[1] + '#' + rgb.toString(16).padStart(6, '0');\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2236,"value":"html`\n

\nFor what concerns dates and javascript, a reference to consider is How to sort array by date with Javascript
\nFor what concerns usage of vue.js, a reference to consider is Using Vue with Observable\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"