22:null 23:["$","title",null,{"children":"Gesellschaftsmonitoring COVID 19 | cgrb | Observable"}] 28:T1758,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, height]) .style("display", "block"); const clipId = DOM.uid("clip"); svg .append("clipPath") .attr("id", clipId.id) .append("rect") .attr("x", margin.left) .attr("y", 0) .attr("height", height) .attr("width", widthNow - margin.left - margin.right); const path = svg .append("path") .datum(filteredData) .attr("clip-path", clipId) .attr("fill", "none") .attr("stroke", "#4682B4") // dim blue: #4682B4, bright blue: #3952ee .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); // Adding notes const notesLine = svg .selectAll("n-line") .data(annotations) .enter() .append("line") .attr("clip-path", clipId) .attr("style", "stroke:#ebbd22; stroke-width:1; stroke-dasharray: 2 1;") // grey: #6e6e7e .attr("y1", height - margin.bottom) .attr("y2", 0) .attr("x1", d => x(d.date)) .attr("x2", d => x(d.date)); const notesMarker = svg .selectAll(".dot") .data(annotations) .enter() .append("circle") .attr("clip-path", clipId) .attr("r", 6) .attr("cx", d => x(d.date)) .attr("cy", 7) .style("fill", "#ffffff") .style("stroke", "#ebbd22"); const notesLabel = svg .selectAll("text") .data(annotations) .enter() .append("text") .attr("clip-path", clipId) .attr("x", d => x(d.date)) .attr("y", 10) .text(d => d.index) .style("text-anchor", "middle") .style('font-family', "Helvetica Neue, Helvetica, sans-serif") .style("font-size", "8px") .style('fill', '#05032d'); const gx = svg.append("g"); const gy = svg.append("g"); const gxYear = svg.append("g"); // Adding source and unit svg .append('text') .attr('y', height - 18) //height-20) .attr('dy', '1.2em') .attr('x', widthNow - margin.right) .html( 'Quelle/Datenbezug: ' + filteredData[0].source + '' ) .attr('font-size', '11px') .attr('text-anchor', 'end') .style('font-family', "Helvetica Neue, Helvetica, sans-serif") .style('fill', '#333'); svg .append('text') .attr('y', -margin.top + 75) //height-20) .attr('dy', '1.2em') .attr('x', -margin.left + 40) .text(`↑ ${filteredData[0].unit}`) .attr('font-size', '11px') .attr('text-anchor', 'start') .attr('font-weight', 'bold') .style('font-family', "Helvetica Neue, Helvetica, sans-serif") .style('fill', '#333'); // Adding tooltip with guide, marker and legend const bisect = d3.bisector(d => d.date); if (!mutable lookup) mutable lookup = new Date(filteredData[0].date); const tooltipGuide = svg .append("line") .attr("clip-path", clipId) .attr("style", "stroke:#6e6e7e; stroke-width:0.5; stroke-dasharray: 5 2;") // grey: #6e6e7e .attr("y2", height - margin.bottom) .attr("x1", x(mutable lookup)) .attr("x2", x(mutable lookup)); const tooltipLegend = svg .append("text") .attr("clip-path", clipId) .style('font-size', '12px') .style('font-weight', 'bold') .style('font-family', 'Helvetica, Arial, sans-serif') .style('fill', '#333') .attr("x", margin.left + 15) .attr("y", margin.top - 12); const tooltipMarker = svg .append("circle") .attr("clip-path", clipId) .attr("r", 5) .attr("cx", -100) .attr("fill", "#d64b47") .attr("stroke", "#d64b47") .attr("stroke-width", "1.5"); // Update function - accroding to selected focus area return Object.assign(svg.node(), { update(focusX, focusY) { path.datum(filteredData).attr("d", line(focusX, focusY)); notesLine .attr("x1", d => focusX(d.date)) .attr("x2", d => focusX(d.date)) .attr("y1", height - margin.bottom) .attr("y2", 0); notesMarker.attr("cx", d => focusX(d.date)).attr("cy", 7); notesLabel.attr("x", d => focusX(d.date)).attr("y", 10); gx.call(xAxis, focusX, height); gy.call(yAxis, focusY, focusY(filteredData.y)); gxYear.call(xAxisYear, focusX, height); function updateTooltip(date) { const i = bisect.right(filteredData, date); if (focusX(date) < widthNow / 2) { tooltipLegend .text( `${formatDateShort(filteredData[i].date)}: ${formatValue( filteredData[i].value )}` ) .attr("x", focusX(filteredData[i].date) + 10) .attr("text-anchor", "start") .style('font-family', "Helvetica Neue, Helvetica, sans-serif") .style("font-size", "11px") .style('fill', '#05032d'); tooltipMarker .attr("cx", focusX(filteredData[i].date)) .attr("cy", focusY(filteredData[i].value)); } else { tooltipLegend .text( `${formatDateShort(filteredData[i].date)}: ${formatValue( filteredData[i].value )}` ) .attr("x", focusX(filteredData[i].date) - 10) .attr("text-anchor", "end") .style('font-family', "Helvetica Neue, Helvetica, sans-serif") .style("font-size", "11px") .style('fill', '#05032d'); tooltipMarker .attr("cx", focusX(filteredData[i].date)) .attr("cy", focusY(filteredData[i].value)); } mutable lookup = new Date(date); tooltipGuide .attr("x1", focusX(mutable lookup)) .attr("x2", focusX(mutable lookup)); //https://observablehq.com/@d3/index-chart --> line with range } svg.on("mousemove click touchmove", function(event) { const m = d3.pointer(event, this); updateTooltip(focusX.invert(m[0])); }); updateTooltip(mutable lookup); } }); }29:T6d2,viewof focus = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, focusHeight]) .style("display", "block"); const brush = d3 .brushX() .extent([ [marginFocus.left, 0.5], [ widthNow - margin.right, focusHeight - marginFocus.bottom - marginFocus.top - 25 ] ]) .on("brush", brushed) .on("end", brushended); const defaultSelection = [ x(d3.utcMonth.offset(x.domain()[1], -6)), x.range()[1] ]; svg .append("path") .datum(filteredData) .attr("stroke", "#4682B4") .attr("stroke-width", 1) .attr('fill', 'none') .attr( "d", line( x, yFocus .copy() .range([focusHeight - marginFocus.bottom - marginFocus.top - 25, 4]) ) ); svg.append("g").call(xAxisFocus, x, focusHeight); svg.append("g").call(xAxisYear, x, focusHeight); //svg.append('g').call(yAxisFocus, y, focusHeight); const gb = svg .append("g") .call(brush) .call(brush.move, defaultSelection); function brushed({ selection }) { if (selection) { svg.property("value", selection.map(x.invert, x).map(d3.utcDay.round)); svg.dispatch("input"); } svg .append("text") .attr("class", "label") .style("text-anchor", "start") .style("font-weight", "bold") .style('font-family', "Helvetica Neue, Helvetica, sans-serif") .style("font-size", "11px") .style('fill', '#05032d') .attr("x", marginFocus.left) .attr("y", 0 + 10); } svg.select(".label").text('Zeitraum wählen ↔'); function brushended({ selection }) { if (!selection) { gb.call(brush.move, defaultSelection); } } return svg.node(); }2a:T508,cleanedData = data .filter(d => d.variable_short !== "bezug_bargeld") .filter(d => d.variable_short !== "anz_bezug_bargeld") .filter(d => d.variable_short !== "konk_eroeff_noga_A") .filter(d => d.variable_short !== "konk_eroeff_noga_B") .filter(d => d.variable_short !== "konk_eroeff_noga_C") .filter(d => d.variable_short !== "konk_eroeff_noga_D") .filter(d => d.variable_short !== "konk_eroeff_noga_E") .filter(d => d.variable_short !== "konk_eroeff_noga_F") .filter(d => d.variable_short !== "konk_eroeff_noga_G") .filter(d => d.variable_short !== "konk_eroeff_noga_H") .filter(d => d.variable_short !== "konk_eroeff_noga_I") .filter(d => d.variable_short !== "konk_eroeff_noga_J") .filter(d => d.variable_short !== "konk_eroeff_noga_K") .filter(d => d.variable_short !== "konk_eroeff_noga_L") .filter(d => d.variable_short !== "konk_eroeff_noga_M") .filter(d => d.variable_short !== "konk_eroeff_noga_N") .filter(d => d.variable_short !== "konk_eroeff_noga_O") .filter(d => d.variable_short !== "konk_eroeff_noga_P") .filter(d => d.variable_short !== "konk_eroeff_noga_Q") .filter(d => d.variable_short !== "konk_eroeff_noga_R") .filter(d => d.variable_short !== "konk_eroeff_noga_S") .filter(d => d.variable_short !== "konk_eroeff_noga_T")2b:Ta60,function annotationLegend(container) { const titlePadding = 10; // padding between title and entries const entrySpacing = 18; // spacing between legend entries const entryRadius = 8; // radius of legend entry marks const labelOffset = 6; // additional horizontal offset of text labels const baselineOffset = 4; // text baseline offset, depends on radius and font size // Working code but not responsive text const entries = container .selectAll('g') .data(annotations, d => d) .join('g') .attr( 'transform', d => `translate(0, ${titlePadding + d.index * entrySpacing})` ); const symbols = entries .append('circle') .attr('cx', entryRadius) // <-- offset symbol x-position by radius .attr('r', entryRadius) .attr('fill', 'none') .attr('stroke', '#ebbd22') .attr('stroke-width', 1); const noteText = container .selectAll("text") .data(annotations) .enter() .append("text") .attr( 'transform', d => `translate(${entryRadius}, ${titlePadding + d.index * entrySpacing + baselineOffset})` ) .text(d => d.index) .style("text-anchor", "middle") .style('font-family', "Helvetica Neue, Helvetica, sans-serif") .style("font-size", "10px") .style('fill', '#05032d'); const labels = entries .append('text') .attr('x', 2 * entryRadius + labelOffset) // <-- place labels to the right of symbols .attr('y', baselineOffset) // <-- adjust label y-position for proper alignment //.attr("width", 150) .style('font-family', "Helvetica Neue, Helvetica, sans-serif") .style("font-size", "12px") .style('fill', '#05032d') .style('user-select', 'none') // <-- disallow selectable text .text(d => `${d.label} (${formatDateShort(d.date)})`); //.html('' + annotations[2].label +', ' +formatDateShort(annotations[7].date) + '') /* const mytext = entries .append("foreignObject") .attr("width", widthNow - margin.right) .attr("height", height) .attr('x', 2 * entryRadius + labelOffset) // <-- place labels to the right of symbols .attr('y', baselineOffset) // <-- adjust label y-position for proper alignment .append("xhtml:span") .attr("class", "span") .html( '' + annotations[2].label + ', ' + formatDateShort(annotations[2].date) + '' ); */ const title = container .append('text') .attr('x', 0) .attr('y', 0) .attr( "style", "font-size: 13px; font-family: sans-serif,Helvetica,Arial; font-weight: bold; color: #05032d;" ) .text('Massnahmen'); }2c:[] 26:{"id":"50b602b4e6aa2594","slug":"gesellschaftsmonitoring-covid-19/3","title":"Gesellschaftsmonitoring COVID 19","thumbnail":"88e611eed6ca7fe3d9a3582fb65afe07b77adc089dd8172a555a75c778ec7112","access_level":"public","create_time":"$D2020-11-28T12:20:29.591Z","update_time":"$D2020-12-08T16:56:19.513Z","view_time":null,"first_public_time":"$D2020-11-28T12:42:27.425Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c365a64096212d04","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9c462d01fa9cdefc59de658728a5180d59049d26d0bf92c2d5b62b3b0753d40d","tier":"starter_2024","bio":""},"version":4092,"publish_version":4092,"role":null,"authored":false,"authors":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null,"bio":""}],"members":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Gesellschaftsmonitoring COVID 19","cells":[{"id":1,"value":"md`\n# Gesellschaftsmonitoring COVID 19\n### Statistisches Amt Kanton Zürich`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"viewof indicatorSelect = select({\n options: indicators,\n value: \"Gesundheit, neu gemeldete Anzahl SARS-CoV-2 Fälle, CH\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"$29","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3621,"value":"list = {\n const ol = d3.create('ol').attr('class', 'steps');\n\n ol.selectAll('.li')\n .data(annotations)\n .join('li')\n .attr('class', 'li')\n .text(d => `${d.label} (${formatDateShort(d.date)})`)\n .style('font-family', \"Helvetica Neue, Helvetica, sans-serif\")\n .style(\"font-size\", \"12px\")\n .style('fill', '#05032d');\n\n return ol.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"data_url = \"https://raw.githubusercontent.com/statistikZH/covid19monitoring/master/covid19socialmonitoring.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = d3.csv(data_url).then(csv => {\n // Convert all date to 2020 so they can be plotted on the same x time axis\n const data = csv.map(d => ({\n date: parseTime(d.date),\n value: +d.value, // The primary value.\n topic: d.topic, // The secondary comparison value.\n variable_short: d.variable_short,\n variable_long: d.variable_long,\n location: d.location,\n unit: d.unit,\n source: d.source,\n link: d.description\n }));\n return data;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3201,"value":"md`#### Filter flagged indicators from data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3129,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"indicators = [\n ...Array.from(\n new Set(\n cleanedData.map(d => d.topic + \", \" + d.variable_long + \", \" + d.location)\n )\n ).sort()\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3224,"value":"md`#### Data based on Indicator Selection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"filteredData = cleanedData\n .filter(\n el =>\n el.topic + ', ' + el.variable_long + ', ' + el.location == indicatorSelect\n )\n .sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2625,"value":"md`## Notes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"annotation_url = \"https://raw.githubusercontent.com/statistikZH/covid19zeitmarker/master/covid19zeitmarker.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"annotationData = d3.csv(annotation_url).then(csv => {\n const annotationData = csv\n .map(d => ({\n date: parseTime(d.Datum),\n region: d.Raum,\n category: d.Kategorisierung,\n label: d.Beschreibung\n }))\n .sort(sortByDateAscending);\n return annotationData;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2622,"value":"annotations = {\n const annotations = annotationData.map((d, i) => ({\n index: 1 + i,\n date: d.date,\n region: d.region,\n category: d.category,\n label: d.label\n }));\n return annotations;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2629,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3574,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2597,"value":"maxDate = new Date()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"x = d3\n .scaleUtc()\n .domain([d3.min(filteredData, d => d.date), maxDate])\n .range([margin.left, widthNow - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2790,"value":"x2 = d3\n .scaleUtc()\n .domain(d3.extent(annotations, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3355,"value":"y = d3\n .scaleLinear()\n .domain([\n d3.extent(filteredData, d => +d.value)[0] - rangeDiv,\n d3.extent(filteredData, d => +d.value)[1] + rangeDiv\n ])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"xAxis = (g, x, height) =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(x)\n .tickFormat(d =>\n d.toLocaleString(\"de-CH\", {\n month: \"short\",\n day: \"numeric\"\n })\n )\n .ticks(widthNow / 80)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"yAxis = (g, y, title) =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(\n d3\n .axisLeft(y)\n .tickFormat(d => d.toLocaleString(\"de-CH\", { thousands: \"'\" }))\n )\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3066,"value":"xAxisYear = (g, x, height) =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom + 20})`)\n .call(\n d3\n .axisBottom(x)\n .ticks(d3.utcYear)\n .tickFormat(d3.timeFormat('%Y'))\n .tickSizeOuter(0)\n )\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3261,"value":"yFocus = d3\n .scaleLinear()\n .domain([\n d3.min(filteredData, d => +d.value),\n d3.max(filteredData, d => +d.value)\n ])\n .range([focusHeight - marginFocus.bottom - marginFocus.top, marginFocus.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3297,"value":"xAxisFocus = (g, x, height) =>\n g\n .attr(\n \"transform\",\n `translate(0,${focusHeight - marginFocus.bottom - marginFocus.top - 25})`\n )\n .call(\n d3\n .axisBottom(x)\n .tickFormat(d =>\n d.toLocaleString(\"de-CH\", {\n month: \"short\",\n day: \"numeric\"\n })\n )\n .ticks(widthNow / 80)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3327,"value":"xAxisYearFocus = (g, x, height) =>\n g\n .attr(\"transform\", `translate(0,${focusHeight - marginFocus.bottom - 10})`)\n .call(\n d3\n .axisBottom(x)\n .ticks(d3.utcYear)\n .tickFormat(d3.timeFormat('%Y'))\n .tickSizeOuter(0)\n )\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3257,"value":"yAxisFocus = (g, y, title) =>\n g\n .attr(\"transform\", `translate(${marginFocus.left},0)`)\n .call(\n d3\n .axisLeft(yFocus)\n .tickFormat(d => d.toLocaleString(\"de-CH\", { thousands: \"'\" }))\n )\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3058,"value":"rangeDiv = (d3.extent(filteredData, d => +d.value)[1] -\n d3.extent(filteredData, d => +d.value)[0]) *\n 0.1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"md`## Parameters\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"margin = ({ top: 50, right: 30, bottom: 50, left: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3284,"value":"marginFocus = ({ top: 10, right: 30, bottom: 10, left: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2615,"value":"widthNow = d3.min([750, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"height = 440","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"focusHeight = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"area = (x, y) =>\n d3\n .area()\n //.defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3061,"value":"line = (x, y) =>\n d3\n .line()\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y(d => y(d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3080,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"update = {\n const [minX, maxX] = focus;\n const maxY = d3.max(filteredData, d =>\n minX <= d.date && d.date <= maxX ? d.value : NaN\n );\n let minY = d3.min(filteredData, d =>\n minX <= d.date && d.date <= maxX ? d.value : NaN\n );\n minY > 0 ? (minY = 0) : (minY = minY);\n chart.update(x.copy().domain(focus), y.copy().domain([minY, maxY]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2829,"value":"function formatValue(value) {\n return value.toLocaleString(\"de-CH\", {\n thousands: \"'\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"parseTime = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"formatTime = d3.timeFormat(\"%e %B\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2631,"value":"function formatDateShort(date) {\n return date.toLocaleString(\"de-CH\", {\n month: \"short\",\n day: \"numeric\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2399,"value":"function sortByDateAscending(a, b) {\n // Dates will be cast to numbers automagically:\n return a.date - b.date;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"md`## Tooltip`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1918,"value":"mutable lookup = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"md`## Imports & Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4075,"value":"md`## Resources\n- [Custom List Number Styling](https://css-tricks.com/custom-list-number-styling/)\n- [Styling Lists: Padding for the bullet to sit inside — 16px plus 4px of space between the bullet and the list item text works well.](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1"}} 27:"$26:body"