2f:T7c7,barchartwithtooltip = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox",[0, 0, width, height]); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const tooltip = d3.select('body') .append('div') .attr('id', 'barchart-tooltip') .style('position', 'absolute') .style('z-index', '1') .style('visibility', 'hidden') .style('padding', '10px') .style('background', 'rgba(0,0,0,0.6)') .style('border-radius', '4px') .style('color', '#fff'); svg.selectAll('rect') .data(barchartData) .join('rect') .attr('x', d => xScale(d.code)) .attr('y', d => yScale(d.cases)) .attr('width', xScale.bandwidth()) .attr('height', d => yScale(0) - yScale(d.cases)) .attr('fill', 'purple') .on("mouseover", function(e,d) { const tooltipWidth = tooltip.node().offsetWidth; const tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible') .html(`Country: ${d.cname}
Cases: ${d.cases}`); d3.select(this).attr("fill", "steelblue");}) .on('mousemove', function(e) { const tooltipWidth = tooltip.node().offsetWidth; const 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') d3.select(this).attr("fill", "purple");}); // Specific to Observable return svg.node(); }30:Tb7b,barchartwithzoom = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox",[0, 0, width, height]); // Clipping svg.append('defs') .append('clipPath') .attr('id', 'clip') .append('rect') .attr('x', margin.left) .attr('y', margin.top) .attr('width', width-margin.right) .attr('height', height-margin.top); const main = svg.append('g') .attr('class', 'main') .attr('clip-path', 'url(#clip)'); const tooltip = d3.select('body') .append('div') .attr('id', 'barchart-tooltip') .style('position', 'absolute') .style('z-index', '1') .style('visibility', 'hidden') .style('padding', '10px') .style('background', 'rgba(0,0,0,0.6)') .style('border-radius', '4px') .style('color', '#fff'); main.selectAll('rect') .data(barchartData) .join('rect') .attr('x', d => xScale(d.code)) .attr('y', d => yScale(d.cases)) .attr('width', xScale.bandwidth()) .attr('height', d => yScale(0) - yScale(d.cases)) .attr('fill', 'purple') .on("mouseover", function(e,d,i) { 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') .html(`Country: ${d.cname}
Cases: ${d.cases}`); d3.select(this).attr("fill", "steelblue");}) .on('mousemove', function (e) { 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') d3.select(this).attr("fill", "purple");}); const gx = main.append("g").call(xAxis); const gy = svg.append("g").call(yAxis); 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) { xScale.range([event.transform.applyX(margin.left), event.transform.applyX(width - margin.right)]); main.selectAll('rect').attr("x", d => xScale(d.code)).attr("width", xScale.bandwidth()); gx.call(xAxis); } // Specific to Observable return svg.node(); }31:Tff1,barchartwithbrush = { const svg = d3.create("svg") .attr("width", width) .attr("height", height+ minibarHeight) .attr("viewBox",[0, 0, width, height+ minibarHeight]); // 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); const main = svg.append('g') .attr('class', 'main') .attr('clip-path', 'url(#clip)'); const tooltip = d3.select('body') .append('div') .attr('id', 'barchart-tooltip') .style('position', 'absolute') .style('z-index', '1') .style('visibility', 'hidden') .style('padding', '10px') .style('background', 'rgba(0,0,0,0.6)') .style('border-radius', '4px') .style('color', '#fff'); const mainBarsGroup = main.append("g") .attr("class", "mainBarsGroup"); const miniGroup = svg.append("g") .attr("class", "miniGroup") .attr("transform", "translate(0," + height + ")"); mainBarsGroup.selectAll('rect') .data(barchartData2) .join('rect') .attr('x', d => xScaleBrush(d.code)) .attr('y', d => yScale(d.cases)) .attr('width', xScaleBrush.bandwidth()) .attr('height', d => yScale(0) - yScale(d.cases)) .attr('fill', 'purple') .on("mouseover", function(e,d,i) { 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') .html(`Country: ${d.cname}
Cases: ${d.cases}`); d3.select(this).attr("fill", "steelblue");}) .on('mousemove', function (e) { 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') d3.select(this).attr("fill", "purple");}); const gx = mainBarsGroup.append("g").call(mainXAxis); const gy = svg.append("g").attr("fill", "white").call(yAxis); miniGroup.selectAll('rect') .data(barchartData2) .join('rect') .attr('x', d => miniX(d.code)) .attr('y', d => miniY(d.cases)) .attr('width', miniX.bandwidth()) .attr('height', d => miniY(0) - miniY(d.cases)) .attr('fill', 'steelblue'); const brush = d3.brushX() .extent([[minimargin.left, height + minimargin.top], [width - minimargin.right, height + minibarHeight- minimargin.bottom]]) .on("start brush end", brushed); svg.append("g") .call(brush) .call(brush.move, [barchartData2[0].code,barchartData2[15].code].map(miniX)); //Initially the first 15 are selected function brushed({selection}) { if (selection === null) { miniGroup.attr("stroke", null); } else { const originalRange = mainXZoom.range(); mainXZoom.domain(selection); xScaleBrush.range([mainXZoom(originalRange[0]), mainXZoom(originalRange[1])]); mainBarsGroup.selectAll('rect') .data(barchartData2) .join('rect') .attr('x', d => xScaleBrush(d.code)) .attr('y', d => yScale(d.cases)) .attr('width', xScaleBrush.bandwidth()) .attr('height', d => yScale(0) - yScale(d.cases)) .attr('fill', 'purple') gx.call(mainXAxis); } } // Specific to Observable return svg.node(); }32:T41b,md`Instead of applying changes instantaneously, transitions smoothly interpolate the DOM from its current state to the desired target state over a given duration. This hasn't to much importance on the effects that we have seen today, but in several scenarios they notably improve the comprehension of the changes on a chart. D3 also has a [transition](https://github.com/d3/d3-transition) module to help us in that with the function *.transition()* and *.duration()*. Transitions support most selection methods (such as transition.attr and transition.style in place of selection.attr and selection.style), but not all methods are supported; for example, you must append elements or bind data before a transition starts. These transition can manage many type of elements, such as colors, numbers, transforms, and even strings with embeded numbers (common when representing sizes in pixels, for instance). In this example, the hover effect has a transition quick transition to the *CornflowerBlue* color that finally go to *steelblue* after 400 *ms*.`33:Tcd7,barchartwithzoomtransition = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox",[0, 0, width, 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); const main = svg.append('g') .attr('class', 'main') .attr('clip-path', 'url(#clip)'); const tooltip = d3.select('body') .append('div') .attr('id', 'barchart-tooltip') .style('position', 'absolute') .style('z-index', '1') .style('visibility', 'hidden') .style('padding', '10px') .style('background', 'rgba(0,0,0,0.6)') .style('border-radius', '4px') .style('color', '#fff'); main.selectAll('rect') .data(barchartData) .join('rect') .attr('x', (d, i) => xScale(i)) .attr('y', d => yScale(d.cases)) .attr('width', xScale.bandwidth()) .attr('height', d => yScale(0) - yScale(d.cases)) .attr('fill', 'purple') .on("mouseover", function(e,d,i) { 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') .html(`Country: ${d.cname}
Cases: ${d.cases}`); d3.select(this) .attr("fill", "CornflowerBlue") .transition() .duration(400) .attr("fill", "steelblue");}) .on('mousemove', function (e) { 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') d3.select(this).transition() .duration(400) .attr("fill", "purple");}); const gx = main.append("g").call(xAxis); const gy = svg.append("g").call(yAxis); const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]]; svg.call(d3.zoom() .scaleExtent([0.5, 8]) .translateExtent(extent) .extent(extent) .on("zoom", zoomed)); function zoomed(event) { //xScale.range([margin.left, width - margin.right].map(d => event.transform.applyX(d))); xScale.range([event.transform.applyX(margin.left), event.transform.applyX(width - margin.right)]); main.selectAll('rect') .attr("x", (d, i) => xScale(i)) .attr("width", xScale.bandwidth()); gx.call(xAxis); } // Specific to Observable return svg.node(); }34:[] 2d:{"title":"Interaction","cells":[{"id":0,"value":"md`# Interaction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"md`Today we will talk on how to add interactive behaviours on our charts using D3. We will explore some techniques such as adding hover effects, tooltips, zoom, and brushing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"md`## Data wrangling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`For the session today, we will use again the [Oxford COVID-19 Government Response Tracker (OxCGRT)](https://www.bsg.ox.ac.uk/research/research-projects/coronavirus-government-response-tracker) dataset, which collects data on several different common policy responses that governments have taken to respond to the pandemic on 17 indicators such as school closures and travel restrictions. It now has data from more than 180 countries.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"OxCGRTdata = d3.csv(\"https://raw.githubusercontent.com/OxCGRT/covid-policy-tracker/master/data/OxCGRT_nat_latest.csv\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"//today = new Date();\ntoday = new Date('2022-11-27');","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"thirtyDaysAgo = {\n let date = today;\n date.setHours(0,0,0,0)\n date.setDate(date.getDate() - 30);\n return date;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"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"},{"id":468,"value":"minimumDeaths = 100000;","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"barchartData = OxCGRTdata.filter(d => dateCreator(d.Date).getTime() === thirtyDaysAgo.getTime() && d.RegionName === \"\")\n .map(d => ({\n cname : d.CountryName,\n code : d.CountryCode,\n cases : +d.ConfirmedCases,\n deaths : +d.ConfirmedDeaths\n })\n )\n .filter(d => d.deaths > minimumDeaths )\n .sort((a,b) => b.cases - a.cases); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"## Bar chart\n\nFirst, we can create a static bar chart using the tools that we saw in the previous lectures:","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"yScale = d3.scaleLinear()\n .domain([0,d3.max(barchartData, d => d.cases)]).nice()\n .range([height - margin.bottom, margin.top]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"xScale = d3.scaleBand()\n .domain(barchartData.map(d => d.code))\n .range([margin.left, width - margin.right])\n .padding(0.1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"barchartData.map(d => d.code);","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"xScale('FRA');","pinned":true,"hidden":false,"mode":"ojs"},{"id":617,"value":"xScale.bandwidth()","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScale).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScale))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"y\", -4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Total number of cases\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"barchart = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\",[0, 0, width, height]);\n \n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.selectAll('rect')\n .data(barchartData)\n .join('rect')\n .attr('x', d => xScale(d.code))\n .attr('y', d => yScale(d.cases))\n .attr('width', xScale.bandwidth())\n .attr('height', d => yScale(0) - yScale(d.cases))\n .attr('fill', 'purple');\n\n // Specific to Observable\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Hover effect`","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"A typical effect is the **mouse hover**, which stands out a given element when the user moves or hovers the pointer over a trigger area. This effect can be easily achieved [using CSS](http://imae.udg.edu/~abardera/MVTEC/HoverExample/exampleHover.html) (the page code is in the attached file *HoverExample.zip*) on a typical web architecture. For instance, we could set the *class* attribute to the value \"bar\":\n~~~~\n .attr('class', 'bar')\n~~~~\n\nand then use the CSS rule:\n\n~~~~\n.bar:hover{\n fill: \"steelblue\";\n}\n~~~~\n\nIn Observable, this isn't as easy because it can't be used pseudo-selectors (i.e., `:hover`), but we can use **[mouse events](https://www.w3schools.com/jsref/obj_mouseevent.asp)**. Events are actions recognized by the browser that originated asynchronously, the software may handle that:","pinned":false,"hidden":false,"mode":"md"},{"id":677,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":680,"value":"mutable nticks = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"In D3, we are able to link these events to functions in our code by using the `.on()` function:\n~~~~\n .on(\"mouseover\", function(d) {\n d3.select(this).attr(\"fill\", \"steelblue\");})\n~~~~","pinned":false,"hidden":false,"mode":"md"},{"id":703,"value":"The main events are:\n- `mouseover`: when the mouse goes over the element\n- `mouseout`: when the mouse goes out from the element\n- `click`: when there's a click on the element\n- `mousemove`:when the mouse moves over the element\n- `wheel`: when the mouse wheel rolls up or down over the element\n\nBut the [list of events](https://www.w3schools.com/jsref/dom_obj_event.asp) is much larger!","pinned":false,"hidden":false,"mode":"md"},{"id":706,"value":"In our bart chart example, we can add an effect that consists in changing the color when the mouse is over and set it back to the original color when it's out:","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"barchartwithhover = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\",[0, 0, width, height]);\n \n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.selectAll('rect')\n .data(barchartData)\n .join('rect')\n .attr('x', d => xScale(d.code))\n .attr('y', d => yScale(d.cases))\n .attr('width', xScale.bandwidth())\n .attr('height', d => yScale(0) - yScale(d.cases))\n .attr('fill', 'purple')\n .on(\"mouseover\", function(d) {\n d3.select(this).attr(\"fill\", \"steelblue\");})\n .on(\"mouseout\", function(d) {\n d3.select(this).attr(\"fill\", \"purple\");});\n \n // Specific to Observable\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":797,"value":"*Tiny task*: Modify the previous code to add a black border when the mouse is over a given bar.","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"md`## Tooltips`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"Typically this hover effect is used together with some extra information in the form of a tooltip. In a similar way, we can make this appear or disappear. A possible way of doing that is creating a `div` element where we can add textual information in the format we want and position it according to the mouse coordinates. This information can be obtained from the [mouse event object](https://www.w3schools.com/jsref/obj_mouseevent.asp), which is set as a parameter of the function and contains information about the event, such as the mouse coordinates.","pinned":false,"hidden":false,"mode":"md"},{"id":155,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":726,"value":"### Format numbers\n\nA way of format the numbers is using the `toLocaleString()` function, which returns a string with a language-sensitive representation of this number. An example of use is shown here:","pinned":false,"hidden":false,"mode":"md"},{"id":731,"value":"number = 12345.678","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"number.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"*Tiny task*: Modify the tooltip to show the ratio between the number of deaths and the number of cases in this country. This information has to be shown in percentages with (maximum) two decimal digits.","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"md`## Zoom`","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"md`A typical interaction technique when a lot of data is show on the chart is **zooming**. In this case, we increase range of the scale in order to get the data more separated. In this example, this effect is probably not necessary, but you can decrease the value of the cell minimumDeaths (on the top of the notebook) to have more bars.\n\nTo help with this behaviour, D3 provides the [d3-zoom](https://github.com/d3/d3-zoom) module. This object internally computes the scalling and translation asociated to this behaviour and provides with functions to update the chart. \n\nIn this example, we have also applied a clipping rectangle in order to avoid the overflow of the bars from the charting area. Try to remove this part and see the undesired effect.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Brush`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`A similar approach can be reach using the brush technique. In this case, a minfied representation is shown and the user selects on it which part wants to see on the main plot.\n\nTherefore, two separated plots have to be shown on the SVG and it's important to make this clear on the code. In this example we have created a *mainBarsGroup* and a *miniGroup* elements.\n\nFor this behaviour, D3 also provides the [brush](https://github.com/d3/d3-brush) module to make the things easier. Since in our case we only want to brush on the X direction, we will use the function *.brushX()*. This tool will give us the extent of the selected area that we will use to update a zoom tool on the main chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":661,"value":"barchartData2 = OxCGRTdata.filter(d => dateCreator(d.Date).getTime() === thirtyDaysAgo.getTime() && d.RegionName === \"\")\n .map(d => {return {\n cname : d.CountryName,\n code : d.CountryCode,\n cases : +d.ConfirmedCases,\n deaths : +d.ConfirmedDeaths\n };}\n )\n .filter(d => d.deaths > 10000 )\n .sort((a,b) => b.cases - a.cases); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":434,"value":"mainXZoom = d3.scaleLinear()\n .range([margin.left, width - minimargin.right])\n .domain([margin.left, width - minimargin.right]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"xScaleBrush = d3.scaleBand()\n .domain(barchartData2.map(d=>d.code))\n .range([margin.left, width - margin.right])\n .padding(0.1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"mainXAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScaleBrush).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"minibarHeight = 150;","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"minimargin = ({top: 20, right: margin.right, bottom: 20, left: margin.left});","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"miniY = d3.scaleLinear()\n .domain([0,d3.max(barchartData2, d => d.cases)]).nice()\n .range([minibarHeight - minimargin.bottom, minimargin.top]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"miniX = d3.scaleBand()\n .domain(barchartData2.map(d=>d.code))\n .range([minimargin.left, width - minimargin.right])\n .padding(0.1);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`## Transitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`## Apendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"d3 = require(\"d3@7\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"margin = ({top: 20, right: 30, bottom: 50, left: 80});","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}