2c:null 2d:["$","title",null,{"children":"04.2 Task of week 4 (5th - 11th November) - Solution | lamonre | Observable"}] 32: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(); }33:T4df,addTooltip = node => { node.on("mouseover", function(e,d) { //console.log(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) { updateMarker(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') }) .on("mouseout", function(e,d) { tooltip.style('visibility', 'hidden'); let tooltipMarker = d3.select('#tooltipMarker'); tooltipMarker.style('visibility', 'hidden'); }); return node; }34:T550,multilinechart_v2 = { 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); svg.call(addTooltip_v2); svg.call(legend); svg.call(tooltipMarkers_v2); 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); hideMarkers(); } return svg.node(); }35: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; }36: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(); } }37:[] 30:{"id":"d6c2d7e92a1e8b8b","slug":"04-2-task-of-week-4-5th-11th-november-solution","title":"04.2 Task of week 4 (5th - 11th November) - Solution","thumbnail":"506acace0a375936be54b321159d04271712c27ee9cd83fb7e3f8e828d379c4d","access_level":"public","create_time":"$D2020-11-18T13:52:01.596Z","update_time":"$D2020-11-29T20:57:50.260Z","view_time":null,"first_public_time":"$D2020-11-29T20:57:52.434Z","has_unpublished_edits":null,"fork":{"id":"a9e05191df48095d","slug":"task-of-week-4-5th-11th-november-solution","title":"Task of week 4 (5th - 11th November) - Solution","owner":{"id":"dc63de81f2766bde","login":"antonbardera","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"3a530b25547accb2","login":"lamonre","name":"","avatar_url":"https://avatars-next.observableusercontent.com/31a52d7813ecf302a3bd6a481674e7476e9b143abcc43dfcb6e1cc51ec63d80c","tier":"starter_2024"},"version":354,"publish_version":354,"role":null,"authored":false,"authors":[{"type":"individual","id":"e5ef8a37ef396f6c","login":"lamonre","name":"","avatar_url":"https://avatars-next.observableusercontent.com/31a52d7813ecf302a3bd6a481674e7476e9b143abcc43dfcb6e1cc51ec63d80c","tier":null}],"members":[{"type":"individual","id":"e5ef8a37ef396f6c","login":"lamonre","name":"","avatar_url":"https://avatars-next.observableusercontent.com/31a52d7813ecf302a3bd6a481674e7476e9b143abcc43dfcb6e1cc51ec63d80c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"04.2 Task of week 4 (5th - 11th November) - Solution","cells":[{"id":0,"value":"md`# 04.2 Task of week 4 (5th - 11th November) - Solution`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`### Tooltip`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"something.call(functionX);\n\nequivalent to\n\nfunctionX(something); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"tooltip = d3.select('body')\n .append('div')\n .attr('id', 'barchart-tooltip')\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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"tooltipMarker = node => {\n node.append('circle')\n .attr(\"id\", \"tooltipMarker\")\n .style('visibility', 'hidden')\n .attr(\"r\",3);\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`### Zoom`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md`## Version 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"tooltip_v2 = d3.select('body')\n .append('div')\n .attr('id', 'barchart-tooltip')\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`### Data preparation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"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 };});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"dataGroup = d3.groups(desiredCountryData, d => d.country);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`### Chart tools`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"height = 500;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 60});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"colorScale = d3.scaleOrdinal(dataGroup.map(d=> d[0]), d3.schemeCategory10);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"legendOrigin = [100,50];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"labelHeight = 15;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 31:"$30:body"