31:Tb8d,chart = { const aboveUid = DOM.uid("above"); const belowUid = DOM.uid("below"); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .datum(data); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("clipPath") .attr("id", aboveUid.id) .append("path") .attr("d", d3.area() .curve(curve) .x(d => x(d.date)) .y0(0) .y1(d => y(d.value1))); svg.append("clipPath") .attr("id", belowUid.id) .append("path") .attr("d", d3.area() .curve(curve) .x(d => x(d.date)) .y0(height) .y1(d => y(d.value1))); svg.append("path") .attr("clip-path", aboveUid) .attr("fill", colors[1]) .attr("d", d3.area() .curve(curve) .x(d => x(d.date)) .y0(height) .y1(d => y(d.value0))); svg.append("path") .attr("clip-path", belowUid) .attr("fill", colors[0]) .attr("d", d3.area() .curve(curve) .x(d => x(d.date)) .y0(0) .y1(d => y(d.value0))); // line chart svg.append("path") .attr("fill", "none") .attr("stroke", "#84c8b1") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", d3.line() .curve(curve) .x(d => x(d.date)) .y(d => y(d.value0))); svg.append("path") .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") // .attr("stroke-dasharray", 4) .attr("d", d3.line() .curve(curve) .x(d => x(d.date)) .y(d => y(d.value1))); // legend svg.call(legend); // tooltip from https://observablehq.com/@d3/line-chart-with-tooltip const tooltip = svg.append("g"); svg.on("touchmove mousemove", function(event) { // svg.on("click", function(event) { // console.log(event); const {date, value0, value1} = bisect(d3.pointer(event, this)[0]); // const eventListener = d3.pointer(event, this); // const xPosition_date = eventListener[0]; // const yPositoin_value = eventListener[1]; // console.log("============"); // console.log(eventListener); // console.log(x.invert(xPosition_date)); // console.log(y.invert(yPositoin_value)); // tooltip // .attr("transform", `translate(${xPosition_date},${yPositoin_value})`) // .call(callout, `${formatValue(y.invert(yPositoin_value))} // ${formatDate(x.invert(xPosition_date))}`); tooltip .attr("transform", `translate(${x(date)},${y(value0)})`) .call(callout, `${formatValue(value0)} ${formatValue1(value1)} ${formatVariance(value0, value1)} ${formatDate(date)}`); }); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.node(); }32:Tba6,chart2 = { const aboveUid = DOM.uid("above"); const belowUid = DOM.uid("below"); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .datum(data); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("clipPath") .attr("id", aboveUid.id) .append("path") .attr("d", d3.area() .curve(curveWavy) .x(d => x(d.date)) .y0(0) .y1(d => y(d.value1))); svg.append("clipPath") .attr("id", belowUid.id) .append("path") .attr("d", d3.area() .curve(curveWavy) .x(d => x(d.date)) .y0(height) .y1(d => y(d.value1))); svg.append("path") .attr("clip-path", aboveUid) .attr("fill", colors[1]) .attr("d", d3.area() .curve(curveWavy) .x(d => x(d.date)) .y0(height) .y1(d => y(d.value0))); svg.append("path") .attr("clip-path", belowUid) .attr("fill", colors[0]) .attr("d", d3.area() .curve(curveWavy) .x(d => x(d.date)) .y0(0) .y1(d => y(d.value0))); // line chart svg.append("path") .attr("fill", "none") .attr("stroke", "#84c8b1") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", d3.line() .curve(curveWavy) .x(d => x(d.date)) .y(d => y(d.value0))); svg.append("path") .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") // .attr("stroke-dasharray", 4) .attr("d", d3.line() .curve(curveWavy) .x(d => x(d.date)) .y(d => y(d.value1))); // legend svg.call(legend); // tooltip from https://observablehq.com/@d3/line-chart-with-tooltip const tooltip = svg.append("g"); svg.on("touchmove mousemove", function(event) { // svg.on("click", function(event) { // console.log(event); const {date, value0, value1} = bisect(d3.pointer(event, this)[0]); // const eventListener = d3.pointer(event, this); // const xPosition_date = eventListener[0]; // const yPositoin_value = eventListener[1]; // console.log("============"); // console.log(eventListener); // console.log(x.invert(xPosition_date)); // console.log(y.invert(yPositoin_value)); // tooltip // .attr("transform", `translate(${xPosition_date},${yPositoin_value})`) // .call(callout, `${formatValue(y.invert(yPositoin_value))} // ${formatDate(x.invert(xPosition_date))}`); tooltip .attr("transform", `translate(${x(date)},${y(value0)})`) .call(callout, `${formatValue(value0)} ${formatValue1(value1)} ${formatVariance(value0, value1)} ${formatDate(date)}`); }); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.node(); }33:T625,callout = (g, value) => { console.log("value in callout =============="); console.log(value); if (!value) return g.style("display", "none"); g .style("display", null) .style("pointer-events", "none") .style("font", "10px sans-serif"); const path = g.selectAll("path") .data([null]) .join("path") .attr("fill", "white") .attr("stroke", "black"); const text = g.selectAll("text") .data([null]) .join("text") .call(text => text .selectAll("tspan") .data((value + "").split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (d, i) => `${i * 1.8}em`) // .style("font-weight", (_, i) => { if (i) { // return null // } else { // return "bold"}}) .style("font-weight", (_, i) => { if (!i || i === 1) { return "bold" } else { return null}}) .style("fill", (_, i) => { if (i === 0) { // color prediction value return "#84c8b1" } else { return null}}) .text(d => d)); const {x, y, width: w, height: h} = text.node().getBBox(); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); }34:[{"id":"1e410e464b177b6c660c657840a581a6a3fec3880b7d7c07fe6d37fcb8745f3849214453e252c9d31c81ffcf4cf7f27ff20133f36f617c5955a9f10e1f3cf383","href":"https://static.observableusercontent.com/files/1e410e464b177b6c660c657840a581a6a3fec3880b7d7c07fe6d37fcb8745f3849214453e252c9d31c81ffcf4cf7f27ff20133f36f617c5955a9f10e1f3cf383","name":"for_gap_charts.csv","type":"text/csv","lastModified":1623336537965.743,"size":41222}] 2f:{"title":"CCAA vs National difference chart","cells":[{"id":0,"value":"md`# CCAA vs National difference chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"viewof selectedCCAA = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1419,"value":"md` ##### ███ Above national level \n##### ███ Below national level`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1508,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"DataLong =FileAttachment(\"for_gap_charts.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1289,"value":"uniqueCCAA = [...new Set(DataLong.map(item => item.ccaa))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1272,"value":"data2 = DataLong.map(d => {return{\n date: new Date(d.fecha.split(\"T\")[0]),\n dateStr: d.fecha.split(\"T\")[0],\n ccaa: d.ccaa,\n value0: Math.round(+d[\"perc_total\"] * 100) / 100,\n value1: findValueByDate(d.fecha.split(\"T\")[0])\n};})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1316,"value":"function findValueByDate(dateStr){\n return dataGlobal.filter(d => d.dateStr === dateStr).map(d => d.value1)[0]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1340,"value":"findValueByDate(data2[0]['dateStr'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1287,"value":"dataGlobal = DataLong.filter(d => d.ccaa === \"Total España\").map(d => {return{\n date: new Date(d.fecha.split(\"T\")[0]),\n dateStr: d.fecha.split(\"T\")[0],\n ccaa: d.ccaa,\n value1: Math.round(+d[\"perc_total\"] * 100) / 100\n};})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1351,"value":"data = data2.filter(d => d.ccaa === selectedCCAA['ccaa'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1460,"value":"selectedCCAA","pinned":true,"hidden":false,"mode":"ojs"},{"id":632,"value":"legend = svg => {\n const legendText = [selectedCCAA['ccaa'] , \"National\"]\n const legendOrigin = [800,30];\n const labelHeight = 15\n const legend = svg.selectAll(\".legend\")\n .data(legendText)\n .enter();\n \n legend\n .append('text')\n .text(d => d)\n .attr('x', legendOrigin[0] + labelHeight * 1.4)\n .attr('y', (d,i) => legendOrigin[1] + labelHeight + labelHeight * 1.4 *i)\n .style('font-family', 'sans-serif')\n .style('font-size', `${labelHeight-3}px`)\n .attr('fill', d => {if (d == \"National\"){ return \"#333\"} else {return \"#84c8b1\"}});\n \n legend\n .append('rect')\n .attr('x', legendOrigin[0] - 5)\n .attr('y', (d,i) => legendOrigin[1] + labelHeight * i * 1.4 + 8)\n .attr('width', 20)\n .attr('height', 2.5)\n // .attr('fill', d => {d == \"Predicted value\"? \"blue\" : \"red\"}) #what went wrong? \n .attr('fill', d => {if (d == \"National\"){ return \"#333\"} else {return \"#84c8b1\"}})\n \n return legend;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":749,"value":"yAxis = svg => svg\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisRight(y)\n // .tickSize(width))\n .tickSize(width - margin.left - margin.right))\n .call(g => g.select(\".domain\")\n .remove())\n .call(g => g.selectAll(\".tick:not(:first-of-type) line\")\n .attr(\"stroke-opacity\", 0.5)\n .attr(\"stroke-dasharray\", \"2,2\"))\n .call(g => g.selectAll(\".tick text\")\n .attr(\"x\", -30)\n .attr(\"dy\", -4))\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 .attr(\"font-size\", \"1.3em\")\n .text(data.y)\n .text(\"Selected CCAA vs National vaccination rate\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"format = d3.timeFormat(\"%Y-%m-%d\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"function formatValue(value) {\n\n return selectedCCAA['ccaa'] + \": \" + value;\n \n // return \"Actual: \" + currency;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"function formatValue1(value) {\n return \"National: \" + value;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"function formatVariance(val0, val1 ) {\n console.log(\"VAR =========\");\n // console.log(val0);\n // console.log(val1);\n// const currency = value.toLocaleString(\"en\", {\n// style: \"currency\",\n// currency: \"TWD\"\n// });\n const gap = val1 - val0;\n const showGap = +gap.toFixed(3);\n return (showGap<0?\"\":\"+\") + showGap + \"\";\n // if (Math.abs(gap) > parseFloat(parameter.input)) {\n // return (showGap<0?\"\":\"+\") + showGap + \"\";\n // } else {\n // return (showGap<0?\"\":\"+\") + showGap + \"\";\n // }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"bisect = {\n console.log(\"bisect starts ============\");\n const bisect = d3.bisector(d => d.date).left;\n // const bisect = d3.bisector(d => {d.date}).left;\n // console.log(bisect);\n \n\n return mx => {\n // console.log(\"mx============\");\n // console.log(mx);\n const date = format(x.invert(mx));\n \n// console.log(\"date============\");\n// console.log(bisect2(data, new Date(date)));\n const index = bisect(data, new Date(date));\n \n // console.log(\"index============\");\n // console.log(index);\n \n const a = data[index - 1];\n const b = data[index];\n // console.log(\"a===============\");\n // console.log(a); \n return b && (date - a.date > b.date - date) ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"function formatDate(date) {\n return date.toLocaleString(\"en\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"x = d3.scaleTime()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"y = d3.scaleLinear()\n .domain([\n d3.min(data, d => Math.min(d.value0, d.value1)),\n d3.max(data, d => Math.max(d.value0, d.value1))\n ]).nice(5)\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)\n .tickSize(0))\n // .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"colors = [\"rgba(225,225,225, 0.33)\", \"rgba(132, 200, 177, 0.25)\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"curve = d3.curveStep\n// curve = d3.curveLinear\n// curve = d3.curveNatural","pinned":true,"hidden":false,"mode":"ojs"},{"id":1504,"value":"curveWavy = d3.curveNatural","pinned":true,"hidden":false,"mode":"ojs"},{"id":897,"value":"md`## 6. Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}