3e:null 3f:["$","title",null,{"children":"export to eu agro | data-lab | Observable"}] 45:Ted6,ex = [ { month: "2022-04-01", value: 0, type: "Зерновий коридор" }, { month: "2022-05-01", value: 0, type: "Зерновий коридор" }, { month: "2022-06-01", value: 0, type: "Зерновий коридор" }, { month: "2022-07-01", value: 0, type: "Зерновий коридор" }, { month: "2022-08-01", value: 26, type: "Зерновий коридор" }, { month: "2022-09-01", value: 1677, type: "Зерновий коридор" }, { month: "2022-10-01", value: 3956, type: "Зерновий коридор" }, { month: "2022-11-01", value: 4103, type: "Зерновий коридор" }, { month: "2022-12-01", value: 2842, type: "Зерновий коридор" }, { month: "2023-01-01", value: 3727, type: "Зерновий коридор" }, { month: "2023-02-01", value: 2953, type: "Зерновий коридор" }, { month: "2023-03-01", value: 3458, type: "Зерновий коридор" }, { month: "2023-04-01", value: 3770, type: "Зерновий коридор" }, { month: "2022-04-01", value: 253, type: "Залізниця" }, { month: "2022-05-01", value: 602, type: "Залізниця" }, { month: "2022-06-01", value: 710, type: "Залізниця" }, { month: "2022-07-01", value: 747, type: "Залізниця" }, { month: "2022-08-01", value: 832, type: "Залізниця" }, { month: "2022-09-01", value: 955, type: "Залізниця" }, { month: "2022-10-01", value: 1030, type: "Залізниця" }, { month: "2022-11-01", value: 970, type: "Залізниця" }, { month: "2022-12-01", value: 1120, type: "Залізниця" }, { month: "2023-01-01", value: 1152, type: "Залізниця" }, { month: "2023-02-01", value: 1069, type: "Залізниця" }, { month: "2023-03-01", value: 1020, type: "Залізниця" }, { month: "2023-04-01", value: 1075, type: "Залізниця" }, { month: "2022-04-01", value: 23, type: "Авто" }, { month: "2022-05-01", value: 91, type: "Авто" }, { month: "2022-06-01", value: 212, type: "Авто" }, { month: "2022-07-01", value: 323, type: "Авто" }, { month: "2022-08-01", value: 417, type: "Авто" }, { month: "2022-09-01", value: 624, type: "Авто" }, { month: "2022-10-01", value: 640, type: "Авто" }, { month: "2022-11-01", value: 639, type: "Авто" }, { month: "2022-12-01", value: 677, type: "Авто" }, { month: "2023-01-01", value: 480, type: "Авто" }, { month: "2023-02-01", value: 423, type: "Авто" }, { month: "2023-03-01", value: 465, type: "Авто" }, { month: "2023-04-01", value: 483, type: "Авто" }, { month: "2022-04-01", value: 55, type: "Дунайські порти" }, { month: "2022-05-01", value: 265, type: "Дунайські порти" }, { month: "2022-06-01", value: 799, type: "Дунайські порти" }, { month: "2022-07-01", value: 1070, type: "Дунайські порти" }, { month: "2022-08-01", value: 1379, type: "Дунайські порти" }, { month: "2022-09-01", value: 1264, type: "Дунайські порти" }, { month: "2022-10-01", value: 1210, type: "Дунайські порти" }, { month: "2022-11-01", value: 1137, type: "Дунайські порти" }, { month: "2022-12-01", value: 1218, type: "Дунайські порти" }, { month: "2023-01-01", value: 1348, type: "Дунайські порти" }, { month: "2023-02-01", value: 1006, type: "Дунайські порти" }, { month: "2023-03-01", value: 1345, type: "Дунайські порти" }, { month: "2023-04-01", value: 2022, type: "Дунайські порти" } ].map((d) => { return { ...d, value: d.value / 1000, date: d3.timeParse("%Y-%m-%d")(d.month) }; })46:Taef,vis1 = { d3.timeFormatDefaultLocale({ dateTime: "%A, %e %B %Y р. %X", date: "%d.%m.%Y", time: "%H:%M:%S", periods: ["дп", "пп"], days: [ "неділя", "понеділок", "вівторок", "середа", "четвер", "п'ятниця", "субота" ], shortDays: ["нд", "пн", "вт", "ср", "чт", "пт", "сб"], months: [ "січ.", "лют.", "бер.", "квіт.", "трав.", "черв.", "лип.", "серп.", "вер.", "жовт.", "лист.", "груд." ], shortMonths: [ "січ.", "лют.", "бер.", "квіт.", "трав.", "черв.", "лип.", "серп.", "вер.", "жовт.", "лист.", "груд." ] }); return Plot.plot({ width: width > 600 ? 600 : 240, style: { fontSize: 12 }, y: { // grid: true, tickFormat: (d) => (prop ? d * 100 : d), label: prop ? "експорт, %" : "експорт, млн тонн" }, x: { ticks: width > 600 ? 8 : 4 }, color: { domain: ["Залізниця", "Дунайські порти", "Авто", "Зерновий коридор"], range: ["#f46d43", "#abd9e9", "#fdae61", "#74add1"], legend: true }, marks: [ Plot.rectY( ex, Plot.stackY({ x: "date", y: "value", interval: d3.utcMonth, fill: "type", //stroke: "#fff", // inset: 1, offset: prop ? "expand" : null, order: ["Зерновий коридор", "Дунайські порти", "Залізниця", "Авто"], title: (d) => `${d.type}\n${d.value} млн тонн` // curve: "step-after" }) ), // Plot.ruleY(prop ? [0, 1] : [0]), Plot.ruleX( [ { date: new Date("2023-04-05"), value1: prop ? 0.79 : 5.8, value2: prop ? 1 : 7.35 } ], { x: "date", y1: "value1", y2: "value2" } ), Plot.textX( [ { date: new Date("2023-04-05"), value1: prop ? 0.79 : 5.8, value2: prop ? 1 : 7.35, text: "Експорт у країни Східної Європи (Польща, Словаччина і т. д.)" } ], { x: "date", y: "value1", text: "text", dy: -40, dx: 5, fill: "#000", fontSize: 14, // fontWeight: 600, lineWidth: 10, textAnchor: "start" } ) ] }); }47:T9b5,count = [ { country: "Romania", ua: "Румунія", молоко: null, "м'ясо": 1, зерно: 13.6, насіння: 18.6, горіхи: null }, { country: "Poland", ua: "Польща", молоко: 19.9, "м'ясо": 2.9, зерно: 7, насіння: 12.7, горіхи: 34.5 }, { country: "Hungary", ua: "Угорщина", молоко: null, "м'ясо": null, зерно: 4.4, насіння: 7.1, горіхи: null }, { country: "Slovakia", ua: "Словаччина", молоко: null, "м'ясо": 7, зерно: 1.3, насіння: 2.2, горіхи: null }, { country: "Bulgaria", ua: "Болгарія", молоко: null, "м'ясо": null, зерно: null, насіння: 11.5, горіхи: null }, { country: "Czech Republic", ua: "Чехія", молоко: null, "м'ясо": null, зерно: null, насіння: 0.9, горіхи: 3.6 }, { country: "Moldova", ua: "Молдова", молоко: 10.6, "м'ясо": 2.4, зерно: null, насіння: 2, горіхи: null }, { country: "Italy", ua: "Італія", молоко: null, "м'ясо": null, зерно: 4.4, насіння: 2.3, горіхи: 6.1 }, { country: "Spain", ua: "Іспанія", молоко: null, "м'ясо": null, зерно: 10.8, насіння: 0.9, горіхи: null }, { country: "Germany", ua: "Німеччина", молоко: 8.6, "м'ясо": null, зерно: 1.5, насіння: 8.1, горіхи: 9.3 }, { country: "Netherlands", ua: "Нідерланди", молоко: 4.9, "м'ясо": 27.3, зерно: 3.7, насіння: 2.8, горіхи: 5.2 }, { country: "France", ua: "Франція", молоко: null, "м'ясо": null, зерно: null, насіння: 3.1, горіхи: 6.3 }, { country: "Austria", ua: "Австрія", молоко: null, "м'ясо": null, зерно: null, насіння: null, горіхи: 4.4 }, { country: "Other countries", ua: "Інші країни", молоко: 69.5, "м'ясо": 86.7, зерно: 73.7, насіння: 45, горіхи: 61.9 } ]48:Tb00,vis2 = { let moveX = 260; let moveY = 310; return Plot.plot({ width: width > 600 ? 1300 : 360, height: width > 600 ? 400 : 1560, style: { fontSize: 12 }, // height: 300, projection: d3 .geoMercator() .scale(width > 600 ? 300 : 400) .center([width > 600 ? 85 : 60, 35]) .clipExtent([ [0, 0], [width > 600 ? 250 : 360, 400] ]), color: { legend: true, scheme: "ylorbr", type: "sqrt", label: "% агроекспорту, який припадає на країни ЄС" }, marks: [ [ { leg: "grain", ua: "Зерно", rest: 73.7 }, { leg: "seed", ua: "Насіння, олія", rest: 45 }, { leg: "milk", ua: "Молоко", rest: 70 }, { leg: "meat", ua: "М'ясо", rest: 86.7 }, { leg: "nuts", ua: "Горіхи", rest: 62 } ].map( // Adding legend with circle swatches (dd, i) => [ Plot.geo(land, { fill: "#ddd", dx: width > 600 ? i * moveX : 0, dy: width > 600 ? 0 : i * moveY }), Plot.geo(countries, { stroke: "#fff", dx: width > 600 ? i * moveX : 0, dy: width > 600 ? 0 : i * moveY }), Plot.geo(countries, { fill: (d) => d.properties[dd.leg], stroke: "#333", strokeWidth: 0.5, dx: width > 600 ? i * moveX : 0, dy: width > 600 ? 0 : i * moveY, title: (d) => `${d.properties.ua}\n${d.properties[dd.leg]}%` }), Plot.text([1], { text: (d) => dd.ua, frameAnchor: "top-left", fontSize: 16, fontWeight: 800, dx: width > 600 ? i * moveX : 0, dy: width > 600 ? 0 : i * moveY }), Plot.text( countries.features, Plot.centroid({ text: (d) => d.properties[dd.leg], textAnchor: "middle", // stroke: "white", fill: (d) => (d.properties[dd.leg] > 28 ? "#fff" : "black"), pointerEvents: "none", dx: width > 600 ? i * moveX : 0, dy: width > 600 ? 5 : 5 + i * moveY }) ), () => svg`На інші країни світу: ${ dd.rest }%` ] ) ], caption: html`🖱️ Наведіть мишкою на країни, щоб побачити значення` }); }49:T11d2,addTooltips = (chart, styles) => { const stroke_styles = { stroke: "#000", "stroke-width": 2 }; const fill_styles = { fill: "#000", 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_generator = () => { var S4 = function () { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); }; return "a" + S4() + S4(); }; 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(); } // Function to position the tooltip const hover = (tip, pos, text) => { const side_padding = 10; const vertical_padding = 5; const vertical_offset = 20; // Empty it out tip.selectAll("*").remove(); // Append the text tip .style("text-anchor", "middle") .style("pointer-events", "none") .attr("transform", `translate(${pos[0]}, ${pos[1] + 7})`) .selectAll("text") .data(text) .join("text") .style("dominant-baseline", "ideographic") .text((d) => d) .attr("y", (d, i) => (i - (text.length - 1)) * 15 - vertical_offset) .style("font-weight", (d, i) => (i === 0 ? "bold" : "normal")); const bbox = tip.node().getBBox(); // Add a rectangle (as background) tip .append("rect") .attr("y", bbox.y - vertical_padding) .attr("x", bbox.x - side_padding) .attr("width", bbox.width + side_padding * 2) .attr("height", bbox.height + vertical_padding * 2) .style("fill", "white") .style("stroke", "#d3d3d3") .lower(); }; // Mouse events parent .on("mouseenter", 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`