2b:null 2c:["$","title",null,{"children":"Welthandel | RND | Observable"}] 31:Tea2,chart = addTooltips( Plot.plot({ width: (width, document.body.clientWidth), height: 400, marginLeft: 60, marginRight: 60, marginTop: 10, marginBottom: 40, x: { ticks: 5, grid: true, tickSize: 0, domain: [0, 3000], tickFormat: d => `${(d.toLocaleString("de"))}`, label: "Exporte ->" }, y: { ticks: 4, grid: true, tickSize: 0, domain: [0, 20000], tickFormat: d => `${(d.toLocaleString("de"))}`, label: "BIP ↑" }, r: { range: [0, 40] }, marks: [ Plot.dot(trade_pop_gdp_wb.filter(d => d.jahr === year & d.land === "China"), { x: "export", y: "gdp", r: "population", opacity: 0.8, fill: "#e84f1c", title: (d) => `${d.land} \n ${d.jahr} \n Exporte: ${(d.export.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n BIP: ${(d.gdp.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n Bevölkerung: ${(d.population.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))}` }), Plot.dot(trade_pop_gdp_wb.filter(d => d.jahr === year & d.land === "Deutschland"), { x: "export", y: "gdp", r: "population", fill: "#4f80ff", opacity: 0.8, title: (d) => `${d.land} \n ${d.jahr} \n Exporte: ${(d.export.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n BIP: ${(d.gdp.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n Bevölkerung: ${(d.population.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))}` }), Plot.text(trade_pop_gdp_wb.filter(d => d.jahr === year & d.land === "Deutschland"), { x: "export", y: "gdp", fill: "#fff", text: (d) => "DE", dx: 0, dy: 0, textAnchor: "middle", title: (d) => `${d.land} \n ${d.jahr} \n Exporte: ${(d.export.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n BIP: ${(d.gdp.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n Bevölkerung: ${(d.population.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))}` }), Plot.dot(trade_pop_gdp_wb.filter(d => d.jahr === year & d.land != "China" & d.land != "Deutschland"), { x: "export", y: "gdp", r: "population", fill: "#99AFC2", opacity: 0.5, title: (d) => `${d.land} \n ${d.jahr} \n Exporte: ${(d.export.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n BIP: ${(d.gdp.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n Bevölkerung: ${(d.population.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))}` }), Plot.text(trade_pop_gdp_wb.filter(d => d.jahr === year & (d.land === "China" | d.land === "USA")), { x: "export", y: "gdp", fill: "#fff", text: (d) => d.land, dx: 0, dy: 0, textAnchor: "middle", title: (d) => `${d.land} \n ${d.jahr} \n Exporte: ${(d.export.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n BIP: ${(d.gdp.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n Bevölkerung: ${(d.population.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))}` }) ] }), { opacity: .6, "stroke-width": "1px" } )32:T65c,chart_time = Plot.plot({ width: (width, document.body.clientWidth), height: 600, marginLeft: 90, marginTop: 30, y: { ticks: 10, grid: true, tickSize: 0, tickFormat: d => d.toLocaleString("de", {year: "numeric"}) }, x: { ticks: 4, grid: true, tickSize: 0, domain: [-20000000,10000000], tickFormat: d => `${((Math.abs(d)/1000000).toLocaleString("de"))}`, label: "" }, marks: [ Plot.ruleX([0]), Plot.text([0], { textAnchor: "start", y: (d) => new Date(2022,7,1), x: (d) => -6500000, fill: "#99AFC2", text: (d) => "Saldo", dy: -10, dx: 5 }), Plot.text([0], { textAnchor: "end", y: (d) => new Date(2022,7,1), x: (d) => 9000000, fill: "#4f80ff", text: (d) => "Exporte", dy: -10, dx: 5 }), Plot.text([0], { textAnchor: "start", y: (d) => new Date(2022,7,1), x: (d) => -14500000, fill: "#e84f1c", text: (d) => "Importe", dy: -10, dx: -5 }), Plot.line(bilanz_china, Plot.windowX({ y: "date", x: "Export", stroke: "#4f80ff", k: 3, strict: false, opacity: 0.7 })), Plot.line(bilanz_china, Plot.windowX({ y: "date", x: d => d.Import * -1, stroke: "#e84f1c", k: 3, strict: false, opacity: 0.7 })), Plot.areaX(bilanz_china, Plot.windowX({ y: "date", x: d => (d.Export - d.Import), k: 3, fill: "#99AFC2", strict: false, opacity: 0.5 })) ] })33:T401,chemie = Plot.plot({ width: (width, document.body.clientWidth), height: 460, marginLeft: 20, marginTop: 20, marginRight: 60, marginBottom: 2.5, y: { grid: true, label: "", axis: "right", domain: [0,42], ticks: [1,4,40], tickFormat: d => `${(d*100).toLocaleString("de")}%` }, x: { axis: "top" }, marks: [ Plot.frame(), Plot.ruleY([0]), Plot.text(import_time_china_chemie, Plot.selectFirst({ text: (d) => d.produkt, x: (d) => new Date(2008,0,1), y: 41, textAnchor: "start", dx: 5 }) ), Plot.areaY(import_time_china_chemie, Plot.normalizeY({ x: "date", y: "wert", fill: "#99AFC2", fillOpacity: 0.2, curve: "natural" })), Plot.lineY(import_time_china_chemie, Plot.normalizeY({ x: "date", y: "wert", stroke: "#99AFC2", strokeWidth: 1, curve: "natural" })) ] })34:T4a4,facet = Plot.plot({ width: (width, document.body.clientWidth), height: 850, marginLeft: 20, marginTop: 0, marginRight: 60, fy: { domain: produkte, tickFormat: null }, y: { grid: true, label: "", axis: "right", domain: [0,6.5], ticks: [1,4], tickFormat: d => `${(d*100).toLocaleString("de")}%` }, x: { label: "", tickFormat: d => `${d.toLocaleString("de", {year: "numeric"})}` }, facet: { data: import_time_china_filter, y: "produkt", label: "" }, marks: [ Plot.frame(), Plot.text(import_time_china_filter, Plot.selectFirst({ text: (d) => d.produkt, x: (d) => new Date(2008,0,1), y: 5, textAnchor: "start", dx: 5 }) ), Plot.areaY(import_time_china_filter, Plot.normalizeY({ x: "date", y: "wert", fill: "#99AFC2", fillOpacity: 0.2, curve: "natural" })), Plot.lineY(import_time_china_filter, Plot.normalizeY({ x: "date", y: "wert", stroke: "#99AFC2", strokeWidth: 1, curve: "natural" })) ] })35:T684,myStyles = html` `36:Tb19,function Scrubber(values, { format = value => value, initial = 2020, delay = 400, autoplay = true, loop = true, loopDelay = 4000, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Start"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }37:Tcc7,addTooltips = (chart, styles) => { const stroke_styles = { stroke: "#4f80ff", "stroke-width": 3 }; const fill_styles = { fill: "#4f80ff", opacity: 0.5 }; // Workaround if it's in a figure const type = d3.select(chart).node().tagName; let wrapper = type === "FIGURE" ? d3.select(chart).select("svg") : d3.select(chart); // Workaround if there's a legend.... const svgs = d3.select(chart).selectAll("svg"); if (svgs.size() > 1) wrapper = d3.select([...svgs].pop()); wrapper.style("overflow", "visible"); // to avoid clipping at the edges // Set pointer events to visibleStroke if the fill is none (e.g., if its a line) wrapper.selectAll("path").each(function (data, index, nodes) { // For line charts, set the pointer events to be visible stroke if ( d3.select(this).attr("fill") === null || d3.select(this).attr("fill") === "none" ) { d3.select(this).style("pointer-events", "visibleStroke"); if (styles === undefined) styles = stroke_styles; } }); if (styles === undefined) styles = fill_styles; const tip = wrapper .selectAll(".hover") .data([1]) .join("g") .attr("class", "hover") .style("pointer-events", "none") .style("text-anchor", "middle"); // Add a unique id to the chart for styling const id = id_generator(); // Add the event listeners d3.select(chart).classed(id, true); // using a class selector so that it doesn't overwrite the ID wrapper.selectAll("title").each(function () { // Get the text out of the title, set it as an attribute on the parent, and remove it const title = d3.select(this); // title element that we want to remove const parent = d3.select(this.parentNode); // visual mark on the screen const t = title.text(); if (t) { parent.attr("__title", t).classed("has-title", true); title.remove(); } // Mouse events parent .on("pointerenter pointermove", function (event) { const text = d3.select(this).attr("__title"); const pointer = d3.pointer(event, wrapper.node()); if (text) tip.call(hover, pointer, text.split("\n")); else tip.selectAll("*").remove(); // Raise it d3.select(this).raise(); // Keep within the parent horizontally const tipSize = tip.node().getBBox(); if (pointer[0] + tipSize.x < 0) tip.attr( "transform", `translate(${tipSize.width / 2}, ${pointer[1] + 7})` ); else if (pointer[0] + tipSize.width / 2 > wrapper.attr("width")) tip.attr( "transform", `translate(${wrapper.attr("width") - tipSize.width / 2}, ${ pointer[1] + 7 })` ); }) .on("pointerout", function (event) { tip.selectAll("*").remove(); // Lower it! d3.select(this).lower(); }); }); // Remove the tip if you tap on the wrapper (for mobile) wrapper.on("touchstart", () => tip.selectAll("*").remove()); // Define the styles chart.appendChild(html`