2b:null 2c:["$","title",null,{"children":"Task of week 4 (5th - 11th November) | Xavier B. | Observable"}] 31:T531,multilinechart = { const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Clipping svg.append('defs') .append('clipPath') .attr('id', 'clip') .append('rect') .attr('x', margin.left) .attr('y', margin.top) .attr('width', width) .attr('height', height-margin.top); const main = svg.append('g') .attr('class', 'main') .attr('clip-path', 'url(#clip)'); const gx = main.append("g") .call(xAxis); svg.append("g") .call(yAxis); main.selectAll('.line') .data(dataGroup) .join('path') .attr("class", "line") .attr("d", d => lineMultiCases(d[1])) .attr("stroke", d => colorScale(d[0])) .style("fill", "none") .style("stroke-width", 2) .call(addTooltip); svg.call(legend); svg.call(tooltipMarker); const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]]; svg.call(d3.zoom() .scaleExtent([1, 8]) .translateExtent(extent) .extent(extent) .on("zoom", zoomed)); function zoomed(event) { x.range([event.transform.applyX(margin.left), event.transform.applyX(width - margin.right)]); main.selectAll('.line').attr("d", d => lineMultiCases(d[1])); gx.call(xAxis); } return svg.node(); }32:T6d9,addTooltip = node => { node.on("mouseover", function(e,d) { updateMarker(e,d); tooltip.html(tooltipMesage(e,d)); let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY - tooltipHeight - 10+'px') .style('visibility', 'visible');}) .on('mousemove', function(e,d) { const date = x.invert(e.layerX); // console.log(date); const i = d3.bisector(dt => dt.date).left(d[1], date); //console.log(i); let tooltipMarker = d3.select('#tooltipMarker'); tooltipMarker.attr("cx", x(date)) .attr("cy", y(d[1][i].cases)) .attr("fill", colorScale(d[0])) .style('visibility', 'visible'); let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px');}) .on("mouseout", function(e,d) { tooltip.style('visibility', 'hidden'); let tooltipMarker = d3.select('#tooltipMarker'); tooltipMarker.style('visibility', 'hidden');}) }; 33:T49e,updateMarkers_v2 = (e) => { if(e.layerX >= margin.left && e.layerX <= width - margin.right){ const date = x.invert(e.layerX); let i = d3.bisector(dt => dt.date).center(dataGroup[0][1], date); // let i = d3.bisector(dt => dt.date).right(dataGroup[0][1], date); //if(i > 0 && date - dataGroup[0][1][i-1].date < dataGroup[0][1][i].date - date) i--; let lineMarker = d3.select('#lineMarker_v2'); // lineMarker.attr("x1",x(date)) // .attr("x2",x(date)) lineMarker.attr("x1",x(dataGroup[0][1][i].date)) .attr("x2",x(dataGroup[0][1][i].date)) .attr("y1",margin.top) .attr("y2",height - margin.bottom) .style('visibility', 'visible'); let tooltipMarker = d3.selectAll('.tooltipMarker_v2'); tooltipMarker.data(dataGroup) .join('circle') .attr("class", "tooltipMarker_v2") .attr("cx", d => x(d[1][i].date)) .attr("cy", d => y(d[1][i].cases)) .attr("r", 5) .attr("fill", d => colorScale(d[0])) .style('visibility', 'visible'); }else{ hideMarkers(); } }34:T652,addTooltip_v2 = node => { node.on("mouseover", function(e) { updateMarkers_v2(e); if(e.layerX >= margin.left && e.layerX <= width - margin.right){ tooltip_v2.html(tooltipMesage_v2(e)); let tooltipWidth = tooltip_v2.node().offsetWidth; let tooltipHeight = tooltip_v2.node().offsetHeight; tooltip_v2 .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY - tooltipHeight - 10+'px') .style('visibility', 'visible'); } }) .on('mousemove', function(e) { updateMarkers_v2(e); if(e.layerX >= margin.left && e.layerX <= width - margin.right){ tooltip_v2.html(tooltipMesage_v2(e)); let tooltipWidth = tooltip_v2.node().offsetWidth; let tooltipHeight = tooltip_v2.node().offsetHeight; tooltip_v2 .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible'); } }) .on("mouseout", function(e) { tooltip_v2.style('visibility', 'hidden'); //let tooltipMarker = d3.selectAll('.tooltipMarker'); //tooltipMarker.style('visibility', 'hidden'); }); return node; }35:[] 2f:{"id":"4a222a492ca653c2","slug":"task-of-week-4-5th-11th-november","title":"Task of week 4 (5th - 11th November)","thumbnail":"8776bea3d9addc993c831dfb7f227fd42be65637514b655de6cdb82b1f82a451","access_level":"public","create_time":"$D2020-11-11T20:47:42.247Z","update_time":"$D2020-11-14T03:08:33.759Z","view_time":null,"first_public_time":"$D2020-11-12T15:56:23.661Z","fork":{"id":"3c88c50111256c28","slug":"task-of-week-4-5th-11th-november","title":"Task of week 4 (5th - 11th November)","owner":{"id":"dc63de81f2766bde","login":"antonbardera","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"0df0381955bf1da9","login":"x80110","name":"Xavier B.","avatar_url":"https://avatars-next.observableusercontent.com/9c83aa3d8871a7ab7c57218156f38383132193db6157266d478cff07f8af8a0e","tier":"starter_2024"},"version":603,"publish_version":603,"role":null,"authored":false,"authors":[{"type":"individual","id":"90f34519f98866f3","login":"x80110","name":"Xavier B.","avatar_url":"https://avatars-next.observableusercontent.com/9c83aa3d8871a7ab7c57218156f38383132193db6157266d478cff07f8af8a0e","tier":null}],"members":[{"type":"individual","id":"90f34519f98866f3","login":"x80110","name":"Xavier B.","avatar_url":"https://avatars-next.observableusercontent.com/9c83aa3d8871a7ab7c57218156f38383132193db6157266d478cff07f8af8a0e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Task of week 4 (5th - 11th November)","cells":[{"id":0,"value":"md`# Task of week 4 (5th - 11th November)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`This week, we have show how to introduce interactive elements such as hover effects, tooltips, zoom, and brush, to enhance the interactivity of our plots. Please, take your time on reading again the notebook presented in this session in case any part wasn't clear at all.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`Here, you have links to notebooks that introduce similar concepts than the ones presented this week:\n\n- [Line chart with tooltip](https://observablehq.com/@d3/line-chart-with-tooltip)\n- [Accessible histogram with tooltip](https://observablehq.com/@fnick851/accessible-humidity-distribution-histogram-with-tooltip)\n- [Zoomable scatterplot](https://observablehq.com/@d3/zoomable-scatterplot)\n- [Exploration of zoom parameters](https://observablehq.com/@stwind/d3-zoom-parameters)\n- [Zoom candlesticks](https://observablehq.com/@wsygzn/zoom-candlesticks)\n- [Bar chart brush](https://observablehq.com/@didoesdigital/21-june-2020-brushing-to-filter-and-zoom-using-d3-brush)\n- [Brush handles](https://observablehq.com/@d3/brush-handles)\n- [Brushable scatterplot](https://observablehq.com/@d3/brushable-scatterplot)\n- [Bar chart race](https://observablehq.com/@d3/bar-chart-race-explained)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"md`The task of this week will consist of the introduction to interactive elements on the multi-line plot that we created last week. Therefore, this week you won't have to handle with data preparation issues, and just focus on the implementation itself. Good look and enjoy it!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":465,"value":"md`---\n## Add tooltip to lines\n *I couldn't get it to print data in sync with country*`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":526,"value":"md `##### Tooltip\n- Creem un div sobre tot el layout i definim l'estil`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"tooltip = d3.select('body')\n .append('div')\n .attr('id', 'barchart-tooltip')\n .style(\"font-family\", \"'Work Sans', sans-serif\")\n .style('position', 'absolute')\n .style('z-index', '1')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('font-size', '14px')\n .style('max-width', '200px')\n .style('border-radius', '4px')\n .style('color', '#fff');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":528,"value":"md `##### Contingut\n- Definim la posició del cursor en x \n- Com que les dades no són contínues definim a quina es decanta quan no estem exactament sobre d'una amb la funció bisector, l'invertim perquè en d3 pintem al revés \n- Construïm l'html cridant les dades assignades en i (posició del cursor)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":520,"value":"tooltipMesage = (e,d) =>{\n const date = x.invert(e.pageX);\n const i = d3.bisector(dt => dt.date).right(d[1], date); \n let msg = 'Country: '+d[0]+'
'+'Date: '+d[1][i].date.toLocaleDateString(\"en-US\") \n +'
'+'Cases: '+d[1][i].cases;\n return msg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":"md `##### Actualitzem contingut\n- Tornem a seleccionar la posició del cursor i cap on decanta entre valors del dataset\n- Seleccionem la variable tooltipMarker -> hi definim on recollir dades i els atributs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":517,"value":"updateMarker = (e,d) => {\n //console.log(e);\n const date = x.invert(e.layerX);\n console.log(date);\n const i = d3.bisector(dt => dt.date).left(d[1], date); \n console.log(i);\n let tooltipMarker = d3.select('#tooltipMarker');\n\n tooltipMarker.attr(\"cx\", x(date))\n .attr(\"cy\", y(d[1][i].cases))\n .attr(\"fill\", colorScale(d[0]))\n .style('visibility', 'visible');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":558,"value":"md`##### Objecte d3\n- Creem el marcador que ens servirà per assignar-hi la interacció del cursor i vincular-hi els altres elements.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":505,"value":"tooltipMarker = node => {\n node.append('circle')\n .attr(\"id\", \"tooltipMarker\")\n .style('visibility', 'hidden')\n .attr(\"r\",3);\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":563,"value":"md`##### Ensamblem tot el previ`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":502,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"md `---\n## Try again with different approach...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":307,"value":"multilinechart2 = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n const tooltip = d3.select('body')\n .append('div')\n .attr('id', 'barchart-tooltip')\n .style(\"font-family\", \"'Work Sans', sans-serif\")\n .style('position', 'absolute')\n .style('z-index', '1')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('border-radius', '2px')\n .style('color', '#fff');\n \n\n const path = svg.append(\"g\")\n\n .style(\"fill\", \"none\")\n .style(\"stroke-width\", 3)\n .selectAll(\"path\")\n .data(dataGroup)\n .join('path')\n .attr(\"class\", \"line\")\n .attr(\"d\", d => lineMultiCases(d[1]))\n .attr(\"stroke\", d => colorScale(d[0])); \n \n svg.call(addTooltip_v2);\n\n svg.call(tooltipMarkers_v2);\n \n\n svg.call(legend);\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":550,"value":"tooltip_v2 = d3.select('body')\n .append('div')\n .attr('id', 'barchart-tooltip')\n .style('position', 'absolute')\n .style(\"font-family\", \"'Work Sans', sans-serif\")\n .style('z-index', '1')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('font-size', '14px')\n .style('max-width', '200px')\n .style('border-radius', '4px')\n .style('color', '#fff');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":585,"value":"md`##### Contingut\n- Creem el marcador que ens servirà per assignar-hi la interacció del cursor i vincular-hi els altres elements. \n- Tenim en compte que les dades tiren un nivell enrere per pintar els 4 paisos de cop i iterem per cada subelement del grup.\n- Ordenem el resultat final per anar acord amb l'ordre que van les línies`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":551,"value":"tooltipMesage_v2 = (e) =>{\n const date = x.invert(e.layerX);\n let datePosition = d3.bisector(dt => dt.date).center(dataGroup[0][1], date); \n \n let countryCases = [];\n let i;\n for(i=0; i< dataGroup.length;i++){\n countryCases[i]={name:dataGroup[i][0],cases:dataGroup[i][1][datePosition].cases};\n }\n let sortedCountries = countryCases.sort((a,b)=> b.cases - a.cases);\n let msg = 'Date: '+dataGroup[0][1][datePosition].date.toLocaleDateString(\"en-US\")+'
';\n for(i in sortedCountries){\n msg += ''+sortedCountries[i].name+': '+sortedCountries[i].cases+'
';\n }\n return msg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":587,"value":"md`##### Marcador\n- Ara el marcador també marcarà una línia, que l'afegim. \n- També, a diferència d'abans marcarem punts per cada país que assignem a les dades agrupades`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":571,"value":"tooltipMarkers_v2 = node => {\n node.append('line')\n .attr(\"id\",\"lineMarker_v2\")\n .attr(\"stroke\",\"#bbb\")\n .attr(\"stroke-width\",0.5)\n .attr(\"stroke-dasharray\", \"8 8\")\n .style('visibility', 'hidden');\n node.selectAll('.tooltipMarker_v2')\n .data(dataGroup)\n .join('circle')\n .attr(\"class\", \"tooltipMarker_v2\")\n .style('visibility', 'hidden');\n\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":592,"value":"md`##### Eliminem marcadors`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":574,"value":"hideMarkers = () =>{\n let tooltipMarker = d3.selectAll('.tooltipMarker_v2')\n .style('visibility', 'hidden');\n let lineMarker = d3.select('#lineMarker_v2')\n .style('visibility', 'hidden');\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":595,"value":"md`##### Actualitzem el contingut\n- Enguany volem que el marcador interactuï sobre tot el rang que ocupa el gràfic, per tant definim una *condició* 'visible' sempre que el cursor sigui sobre el gràfic\n- Seleccionem la línia i definim els atributs entre els dos valors del bisector x1 i x2 per igual. En Y hi definim la la part superior menys el marge inferior. \n- Seleccioinem els punts i els assignem per a cada \"i\" a la x (data) i la y (casos) corresponent, així com el color que coincidirà amb el de la línia que coincideixi. \n- Si en la condició el cursor no està sobre del gràfic definim que s'amagin els marcadors `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":576,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":581,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"md`### Data preparation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":" OxCGRTdata = d3.csv(\"https://raw.githubusercontent.com/OxCGRT/covid-policy-tracker/master/data/OxCGRT_latest.csv\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"dateCreator = function(str){\n var dt1 = parseInt(str.substring(6,8));\nvar mon1 = parseInt(str.substring(4,6));\nvar yr1 = parseInt(str.substring(0,4));\nvar date = new Date(yr1, mon1-1, dt1);\nreturn date;\n}; ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"desiredCountryData = OxCGRTdata.filter(d => d.CountryName === \"Italy\" || d.CountryName === \"Canada\" || d.CountryName === \"Finland\" || d.CountryName === \"Spain\")\n .map(d => {return {\n country : d.CountryName,\n date : dateCreator(d.Date),\n cases : +d.ConfirmedCases,\n deaths : +d.ConfirmedDeaths\n };}\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"dataGroup = d3.groups(desiredCountryData, d => d.country);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"data = dataGroup.map(d=> d[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"md`### Chart tools`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":263,"value":"// I guess I need bisector to get dataset values where the mouse is \n////// https://stackoverflow.com/questions/26882631/d3-what-is-a-bisector\n\nbisect = {\n const bisect = d3.bisector(d => d.date).left;\n return mx => {\n const date = x.invert(mx);\n const index = bisect(desiredCountryData, date, 1);\n const a = desiredCountryData[index - 1];\n const b = desiredCountryData[index];\n return b && (date - a.date > b.date - date) ? b : a;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"// Format date to avoid long writing and GMT specs. \nfunction formatDate(date) {\n return date.toLocaleString(\"en\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 60});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(desiredCountryData, d => d.cases)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"x = d3.scaleTime()\n .domain(d3.extent(desiredCountryData, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"colorScale = d3.scaleOrdinal(dataGroup.map(d=> d[0]), d3.schemeCategory10);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"lineMultiCases = d3.line()\n .defined(d => !isNaN(d.date))\n .x(d => x(d.date))\n .y(d => y(d.cases));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Total number of cases\"));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"legend = svg => {\n const legend = svg.selectAll(\".legend\")\n .data(dataGroup)\n .enter();\n \n legend\n .append('text')\n .text(d => d[0])\n .attr('x', legendOrigin[0] + labelHeight * 1.2)\n .attr('y', (d,i) => legendOrigin[1] + labelHeight + labelHeight * 1.2 *i)\n .style('font-family', 'sans-serif')\n .style('font-size', `${labelHeight-3}px`);\n \n legend\n .append('rect')\n .attr('x', legendOrigin[0])\n .attr('y', (d,i) => legendOrigin[1] + labelHeight * 1.2 * i)\n .attr('width', labelHeight)\n .attr('height', labelHeight)\n .attr('fill', d => colorScale(d[0]))\n .attr('stroke', 'grey')\n .style('stroke-width', '1px');\n \n return legend;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"legendOrigin = [100,50];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"labelHeight = 15;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"