2c:T82f,oil_chart = Plot.plot({ height: 260, marginBottom: 40, marginTop: 30, insetLeft: 10, insetBottom: 10, width, y: { label: "Dollar/Barrel", domain: [ymin, ymax] }, x: { label: null }, marks: [ // x-Achse Plot.axisX({ ticks: time_select == "3 Jahre" ? "year" : time_select == "1 Jahr" ? "3 months" : time_select == "6 Monate" ? "month" : "2 weeks", tickFormat: (d) => time_select == "3 Jahre" ? d.toLocaleString("de", { year: "numeric" }) : (time_select == "1 Jahr") | (time_select == "6 Monate") ? d.toLocaleString("de", { month: "short" }) : d.toLocaleString("de", { day: "numeric", month: "short" }), textAnchor: "center" }), // Jahreszahl Plot.axisX({ ticks: "year", fillOpacity: time_select == "3 Jahre" ? 0 : 1, tickSize: 0, dy: 15, textAnchor: "center" }), // Grid lines Plot.gridY({ stroke: "#99AFC2", strokeWidth: 1, strokeOpacity: 0.2 }), // Linie Plot.line(brent_distinct, { x: "datum", y: (d) => d.brent, stroke: "#4f80ff", strokeWidth: 2 }), // Area Chart withGradient({ color: "#4f80ff" }, (fill) => Plot.areaY(brent_distinct, { x: "datum", y: ymin, y2: (d) => d.brent, fill }) ), // feststehende vertical line plotCustomPointerFix(brent_distinct, { x: "datum", y: (d) => d.brent, color: "#4f80ff" }), // vertical line plotCustomPointer(brent_distinct, { x: "datum", y: (d) => d.brent, color: "#4f80ff" }), // feststehendes Tooltip plotCustomTooltipFix(brent_distinct, { tooltipHeight: 30, tooltipWidth: 146, x: "datum", y: (d) => d.brent, currency: "Dollar" }), // Tooltip plotCustomTooltip(brent_distinct, { tooltipHeight: 30, tooltipWidth: 146, x: "datum", y: (d) => d.brent, currency: "Dollar" }) ] })2d:Tcf6,function buttonsBCF( buttons, { initial = "6 Monate", width = 300, rows = 1, backgroundNotSelected = "#eff3f5", radius = 5 } = {} ) { // handle defaults var buttonCount = buttons.length + 1; var buttonRows = []; var buttons2 = JSON.parse(JSON.stringify(buttons)).map(function (b, i) { b = typeof b == "string" ? { text: b } : b; b.value = b.value === undefined ? b.text : b.value; b.colour = b.colour === undefined ? "#597A96" : b.colour; b.row = Math.floor((i + 1) / (buttonCount / rows)); buttonRows[b.row] = buttonRows[b.row] === undefined ? 1 : buttonRows[b.row] + 1; b.column = i - d3.sum(buttonRows.filter((e, j) => j < b.row)); return b; }); var buttonWidth = buttonRows.map((d) => width / d); // main div const view = d3 .create("div") .attr("name", "button") .style("width", width + "px") .style("height", 25 * rows - 2 + "px") // 30px with padding per row .style("padding", "1px"); var node = view.node(); node.value = initial || buttons2[0].value; // draw the buttons var buttonsDiv = view .selectAll("div") .data(buttons2) .join("div") .attr("id", (b) => b.value) .text((b) => b.text) .style("position", "absolute") // .style("top", (b) => b.row * 20 + "px") .style("left", (b, i) => b.column * buttonWidth[b.row] + "px") // .style("display", "inline-block") .style("box-sizing", "border-box") .style("height", "26px") .style("font-size", "12px") .style("font-family", "InterRegular") .style("text-align", "center") .style("padding-top", "4px") .style( "width", (b, i) => (b.column == buttonRows[b.row] - 1 ? buttonWidth[b.row] : buttonWidth[b.row] - 1) + "px" ) .style("margin-right", (b, i) => b.column == buttonRows[b.row] - 1 ? "0px" : "1px" ) // .style("font-weight", "bold") .style("border-top-left-radius", (b, i) => b.row == 0 && b.column == 0 ? radius + "px" : "0px" ) .style("border-bottom-left-radius", (b, i) => b.row == rows - 1 && b.column == 0 ? radius + "px" : "0px" ) .style("border-top-right-radius", (b, i) => b.row == 0 && b.column == buttonRows[b.row] - 1 ? radius + "px" : "0px" ) .style("border-bottom-right-radius", (b, i) => b.row == rows - 1 && b.column == buttonRows[b.row] - 1 ? radius + "px" : "0px" ) .on("click", function (event, b) { node.value = b.value; node.dispatchEvent(new Event("input", { bubbles: true })); update(); }) .on("mouseover", function (event, d) { d3.select(this).style("background", (b) => node.value == b.value ? d3.lab(b.colour).darker(0.4).toString() : d3.lab(backgroundNotSelected).darker(0.2).toString() ); }) .on("mouseout", function (event, d) { d3.select(this).style("background", (b) => node.value == b.value ? b.colour : backgroundNotSelected ); }); // redraw on selection update var update = () => buttonsDiv .style("background", (b) => node.value == b.value ? b.colour : backgroundNotSelected ) .style("color", (b) => (node.value == b.value ? "#FFF" : b.colour)); update(); return view.node(); }2e:T87b,function plotCustomTooltipFix( data, { tooltipHeight, tooltipWidth, x, y, currency } ) { return Plot.marks( Plot.tip( data, Plot.selectFirst({ x: x, y: y, // Extend the tip mark render function render: (index, scales, values, dimensions, context) => { const g = d3.select(context.ownerSVGElement).append("g"); const [i] = index; if (i !== undefined) { const formatTime = (d) => d.toLocaleString("de", { year: "numeric", month: "numeric", day: "numeric" }); const priceDate = formatTime(values.channels.x.value[i]); const closePrice = values.channels.y.value[i].toLocaleString("de", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); // The tooltip starts after the left margin in the x-axis to avoid blocking the y-axis labels // We start to translate the tooltip when the pointer is halfway the initial tooltip location // We stop moving the tooltip when there's not enough width available within the container const currentXPosition = values.x[i]; const tooltipStartPosition = dimensions.marginLeft; const tooltipDefaultPosition = currentXPosition - tooltipWidth / 2; const tooltipEndPosition = dimensions.width - dimensions.marginRight - tooltipWidth; g.attr( "transform", `translate(${Math.min( currentXPosition <= tooltipWidth / 2 + dimensions.marginLeft ? tooltipStartPosition : tooltipDefaultPosition, tooltipEndPosition )}, 0)` ).append( () => svg`${htmlTooltip({ price: closePrice, date: priceDate, currency: currency, width: tooltipWidth, height: tooltipHeight })}` ); } return g.node(); } }) ) ); }2f:T8b1,function plotCustomTooltip( data, { tooltipHeight, tooltipWidth, x, y, currency } ) { return Plot.marks( Plot.tip( data, Plot.pointerX({ x: x, y: y, // Extend the tip mark render function render: (index, scales, values, dimensions, context) => { const g = d3.select(context.ownerSVGElement).append("g"); const [i] = index; if (i !== undefined) { // const formatTime = d3.utcFormat("%d %b %Y"); const formatTime = (d) => d.toLocaleString("de", { year: "numeric", month: "numeric", day: "numeric" }); const priceDate = formatTime(values.channels.x.value[i]); const closePrice = values.channels.y.value[i].toLocaleString("de", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); // The tooltip starts after the left margin in the x-axis to avoid blocking the y-axis labels // We start to translate the tooltip when the pointer is halfway the initial tooltip location // We stop moving the tooltip when there's not enough width available within the container const currentXPosition = values.x[i]; const tooltipStartPosition = dimensions.marginLeft; const tooltipDefaultPosition = currentXPosition - tooltipWidth / 2; const tooltipEndPosition = dimensions.width - dimensions.marginRight - tooltipWidth; g.attr( "transform", `translate(${Math.min( currentXPosition <= tooltipWidth / 2 + dimensions.marginLeft ? tooltipStartPosition : tooltipDefaultPosition, tooltipEndPosition )}, 0)` ).append( () => svg`${htmlTooltip({ price: closePrice, date: priceDate, currency: currency, width: tooltipWidth, height: tooltipHeight })}` ); } return g.node(); } }) ) ); }30:Te1b,style = html`

`31:[] 2a:{"title":"Ölpreis","cells":[{"id":0,"value":"# Ölpreis","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"oil_title = md`

Entwicklung des Ölpreises

Entwicklung des Preises für Rohöl der Marke Brent in US-Dollar je Barrel. Stand: ${brent[0].stand} um ${brent[0].zeit} Uhr

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"viewof time_select = buttonsBCF([\"3 Jahre\", \"1 Jahr\", \"6 Monate\", \"1 Monat\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"oil_credits = md`

Grafik: Christ/RND • Quelle: Yahoo Finanace

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"start_date = time_select == \"3 Jahre\"\n ? addMonthsToDate(date_max, -36)\n : time_select == \"1 Jahr\"\n ? addMonthsToDate(date_max, -12)\n : time_select == \"6 Monate\"\n ? addMonthsToDate(date_max, -6)\n : time_select == \"1 Monat\"\n ? addMonthsToDate(date_max, -1)\n : date_max","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"date_max = d3.max(brent.map((d) => d.datum))","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"ymax = +Math.ceil(d3.max(brent_filtered.map((d) => d.brent))).toFixed(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"ymin = +Math.floor(d3.min(brent_filtered.map((d) => d.brent))).toFixed(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"// https://www.investing.com/commodities/brent-oil-historical-data\nbrent_data = read(\n \"https://docs.google.com/spreadsheets/d/1TM2dbS4NX6D7gVcnaiqYiQ1oJ5SpAI4G5Qh0hkJfoDU/edit?gid=1724205693#gid=1724205693\",\n \"oil\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"brent = brent_data.map((d) => ({\n stand: d.stand,\n zeit: d.zeit,\n datum: new Date(d.date),\n brent: +d.price\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"brent_filtered = brent.filter((d) => (d.datum > start_date) & (d.brent > 0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"brent_sorted = brent_filtered.sort((a, b) => b.datum - a.datum)","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"brent_distinct = [...new Set(brent_sorted)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":" function addMonthsToDate(date, months) {\n let new_date = new Date(date);\n new_date.setMonth(new_date.getMonth() + months);\n return new_date;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"function plotCustomPointerFix(data, { x, y, color }) {\n return Plot.marks(\n Plot.ruleX(\n data,\n Plot.selectFirst({\n x: x,\n py: y,\n stroke: \"#99AFC2\",\n strokeDasharray: \"2,5\",\n opacity: 0.6,\n strokeWidth: 1.5\n })\n ),\n Plot.dot(\n data,\n Plot.selectFirst({\n x: x,\n y: y,\n r: 3,\n fill: color\n })\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"function plotCustomPointer(data, { x, y, color }) {\n return Plot.marks(\n Plot.ruleX(\n data,\n Plot.pointerX({\n x: x,\n py: y,\n stroke: \"#99AFC2\",\n strokeDasharray: \"2,5\",\n opacity: 0.6,\n strokeWidth: 1.5\n })\n ),\n Plot.dot(\n data,\n Plot.pointerX({\n x: x,\n y: y,\n r: 3,\n fill: color\n })\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"function withGradient({ color, id = DOM.uid(\"gradient\").id }, callback) {\n return [\n callback(`url(#${id})`),\n () => svg`\n \n \n \n \n \n \n `\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"htmlTooltip = ({ price, date, currency, width, height }) =>\n `\n\n

\n ${price} ${currency}${date}\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"read = async function (url, sheet) {\n if (!url) return \"Provide URL above\";\n let result = [];\n const path = googleSpreadsheetURLAdaptor(url, sheet);\n const spreadsheet = await d3\n .csv(path)\n .then((data) => data.forEach((d) => result.push(d))); // d3.csv returns a Promise\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"googleSpreadsheetURLAdaptor = (path, sheet) => {\n // adjust path if given a path to a google doc but without the correct export suffix. the first sheet is taken since none is specified\n const GOOGLE_DOC_PREFIX = \"https://docs.google.com/spreadsheets/\";\n\n if (\n path.includes(GOOGLE_DOC_PREFIX) &&\n !path.includes(\"tqx=out:csv\") &&\n !path.includes(\"/pub?\")\n ) {\n const googleDocParsedUrl = path.split(GOOGLE_DOC_PREFIX)[1].split(\"/\");\n const googleDocId = googleDocParsedUrl[googleDocParsedUrl.indexOf(\"d\") + 1];\n return (\n GOOGLE_DOC_PREFIX +\n \"d/\" +\n googleDocId +\n \"/gviz/tq?tqx=out:csv\" +\n (sheet ? \"&sheet=\" + encodeURI(sheet.toLowerCase()) : \"\")\n );\n } else {\n return path;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"ns = Inputs.text().classList[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}