2f:null 30:["$","title",null,{"children":"Experimenting the JavaScript InfoVis Toolkit Feeding Data Automatically | Figay | Observable"}] 35:T9fd,html`

LinkedIn Articles

In this series of notebooks, data are representing my LinkedIn articles. 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 study how the Json data can be generated automatically from a TSV file containing the captured data about the articles (by hand as LinkedIn don't allow any data capture or query by an automate). According to the targeted JIT viz (Treempap, Hypertree, Graph, etc.), the structure of the data to produce and the data can be different. However, as they have to be updated regularly - it reflects number of views, likes, comments at a given date - it is quite time consumming to produce new json datasets.

The adopted approach consisted in identifying the Obervable features (many comes from D3.js but also from javascript itself) for manipulating data. At this stage, the identified resources are the following:

The first one provides the basics of data processing and transformation using JavaScript and D3. From tabular data as input, it shows how data can be transformed in order to derive the information that you want to visualize. Typical transformations include selecting a subset of features, creating new features, filtering, sorting, and aggregating.

The second one illustrates the usage of data map

The third one explains how to parse TSV files, how to read TSV, other flat files or JSON files and how to load multiple files

So the idea is first to collect regularly the data in a worksheet from which a CSF file can be extracted like the following one.
Here we can calculate complementary needed data automatically which will be needed for the visualization, or not: such calculation can also be made directly using some data transformation scripts in side the notebook itself from a simple TSV.

`36:T1415,html`

What will be important then is to idenfify precisely, for all the targeted representations from the TSV file, what is to be produced for the different visualisation.

In a first stage, let's assume we will generate it with the worksheet tool, so it will allow to validate we provide the good data.

In a second phase, we can see how this data can be generate from scripts directly in a notebook, and compare the two different approaches.

The idea is to play with:

All the vizs proposed by JIT.js, i.e. treemap,sunburst, icycle, force directed graph, spacetree, RGraph and other advanced visualisations
The vis.js visualisations, i.e. networks and timelines, with eventually the integration of dataset feature
PlantUML vizs i.e. static graphs with automated layouts
and of couse a D3.js visualization as I've to admit I'm a new comer with D3.js, and I would like to assess it compared to what I already know.

For this specific notebook, the topic will be mainly the production of the data file as a TSV one, and the transformation for one JIT.js Treemap viz as at this stage, I was not able to produce more than one per notebook (hope it will be soon solved).

The data to have for the Treemap

For analysing and communicating about the publication, we would like to show and highlight:

the number of published articles per year
the number of views per article and per year
the number of likes per article and per year
the number of views per article (without publication years)
the the number of published article per topics, through keywords of a given list

For each, a dedicated viz and notebook will be provided in a observable collection allowing to collect what can be produced.

The data to have for vis.js

For analysing and communicating about the publication, we would like to show and highlight:

the timeline of the published articles
the timeline of the published articles per topic
A force directed graph of the published article per topic
A force directed graph of the published article per topic with the size of the noddes proportinal to the number of views
the the number of published article per topics, through keywords of a given list

The content of the TSV file and its processing

So in the TSV file, we will have Title, Year, Views, Likes, Comments and Publication Date.
The format of the publication date is to be provided in order to be useable with the timeline.

How to import the produced TSV LinkedIn articles figures file is described in Reading in data. It is first needed to include d3.js, adding a cell with:
d3 = require('d3')

We can then create the function which will transform the ArticlesData in Json as input for the treemap we want to create, let's call it CreateJsonFrom. It is defined in the following cells, the one with as result:

(CreateJsonFrom =ƒ(data))

The code it contains is something like:

CreateJsonFrom = ( function createJson(data) {
... transformation definition for creating JsonDataSet ...
return JsonDataSet;
}

From the flat structure containing a list of articles, we want a hierarchical one.

The top node is about visualisation, and the associated properties are those we would like for describing it for the users.

The first level is a catergy, related to the year of publication, and partionning the articles. We need to create a set of years (classes), with associated articles as children of second level. We can in addition provide a name for the category, the value we want to consider for sizing each category within the treemap. It can be the number of articles or or thenumber of views for the set of articles.

The last layer concerns the leaves of the treemap, i.e. the individuals we display through the hierarchy associated to the treemap.

Using data processing features of javascript or D3.js, we have to identify how from the flat initial data set in a table we can build the targeted hierarchical structure expected by the Treemaps of jit.js.

I experimented first theintermediate data set we can easily create, such as the list of years, the number of published articles/views/likes/comment of these articles by using reduce on the ArticlesData. I named them ArticlesPerYear, ViewsPerYear, LikesPerYear and CommentPerYear.

I didn't find a function that can easily produce the hierarchical structure from a flat file. It seemed to me that the approach should be to start from the lower level, and than creating the upper levels till the tope/root.

`37:T463,CreateJsonFrom = ( function createJson(data) { const dataSetName="Dr Nicolas Figay's LinkedIn Articles"; var jsonDataSet={children:[], data:{$color: "grey"}, id:"root",name:dataSetName}; var articleNumber=1; 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]).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:Tbdc,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: 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

"; } 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"); }39:T420,chart = { const arcs = pie(dataset); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); svg.append("g") .attr("stroke", "white") .selectAll("path") .data(arcs) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .append("title") .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("text-anchor", "middle") .selectAll("text") .data(arcs) .join("text") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .call(text => text.append("tspan") .attr("y", "-0.4em") .attr("font-weight", "bold") .text(d => d.data.name)) .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan") .attr("x", 0) .attr("y", "0.7em") .attr("fill-opacity", 0.7) .text(d => d.data.value.toLocaleString())); return svg.node(); }3a:[{"id":"ab26cabe78ae137ea6984abe7c3b4cb157658f669ac7aea7fa4ec40ebb3b7b86db369b2ac76bc9f80d1ffc94311dc0e9ca6fc14049227f0738d99d5f7a436137","href":"https://static.observableusercontent.com/files/ab26cabe78ae137ea6984abe7c3b4cb157658f669ac7aea7fa4ec40ebb3b7b86db369b2ac76bc9f80d1ffc94311dc0e9ca6fc14049227f0738d99d5f7a436137","name":"LinkedInArticles_20201201.json","type":"application/json","lastModified":1607092623622.753,"size":37765},{"id":"de50f498c97aa923dd85ffbf4935dec93d6686b5fcde3ee14a1c69d82e015b3707440b41a0945b0a82fbbb33cc789e3e90d176a570975e31e896befbefb345c8","href":"https://static.observableusercontent.com/files/de50f498c97aa923dd85ffbf4935dec93d6686b5fcde3ee14a1c69d82e015b3707440b41a0945b0a82fbbb33cc789e3e90d176a570975e31e896befbefb345c8","name":"LinkedIn articles figures@16.tsv","type":"text/tab-separated-values","lastModified":1648327390345.309,"size":27668},{"id":"5ec5be88a66076b7ffee502d49c68567f97d9524bc6f0160ded52496f4412ddce1cac0b13cfae32766a8a2dfa9856fd3fda5561960296c30d6181762ac57a732","href":"https://static.observableusercontent.com/files/5ec5be88a66076b7ffee502d49c68567f97d9524bc6f0160ded52496f4412ddce1cac0b13cfae32766a8a2dfa9856fd3fda5561960296c30d6181762ac57a732","name":"LinkedIn articles figures@17.tsv","type":"text/tab-separated-values","lastModified":1650794930386.551,"size":27669},{"id":"95b12a96b452806d18c3c7b9c99e1b9b892cea4315dabc1e6447169307774ba26ec865288425582a8bbf86c9ab880f1e656f48f23d5ab511fdd3efafe142a609","href":"https://static.observableusercontent.com/files/95b12a96b452806d18c3c7b9c99e1b9b892cea4315dabc1e6447169307774ba26ec865288425582a8bbf86c9ab880f1e656f48f23d5ab511fdd3efafe142a609","name":"LinkedIn articles data 2020-12-04.png","type":"image/png","lastModified":1607094901094.609,"size":144353},{"id":"ceeb47a9cad37f710a5ffaac601b2543b0ee318f214856c400b2f44b256a756e9ceb662418c078f7dd68fab147760fc8e6d85ade6b57fcd0c8bc9ff95e9ad779","href":"https://static.observableusercontent.com/files/ceeb47a9cad37f710a5ffaac601b2543b0ee318f214856c400b2f44b256a756e9ceb662418c078f7dd68fab147760fc8e6d85ade6b57fcd0c8bc9ff95e9ad779","name":"LinkedIn articles figures@3.csv","type":"text/csv","lastModified":1607100331596.617,"size":6952},{"id":"9f5e65f9c7f13d92498bda2cc16fd6fc838a6ce0e6078a6da7dfb18b7012765c9ea7353562817ed14fbdd0403b00e0694fb7228d8bf60786eaa65be519156d43","href":"https://static.observableusercontent.com/files/9f5e65f9c7f13d92498bda2cc16fd6fc838a6ce0e6078a6da7dfb18b7012765c9ea7353562817ed14fbdd0403b00e0694fb7228d8bf60786eaa65be519156d43","name":"LinkedIn articles figures@1.tsv","type":"text/tab-separated-values","lastModified":1607411391033.327,"size":24549},{"id":"90d6a909eec9bd72a8f42958acf02883dcf67cd7ae3fcfc0daae597fc42cb898f9f9c37e4f5ea1c981346d94c57a20ef46c2e0d1794ce4b263ca88d5aba8b26e","href":"https://static.observableusercontent.com/files/90d6a909eec9bd72a8f42958acf02883dcf67cd7ae3fcfc0daae597fc42cb898f9f9c37e4f5ea1c981346d94c57a20ef46c2e0d1794ce4b263ca88d5aba8b26e","name":"LinkedIn articles figures@3.tsv","type":"text/tab-separated-values","lastModified":1607445933282.397,"size":24561},{"id":"14a7b429f28bc52c84cf5b19d1758f912663549bc16bc3112c4e13dca028883f6b3c2deed48f630f129db05a7136ecc5c494af8c5922a42e5d6312ca0e441fa5","href":"https://static.observableusercontent.com/files/14a7b429f28bc52c84cf5b19d1758f912663549bc16bc3112c4e13dca028883f6b3c2deed48f630f129db05a7136ecc5c494af8c5922a42e5d6312ca0e441fa5","name":"LinkedIn articles figures@7.tsv","type":"text/tab-separated-values","lastModified":1634933069858.072,"size":26897},{"id":"14a7b429f28bc52c84cf5b19d1758f912663549bc16bc3112c4e13dca028883f6b3c2deed48f630f129db05a7136ecc5c494af8c5922a42e5d6312ca0e441fa5","href":"https://static.observableusercontent.com/files/14a7b429f28bc52c84cf5b19d1758f912663549bc16bc3112c4e13dca028883f6b3c2deed48f630f129db05a7136ecc5c494af8c5922a42e5d6312ca0e441fa5","name":"LinkedIn articles figures@8.tsv","type":"text/tab-separated-values","lastModified":1634933455108.867,"size":26897},{"id":"ed90100c69a27398badab43c06e432051cfcedd302e8cd8e99da4d766ca7b5064ee03654759a1b13ee330fd80a85ad69256bac5a738de52709f2dae37938a264","href":"https://static.observableusercontent.com/files/ed90100c69a27398badab43c06e432051cfcedd302e8cd8e99da4d766ca7b5064ee03654759a1b13ee330fd80a85ad69256bac5a738de52709f2dae37938a264","name":"LinkedIn articles figures@6.tsv","type":"text/tab-separated-values","lastModified":1633850019787.174,"size":26538},{"id":"bdbddaec5a76a9e20c836de7b5e388f9a32b5c146893991469bb764290fd719eee3af7591cf2fc03ecf90da29e0201d33dd98a77a2ff7ea356cd11ec1a37ab8a","href":"https://static.observableusercontent.com/files/bdbddaec5a76a9e20c836de7b5e388f9a32b5c146893991469bb764290fd719eee3af7591cf2fc03ecf90da29e0201d33dd98a77a2ff7ea356cd11ec1a37ab8a","name":"image@1.png","type":"image/png","lastModified":1641197311853.686,"size":573299},{"id":"61ba7bba139f138e777dbe533d85bef9e059b9a4b05d2ae6b8a658c387f4b4bd9704dd243dc68c166c5cece6280625261e5f670977dd4622a3261e63fd753ed1","href":"https://static.observableusercontent.com/files/61ba7bba139f138e777dbe533d85bef9e059b9a4b05d2ae6b8a658c387f4b4bd9704dd243dc68c166c5cece6280625261e5f670977dd4622a3261e63fd753ed1","name":"LinkedIn articles figures@12.tsv","type":"text/tab-separated-values","lastModified":1641207062145.954,"size":27665},{"id":"7afb53dee519400346d825f718021da03ce5ebe28bb147e03fd7d33e39398023aca641a2364b7b1e79319ecc3d52efa1c2449358cb45ac488d3e3ef71b067136","href":"https://static.observableusercontent.com/files/7afb53dee519400346d825f718021da03ce5ebe28bb147e03fd7d33e39398023aca641a2364b7b1e79319ecc3d52efa1c2449358cb45ac488d3e3ef71b067136","name":"LinkedIn articles figures@15.tsv","type":"text/tab-separated-values","lastModified":1648326849864.975,"size":27676}] 33:{"id":"18bddcdf653b2d28","slug":"experimenting-the-javascript-infovis-toolkit-feeding-dat","title":"Experimenting the JavaScript InfoVis Toolkit Feeding Data Automatically","thumbnail":"98db0450860ccbc76186db94a81aeb0c8296691e3529ab66a8add2b9d21dc5a9","access_level":"public","create_time":"$D2020-12-04T14:37:03.622Z","update_time":"$D2022-04-29T15:44:20.193Z","view_time":null,"first_public_time":"$D2020-12-04T17:05:47.193Z","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":1709,"publish_version":1709,"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":true,"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 Feeding Data Automatically","cells":[{"id":0,"value":"md`# Experimenting the JavaScript InfoVis Toolkit Feeding Data Automatically\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":553,"value":"md`${await FileAttachment(\"LinkedIn articles data 2020-12-04.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"html`\n

\nThe TSV file was attached to this notebook, and TSV parsing is used to convert it into an array of objects in the following cell with as content:
\n\nClicking in the arrows of the following cell, you can unfolded the content and see what was imported from the TSV file.

\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"ArticlesData = FileAttachment(\"LinkedIn articles figures@16.tsv\").tsv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"html`\n

\nHere are intermediate datasets created from Articles data: the columns of the TSV file, the years of the Year first (and unique) layer category, a grouping of articles per year, and candidate value calculation for numeric criteria which can be used for sizing the areas of the treemap.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"columns=ArticlesData.columns","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"Years=Object.keys(ArticlesPerYear)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"ArticlesPerYear=ArticlesData.reduce((accumulator, currentValue) => {\n const count = accumulator[currentValue.Year] || 0;\n accumulator[currentValue.Year] = count + 1; \n return accumulator;}, {});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"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":825,"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":1105,"value":"html`\n

\nHere is the grouping per year of all the articles, which will be reused for preparing the data for the treemap.\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"YearsWithArticles=d3.group(ArticlesData, d => d.Year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"html`\n

\nLet's define the numeric criteria to be used for sizing of areas in the treemap. It could be done assigning one of the previously defined ArticlesPerYear, ViewsPerYear, LikersPerYear or CommentsPerYear.\n

\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"AreaNumericCriteriaPerYear=LikesPerYear","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"html`\n

\nHere is the function which will create the input data for the treemap, using the previously created datasets from the attached TSV file imported in ArticlesData.\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"Json={return CreateJsonFrom(ArticlesData);}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"html`\n

\nThe CreateJsonFrom function (two cells before) aims at producing, from data as input, the Json data which are identical to those expected for the treemap in Json (previous cell), previously created by hand in json (next cell).\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":" json=FileAttachment(\"LinkedInArticles_20201201.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"theCSS = 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":1127,"value":"TreemapHTML = html`\n

\nThe TreemapCreation Script creates the following Treemap Visualization with as inputs the calculate Json from a TSV inputs reflecting statistics on the articles for different given times.\nThe criteria to size the areas is a parameter: It can bethe number of articles, of views, of likes or of comments.\n

\n`","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":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1179,"value":"html`\n

\nThe following dataset is created automatically from Years, with automatic creation of a color for each year using d3.interpolateSpectral plus a translation of a rgb color to HEX as a valid input for the Treemap.\nThere if a ground for automated color creation relying on D3.js, which can be very valuable for proposing appropriate ways to color the Treemaps cf. https://github.com/d3/d3-scale-chromatic\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1145,"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":898,"value":"html`\n

\nLet's note that compared to a traditional pie chart, a treemap gives not only a repartition for a class, but also shows all the considered elements, or can provide repartition for several classes consistuting a partitionning of considered elements.

\nLet's note that here the used data are not the good one, due to an issue with the version of D3 used.\nD3@5 is required for making the pie chart to work properly, while D6.0 is needed for manipulating data :(\nI'm investigating how to solve it before providing the accurate pie chart.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1226,"value":"margin=50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"dataset = Object.entries(AreaNumericCriteriaPerYear).map(currentElement => ({'name': currentElement[0], 'value': currentElement[1]}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"arcLabel = {\n const radius = Math.min(width, height) / 2 * 0.8;\n return d3.arc().innerRadius(radius).outerRadius(radius);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"pie = d3.pie()\n .sort(null)\n .value(d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"color = d3.scaleOrdinal()\n .domain(Years)\n .range(ColorOfYears)\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"arc = d3.arc()\n .innerRadius(0)\n .outerRadius(Math.min(width, height) / 2 - 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1238,"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":975,"value":"html`\n

\nHere is a complementary content, build buy modifying a preview function created for visualizing thumbnails for a set of notebooks. I replaced it with as input my LinkedIn articles and as image those provided with the posts view (so a link is provided to the corresponding image in LinkedIn).\n

\nI would like in the future to couple the article wall to the treemap by highliting the article related to the treemap element having the mouse over. I'm looking forother ideas for making it even more dynamic and interactive.\n

\nOf course it will imply to rely on the same source of data, enriched with the URL of the article and the address of the image to display for it.\n

Let's follow.\n

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

\nMy LinkedIn Article Wall ordered per number of likes\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1246,"value":"WallPerView = previews(\n ArticlesData.sort(function (a, b) {\n return b.Likes - a.Likes;\n }).map((currentElement) => ({\n path: currentElement.ArticleURL,\n image: currentElement.ImageURL,\n author: \"Dr N. Figay\",\n title: currentElement.Title\n }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"html`

\nMy LinkedIn Article Wall ordered a chronological way\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1290,"value":"wall = previews(\n ArticlesData.map((currentElement) => ({\n path: currentElement.ArticleURL,\n image: currentElement.ImageURL,\n author: \"Dr N. Figay\",\n title: currentElement.Title\n }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"ArticlesData.map(currentElement => ({'path': currentElement.ArticleURL, 'image': currentElement.ImageURL, \"title\":currentElement.Title}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"html = (await require(\"htl@0.2\")).html","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"function previews(notebooks) {\n return html`

${notebooks.map(preview)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"function preview({ path, title, author, image }) {\n return html`\n (event.currentTarget.firstElementChild.style.borderColor =\n \"#1b1e23\")} onmouseout=${(event) =>\n (event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\")}>\n

${title}

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1455,"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":1661,"value":"FileAttachment(\"image@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1668,"value":"image001 = {\n const image = await FileAttachment(\"image@1.png\").image();\n image.alt = \"The emerging landscape of graph related technologies\";\n image.width = 180;\n image.height = 120;\n return image;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"{\n return image001;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"FileAttachment(\"LinkedIn articles figures@17.tsv\").tsv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1696,"value":"FileAttachment(\"LinkedIn articles figures@17.tsv\").tsv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1704,"value":"FileAttachment(\"LinkedIn articles figures@17.tsv\").tsv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 34:"$33:body"