30:T785,barchartwithtooltip = { const svg = d3.select(DOM.svg(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, i) => widthScale(i)) .attr('y', d => heightScale(d.cases)) .attr('width', widthScale.bandwidth()) .attr('height', d => heightScale(0) - heightScale(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");}); // Specific to Observable return svg.node(); }31:Tb3e,barchartwithzoom = { const svg = d3.select(DOM.svg(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-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, i) => widthScale(i)) .attr('y', d => heightScale(d.cases)) .attr('width', widthScale.bandwidth()) .attr('height', d => heightScale(0) - heightScale(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([0.5, 8]) .translateExtent(extent) .extent(extent) .on("zoom", zoomed)); function zoomed(event) { widthScale.range([event.transform.applyX(margin.left), event.transform.applyX(width - margin.right)]); main.selectAll('rect').attr("x", (d, i) => widthScale(i)).attr("width", widthScale.bandwidth()); gx.call(xAxis); } // Specific to Observable return svg.node(); }32:T107f,barchartwithbrush = { const svg = d3.select(DOM.svg(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'); xScale.domain(d3.range(barchartData.length)) .range([margin.left, width - margin.right]) .padding(0.1); 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(barchartData) .join('rect') .attr('x', (d, i) => xScale(i)) .attr('y', d => heightScale(d.cases)) .attr('width', xScale.bandwidth()) .attr('height', d => heightScale(0) - heightScale(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(barchartData) .join('rect') .attr('x', (d, i) => miniX(i)) .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, [0, 15].map(miniX)); //Initially the first 15 are selected function brushed({selection}) { if (selection === null) { miniGroup.attr("stroke", null); } else { //console.log(selection); let originalRange = mainXZoom.range(); mainXZoom.domain(selection); //console.log([mainXZoom(originalRange[0]), mainXZoom(originalRange[1])]); xScale.domain(d3.range(barchartData.length)) .range([mainXZoom(originalRange[0]), mainXZoom(originalRange[1])]); mainBarsGroup.selectAll('rect') .data(barchartData) .join('rect') .attr('x', (d, i) => xScale(i)) .attr('y', d => heightScale(d.cases)) .attr('width', xScale.bandwidth()) .attr('height', d => heightScale(0) - heightScale(d.cases)) .attr('fill', 'purple') gx.call(mainXAxis); } } // Specific to Observable return svg.node(); }33: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*.`34:Tca6,barchartwithzoomtransition = { const svg = d3.select(DOM.svg(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) => widthScale(i)) .attr('y', d => heightScale(d.cases)) .attr('width', widthScale.bandwidth()) .attr('height', d => heightScale(0) - heightScale(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) { //widthScale.range([margin.left, width - margin.right].map(d => event.transform.applyX(d))); widthScale.range([event.transform.applyX(margin.left), event.transform.applyX(width - margin.right)]); main.selectAll('rect') .attr("x", (d, i) => widthScale(i)) .attr("width", widthScale.bandwidth()); gx.call(xAxis); } // Specific to Observable return svg.node(); }35:[] 2e:{"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_latest.csv\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"today = new Date();","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"fiveDaysAgo = {\n let date = new Date();\n date.setHours(0,0,0,0)\n date.setDate(date.getDate() - 5);\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 = 10000;","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"barchartData = OxCGRTdata.filter(d => dateCreator(d.Date).getTime() === fiveDaysAgo.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 > minimumDeaths )\n .sort((a,b) => b.cases - a.cases); ","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Hover effect`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`First, we can create a static bar chart using the tools that we saw in the previous lectures:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"heightScale = 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":"widthScale = d3.scaleBand()\n .domain(d3.range(barchartData.length))\n .range([margin.left, width - margin.right])\n .padding(0.1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(widthScale).tickFormat(i => barchartData[i].code).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(heightScale))\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.select(DOM.svg(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, i) => widthScale(i))\n .attr('y', d => heightScale(d.cases))\n .attr('width', widthScale.bandwidth())\n .attr('height', d => heightScale(0) - heightScale(d.cases))\n .attr('fill', 'purple');\n\n // Specific to Observable\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"md`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) on a typical web architexture.\n\nIn Observable, this isn't as easy so we can make use of **[mouse events](https://www.w3schools.com/jsref/obj_mouseevent.asp)**. Events are actions recognized by the browser originated asynchronously, that may be handled by the software. We are able to link these events to functions in our code by using the *.on()* function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"barchartwithhover = {\n const svg = d3.select(DOM.svg(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, i) => widthScale(i))\n .attr('y', d => heightScale(d.cases))\n .attr('width', widthScale.bandwidth())\n .attr('height', d => heightScale(0) - heightScale(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":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`## Tooltips`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"md`Typically this hover effect is used together with some information in the form of a tooltip. In a similar way, we can make appear or disappear this tooltip.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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":"$31","pinned":false,"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":"$32","pinned":false,"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":"xScale = d3.scaleBand()\n .domain(d3.range(barchartData.length))\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(xScale).tickFormat(i => barchartData[i].code).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(barchartData, 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(d3.range(barchartData.length))\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":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`## Apendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"d3 = require(\"d3@6\");","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: 60});","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}