31:T45ea,chart_levels = { //await visibility(); // Chart const svg = d3 .create("svg") .attr("width", isMobile ? myWidth_mobile_levels : myWidth) .attr("height", height_levels) .style("overflow", isMobile ? "visible" : "hidden"); // DEFS elements: const defs = svg.append("defs"); createGradient(defs, "left"); // Axis const axisGroup = svg.append("g").attr("id", "axis"); axisGroup.append("g").call(xAxis_levels); axisGroup.append("g").call(yAxis_levels); // Aux rects for interactions const auxGroup = svg.append("g").attr("id", "aux"); const auxRects = auxGroup .selectAll("a") .data(dataset) .join("a") // Disable anchors on mobile .attr("href", (d) => (isMobile ? null : d.source || null)) .attr("target", "_blank"); if (!isMobile) { auxRects .append("title") .text((d) => (d.source ? locale.titleHoverNote : null)); } const rectsEl = auxRects .append("rect") .attr("data-date", (d) => formatTime(d.date)) .style("opacity", 0) .on("mouseover", onMouseOver) .on("mouseout", onMouseOut); if (!isMobile) { rectsEl .attr("x", (d) => xScale_levels(d.date)) .attr("width", xScale_levels.step()) .attr("y", (d) => margin_levels.top) .attr( "height", (d) => height_levels - margin_levels.top - margin_levels.bottom ); } else { rectsEl .attr("x", (d) => margin_levels.left) .attr("width", myWidth - margin_levels.left - margin_levels.right) .attr("y", (d) => yScale_levels(d.date) + yScale_levels.bandwidth() / 2) .attr("height", yScale_levels.step()); } // CHART ELEMENTS const chartGroup = svg.append("g").attr("id", "chart-elements"); // Lines const linesGroup = chartGroup.append("g").attr("id", "volumen-lines"); const lines = linesGroup .selectAll("line") .data(dataset) .join("line") .attr("class", "volume interactive") .attr("data-date", (d) => formatTime(d.date)) .style("stroke", colorNeutral(80)) .style("pointer-events", "none"); if (!isMobile) { lines .attr("x1", (d) => xScale_levels(d.date) + xScale_levels.bandwidth() / 2) .attr("x2", (d) => xScale_levels(d.date) + xScale_levels.bandwidth() / 2) .attr("y1", (d) => yScale_levels(0)) .attr("y2", (d) => yScale_levels(0)) .style("stroke-width", xScale_levels.bandwidth() * 0.6) .call(highlightCurrentDate) .transition() .duration(transitionDuration) .delay((d, i) => i * transtionDelay) .attr("y2", (d) => yScale_levels(d.volume)); } else { lines .attr("x1", (d) => xScale_levels(0)) .attr("x2", (d) => xScale_levels(0)) .attr("y1", (d) => yScale_levels(d.date) + yScale_levels.bandwidth() / 2) .attr("y2", (d) => yScale_levels(d.date) + yScale_levels.bandwidth() / 2) .style("stroke-width", yScale_levels.bandwidth() * 0.6) .call(highlightCurrentDate) .transition() .duration(transitionDuration) .delay((d, i) => i * transtionDelay) .attr("x2", (d) => xScale_levels(d.volume)); } // Rects const rectsGroup = chartGroup.append("g").attr("id", "trasvases-rects"); const rects = rectsGroup .selectAll("rect") .data(dataset) .join("rect") .attr("data-date", (d) => formatTime(d.date)) .attr("class", "trasvase interactive") .style("fill", (d) => `url(#linear-gradient-${d.level})`) .style("opacity", 0.7) .style("pointer-events", "none"); if (!isMobile) { rects .attr("x", (d) => xScale_levels(d.date) + 1) .attr("width", xScale_levels.bandwidth() - 2) .attr("y", (d) => yScale_levels(d.volume)) .attr("height", 0) .transition() .duration(transitionDuration) .delay((d, i) => 1500 + i * transtionDelay) .attr("height", (d) => yScale_levels(0) - yScale_levels(d.transfer)); } else { rects .attr("x", (d) => xScale_levels(d.volume)) .attr("width", 0) .attr("y", (d) => yScale_levels(d.date) + 1) .attr("height", yScale_levels.bandwidth() - 2) .transition() .duration(transitionDuration) .delay((d, i) => 1500 + i * transtionDelay) .attr( "x", (d) => xScale_levels(d.volume) - (xScale_levels(d.transfer) - xScale_levels(0)) ) .attr("width", (d) => xScale_levels(d.transfer) - xScale_levels(0)); // Growing with time } // Lines - level const linesGroup2 = chartGroup.append("g").attr("id", "levels-lines2"); const lines2 = linesGroup2 .selectAll("line") .data(dataset) .join("line") .attr("class", "level interactive") .attr("data-date", (d) => formatTime(d.date)) //.style("stroke", colorNeutral(1000)) .style("stroke", (d) => d3.color(scaleColor(d.level)).darker(0.9)) .style("stroke-width", 2) .style("pointer-events", "none"); if (!isMobile) { lines2 .attr("x1", (d) => xScale_levels(d.date)) .attr("x2", (d) => xScale_levels(d.date) + xScale_levels.bandwidth()) .attr("y1", yScale_levels(0)) .attr("y2", yScale_levels(0)) .transition() .duration(transitionDuration) .delay((d, i) => i * transtionDelay) .attr("y1", (d) => yScale_levels(d.volume)) .attr("y2", (d) => yScale_levels(d.volume)); } else { lines2 .attr("x1", xScale_levels(0)) .attr("x2", xScale_levels(0)) .attr("y1", (d) => yScale_levels(d.date)) .attr("y2", (d) => yScale_levels(d.date) + yScale_levels.bandwidth()) .transition() .duration(transitionDuration) .delay((d, i) => i * transtionDelay) .attr("x1", (d) => xScale_levels(d.volume)) .attr("x2", (d) => xScale_levels(d.volume)); } // TOOLTIP const tooltip = svg.append("g").attr("id", "tooltip"); const initialHeight = 140; const minHeight = 90; const maxHeight = 200; const lineHeight = 20; const horizOffset = 10; if (!isMobile) { // Lines - level const linesGroup3 = tooltip.append("g").attr("id", "tooltip-lines3"); const lines3 = linesGroup3 .selectAll("line") .data(dataset) .join("line") .attr("class", "tooltip-line interactive") .attr("data-date", (d) => formatTime(d.date)) .attr("x1", (d) => xScale_levels(d.date) + xScale_levels.bandwidth() / 2) .attr("x2", (d) => xScale_levels(d.date) + xScale_levels.bandwidth() / 2) .attr("y1", (d) => yScale_levels(d.volume) - 10) .attr( "y2", (d) => yScale_levels(d.volume) - (d.volume >= 1300 ? minHeight : d.volume <= 400 ? maxHeight : initialHeight) - 10 ) .style("stroke", colorNeutral(900)) .style("stroke-width", 1.5) .call(highlightCurrentDate) .style("pointer-events", "none") .style("opacity", 0); } // Texts const textGroup = tooltip.append("g").attr("id", "texts"); const date = textGroup.append("g"); date .selectAll("text") .data(dataset) .join("text") .attr("class", "interactive") .attr("x", (d) => isMobile ? xScale_levels(d["volume"]) : xScale_levels(d.date) + xScale_levels.bandwidth() / 2 ) .attr("y", (d) => isMobile ? yScale_levels(d.date) + yScale_levels.bandwidth() / 2 + 4 : yScale_levels(d["volume"]) ) .style( "text-anchor", isMobile ? "start" : (d) => (xScale_levels(d.date) <= midPoint ? "start" : "end") ) .attr("dy", (d) => isMobile ? -15 : -(d.volume >= 1300 ? minHeight : d.volume <= 400 ? maxHeight : initialHeight) ) .attr("dx", function (d) { if (isMobile) return 20; else return xScale_levels(d.date) <= midPoint ? horizOffset : -horizOffset; }) .text((d) => isMobile ? formatDateTooltip_mobile(d.date) : formatDateTooltip(d.date) ) .style("font-size", isMobile ? "0.7rem" : "0.8rem") .style("fill", colorNeutral(600)) .style("opacity", 0) .call(highlightCurrentDate) .style("pointer-events", "none") // To improve readability .call((text) => text.clone(true)) .attr("fill", "none") .attr("stroke", colorNeutral(0)) .attr("stroke-width", 6); const volume = textGroup.append("g"); volume .selectAll("text") .data(dataset) .join("text") .attr("class", "interactive") .attr("x", (d) => isMobile ? xScale_levels(d["volume"]) : xScale_levels(d.date) + xScale_levels.bandwidth() / 2 ) .attr("y", (d) => isMobile ? yScale_levels(d.date) + yScale_levels.bandwidth() / 2 : yScale_levels(d["volume"]) ) .style("text-anchor", (d) => isMobile ? "start" : xScale_levels(d.date) <= midPoint ? "start" : "end" ) .attr("dy", (d) => isMobile ? 5 : -(d.volume >= 1300 ? minHeight : d.volume <= 400 ? maxHeight : initialHeight) + lineHeight ) .attr("dx", function (d) { if (isMobile) return 20; else return xScale_levels(d.date) <= midPoint ? horizOffset : -horizOffset; }) .text((d) => isMobile ? formatVolume(d.volume) : `Volumen embalse: ${formatVolume(d.volume)}` ) .style("fill", colorNeutral(1000)) .style("font-weight", 600) .style("font-size", isMobile ? "0.8rem" : "0.9rem") .style("opacity", 0) .call(highlightCurrentDate) .style("pointer-events", "none") // To improve readability .call((text) => text.clone(true)) .attr("fill", "none") .attr("stroke", colorNeutral(0)) .attr("stroke-width", 6); if (!isMobile) { const quantity = textGroup.append("g"); quantity .selectAll("text") .data(dataset) .join("text") .attr("class", "interactive") .attr("x", (d) => xScale_levels(d.date) + xScale_levels.bandwidth() / 2) .attr("y", (d) => yScale_levels(d["volume"])) .style("text-anchor", (d) => xScale_levels(d.date) <= midPoint ? "start" : "end" ) .attr( "dy", (d) => -(d.volume >= 1300 ? minHeight : d.volume <= 400 ? maxHeight : initialHeight) + lineHeight * 2 ) .attr("dx", (d) => xScale_levels(d.date) <= midPoint ? horizOffset : -horizOffset ) .text((d) => `Trasvase mensual: ${formatVolume(d.transfer)}`) .style("fill", (d) => scaleColor(d.level)) .style("font-weight", 800) .style("opacity", 0) .call(highlightCurrentDate) .style("pointer-events", "none"); } const level = textGroup.append("g"); level .selectAll("text") .data(dataset) .join("text") .attr("class", "interactive") .attr("x", (d) => isMobile ? xScale_levels(d["volume"]) : xScale_levels(d.date) + xScale_levels.bandwidth() / 2 ) .attr("y", (d) => isMobile ? yScale_levels(d.date) + yScale_levels.bandwidth() / 2 : yScale_levels(d["volume"]) ) .style("text-anchor", (d) => isMobile ? "start" : xScale_levels(d.date) <= midPoint ? "start" : "end" ) .attr("dy", (d) => isMobile ? 20 : -(d.volume >= 1300 ? minHeight : d.volume <= 400 ? maxHeight : initialHeight) + lineHeight * 3 ) .attr("dx", function (d) { if (isMobile) return 20; else return xScale_levels(d.date) <= midPoint ? horizOffset : -horizOffset; }) .text((d) => `Nivel ${d.level}`) .style("fill", (d) => scaleColor(d.level)) .style("font-size", isMobile ? "0.8rem" : "0.9rem") .style("font-weight", isMobile ? 800 : 400) .style("opacity", 0) .call(highlightCurrentDate) .style("pointer-events", "none") // To improve readability .call((text) => text.clone(true)) .attr("fill", "none") .attr("stroke", colorNeutral(0)) .attr("stroke-width", 6); if (!isMobile) { /// LEVELS RULES // Levels lines const levelsGroup = svg.append("g").attr("id", "levels"); const levels_constant = levelsGroup .selectAll("line") .data([5, ...levelsArray_reduced]) .join("line") .attr("class", "limit-level") .attr("data-level-up", (d, i) => d) .attr("data-level-down", (d, i) => d - 1) .attr( "x1", xScale_levels(dataset[0].date) + xScale_levels.bandwidth() / 2 ) .attr( "x2", xScale_levels(dataset[dataset.length - 1].date) + xScale_levels.bandwidth() ) .attr("y1", (d, i) => yScale_levels([0, ...levelsLimitsArray_reduced][i])) .attr("y2", (d, i) => yScale_levels([0, ...levelsLimitsArray_reduced][i])) .style("stroke", baseColorLevels) .style("opacity", baseOpacityLevels); // Step curve const levels_step = levelsGroup.append("g"); levels_step .append("path") .datum(dataset) .attr("d", line) .attr("class", "limit-level") .attr("data-level-up", 3) .attr("data-level-down", 2) .style("stroke", baseColorLevels) .style("fill", "none") .style("opacity", baseOpacityLevels); // LEGEND LEFT SIDE const legendGroup = svg.append("g").attr("id", "legend"); const legend = legendGroup .selectAll("line") .data([5, ...levelsArray]) .join("line") .attr("class", "limit-level") .attr("data-level-up", (d, i) => d) .attr("data-level-down", (d, i) => d - 1) .attr("x1", 0) .attr("x2", margin_levels.left - 35) .attr("y1", (d, i) => yScale_levels([0, ...levelsLimitsArray][i])) .attr("y2", (d, i) => yScale_levels([0, ...levelsLimitsArray][i])) .style("stroke", baseColorLevels) .style("opacity", baseOpacityLevels); //.style("stroke-dasharray", baseDashArray); const r = 10; const circles = legendGroup .selectAll("circle") .data(levelsArray) .join("circle") .attr("cx", margin_levels.left - 50) .attr("cy", (d, i) => yScale_levels(levelsMiddlePointArray[i]) - r / 2) .attr("r", r) .style("fill", (d) => scaleColor(d)); const texts = legendGroup .append("g") .selectAll("text") .data(levelsArray) .join("text") .attr("x", margin_levels.left - 50) .attr("y", (d, i) => yScale_levels(levelsMiddlePointArray[i])) .text((d) => d) .style("text-anchor", "middle") .style("font-size", "0.8rem") .style("fill", "white"); const texts2 = legendGroup .append("g") .selectAll("text") .data(levelsArray) .join("text") .attr("x", margin_levels.left - 70) .attr("y", (d, i) => yScale_levels(levelsMiddlePointArray[i]) + 1) .text("Nivel") .style("text-anchor", "end") .style("fill", colorNeutral(1000)); const texts3 = legendGroup .append("g") .selectAll("text") .data(levelsArray) .join("text") .attr("x", margin_levels.left - 40) .attr("y", (d, i) => yScale_levels(levelsMiddlePointArray[i]) + 20) .text((d, i) => levelsCategoryArray[i]) .style("text-anchor", "end") .style("fill", (d) => scaleColor(d)) .style("font-size", "0.85rem") .style("font-weight", 700); const offsetArea = 2; const area = legendGroup .selectAll("rect") .data(levelsArray) .join("rect") .attr("class", "interactive area-legend") .attr("data-level", (d) => d) .attr("x", 0) .attr("width", margin_levels.left - 35) .attr("y", (d, i) => yScale_levels(levelsLimitsArray[i]) + offsetArea) .attr("height", (d, i) => levelsHeightArray[i] - offsetArea * 2) .style("fill", colorNeutral(0)) .style("opacity", baseOpacityAreas) .style("cursor", "pointer") .call(highlightCurrentDate) .on("mouseover", onMouseOverArea) .on("mouseout", onMouseOutArea); // Foreign object method // https://observablehq.com/@bumbeishvili/foreignobject-typical-usage const fo = svg .append("foreignObject") // Append for d3.v4 .classed("fo-object", true) .attr("width", 320) .attr("height", height_transfers) .style("pointer-events", "none"); fo.append("xhtml:div") // Append for d3.v4 .classed("trasvase-tooltip", true); } else { // } // TITLES const titles = svg.append("g").attr("id", "titles"); const textElY = titles .append("text") .attr("y", isMobile ? 20 : 20) //.attr("y", height_levels) //.style("text-anchor", isMobile ? "start" : "start") .style("text-anchor", isMobile ? "start" : "start") .style("font-weight", 600) .style("font-size", "0.9rem"); if (!isMobile) { textElY .append("tspan") .text(locale.title_levels1) .attr("dx", 0) .attr("dy", 0) .attr("x", 10); //.attr("x", margin_levels.left); textElY .append("tspan") .text(locale.title_levels2) .attr("dx", 0) .attr("dy", 20) .attr("x", 10); //.attr("x", margin_levels.left); } else { textElY .append("tspan") .text(locale.title_levels1_mobile) .attr("dx", 0) .attr("dy", 0) .attr("x", margin_levels.left); textElY .append("tspan") .text(locale.title_levels2_mobile) .attr("dx", 0) .attr("dy", 20) .attr("x", margin_levels.left); textElY .append("tspan") .text(locale.title_levels3_mobile) .attr("dx", 0) .attr("dy", 20) .attr("x", margin_levels.left); textElY .append("tspan") .text(locale.title_levels4_mobile) .attr("dx", 0) .attr("dy", 20) .attr("x", margin_levels.left); } return svg.node(); }32:T1d09,chart_transfers = { //await visibility(); // Chart const svg = d3 .create("svg") .attr("width", isMobile ? myWidth_mobile_transfers : myWidth) .attr("height", height_transfers) .style("overflow", "visible"); // DEFS elements: const defs = svg.append("defs"); createGradient(defs, "right"); // Axis const axisGroup = svg.append("g").attr("id", "axis"); axisGroup.append("g").call(axis_transfers); // Aux rects for interactions const auxGroup = svg.append("g").attr("id", "aux"); const auxRects = auxGroup .selectAll("a") .data(dataset) .join("a") // Disable links on mobile .attr("href", isMobile ? null : (d) => d.source || null) .attr("target", "_blank"); if (!isMobile) { auxRects .append("title") .text((d) => (d.source ? locale.titleHoverNote : null)); } const rects = auxRects .append("rect") .attr("data-date", (d) => formatTime(d.date)) .style("opacity", 0) .style("cursor", "pointer") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut); if (!isMobile) { rects .attr("x", (d) => xScale_transfers(d.date)) .attr("width", xScale_transfers.step()) .attr("y", (d) => margin_transfers.top) .attr( "height", (d) => height_levels - margin_transfers.top - margin_transfers.bottom ); } else { rects .attr("x", margin_transfers.left) .attr("width", myWidth - margin_transfers.left - margin_transfers.right) .attr("y", (d) => yScale_transfers(d.date)) .attr("height", (d) => yScale_transfers.step()); } // CHART ELEMENTS const chartGroup = svg.append("g").attr("id", "chart-elements"); // Bars const barsGroup = chartGroup.append("g").attr("id", "bars"); const bars = barsGroup .selectAll("rect") .data(dataset) .join("rect") .attr("data-date", (d) => formatTime(d.date)) .attr("class", "trasvase interactive"); if (!isMobile) { bars .attr("x", (d) => xScale_transfers(d.date)) .attr("width", xScale_transfers.bandwidth()) .attr("y", yScale_transfers(0)) .attr("height", 0) .style("fill", (d) => `url(#linear-gradient-${d.level})`) .style("pointer-events", "none") .call(highlightCurrentDate) .transition() .duration(transitionDuration) .delay((d, i) => 1500 + i * transtionDelay) .attr("height", (d) => yScale_transfers(d.transfer) - yScale_transfers(0)) .style("opacity", 0.7); } else { bars .attr("x", (d) => xScale_transfers(0)) .attr("width", 0) .attr("y", (d) => yScale_transfers(d.date)) .attr("height", yScale_transfers.bandwidth()) .style("fill", (d) => `url(#linear-gradient-${d.level})`) .style("pointer-events", "none") .call(highlightCurrentDate) .transition() .duration(transitionDuration) .delay((d, i) => 1500 + i * transtionDelay) .attr("width", (d) => xScale_transfers(d.transfer) - xScale_transfers(0)) // Growing with time .style("opacity", 0.7); } // Lines - reinforzing selection const linesGroup = chartGroup.append("g").attr("id", "lines-selection"); const lines = linesGroup .selectAll("line") .data(dataset) .join("line") .attr("data-date", (d) => formatTime(d.date)) .attr("class", "line-level-0 interactive") //.style("stroke", colorNeutral(1000)) .style("stroke", (d) => d3.color(scaleColor(d.level)).darker(0.7)) .style("stroke-width", 2.5) .style("pointer-events", "none") .call(highlightCurrentDate) .style("opacity", 0.1); if (!isMobile) { lines .attr("x1", (d) => xScale_transfers(d.date)) .attr( "x2", (d) => xScale_transfers(d.date) + xScale_transfers.bandwidth() ) .attr("y1", yScale_transfers(0)) .attr("y2", yScale_transfers(0)); } else { lines .attr("x1", (d) => xScale_transfers(0)) .attr("x2", (d) => xScale_transfers(0)) .attr("y1", (d) => yScale_transfers(d.date)) .attr( "y2", (d) => yScale_transfers(d.date) + yScale_transfers.bandwidth() ); } // TITLES const titles = svg.append("g").attr("id", "titles"); const textEl = titles .append("text") .attr("y", isMobile ? 20 : margin_transfers.top + 5) .style("text-anchor", isMobile ? "start" : "end") .style("font-weight", 600) .style("font-size", "0.9rem"); textEl .append("tspan") .text(isMobile ? locale.title_transfers1_mobile : locale.title_transfers1) .attr("dx", 0) .attr("dy", 0) .attr("x", isMobile ? 0 : margin_transfers.left - 30); textEl .append("tspan") .text(isMobile ? locale.title_transfers2_mobile : locale.title_transfers2) .attr("dx", 0) .attr("dy", 20) .attr("x", isMobile ? 0 : margin_transfers.left - 30); textEl .append("tspan") .text(isMobile ? locale.title_transfers3_mobile : locale.title_transfers3) .attr("dx", 0) .attr("dy", 20) .attr("x", isMobile ? 0 : margin_transfers.left - 30); textEl .append("tspan") .text(isMobile ? locale.title_transfers4_mobile : locale.title_transfers4) .attr("dx", 0) .attr("dy", 20) .attr("x", isMobile ? 0 : margin_transfers.left - 30); // TOOLTIP const tooltip = svg.append("g").attr("id", "tooltip"); // Texts const initialHeight = 20; const horizOffset = 10; const textGroup = tooltip.append("g").attr("id", "texts"); const quantity = textGroup.append("g"); quantity .selectAll("text") .data(dataset) .join("text") .attr("class", "interactive") .attr("x", (d) => isMobile ? xScale_transfers(d.transfer) : xScale_transfers(d.date) + xScale_transfers.bandwidth() / 2 ) .attr("y", (d) => isMobile ? yScale_transfers(d.date) + yScale_transfers.bandwidth() / 2 + 4 : yScale_transfers(0) ) .style("text-anchor", (d) => isMobile ? "start" : xScale_transfers(d.date) <= midPoint ? "start" : "end" ) .attr("dy", isMobile ? 0 : -initialHeight) .attr( "dx", isMobile ? 5 : (d) => xScale_transfers(d.date) <= midPoint ? horizOffset : -horizOffset ) .text((d) => formatVolume(d.transfer)) .style("fill", (d) => scaleColor(d.level)) .style("font-weight", 800) .style("font-size", isMobile ? "0.8rem" : "0.9rem") .style("opacity", 0) .call(highlightCurrentDate) .style("pointer-events", "none"); if (!isMobile) { // TOOLTIP // Lines - level const linesGroup3 = tooltip.append("g").attr("id", "tooltip-lines3"); const lines3 = linesGroup3 .selectAll("line") .data(dataset) .join("line") .attr("class", "tooltip-line interactive") .attr("data-date", (d) => formatTime(d.date)) .attr( "x1", (d) => xScale_transfers(d.date) + xScale_transfers.bandwidth() / 2 ) .attr( "x2", (d) => xScale_transfers(d.date) + xScale_transfers.bandwidth() / 2 ) .attr("y1", (d) => yScale_transfers(0) - 10) .attr("y2", (d) => yScale_transfers(0) - 40) .style("stroke", colorNeutral(900)) //.style("stroke", (d) => scaleColor(d.level)) .style("stroke-width", 1.5) .call(highlightCurrentDate) .style("pointer-events", "none") .style("opacity", 0); } return svg.node(); }33:Td25,function fillLegend(level) { if (level == 4) { return `

Menos de 400 hm3.

Trasvases vetados.

`; } else if (level == 3) { return `

Situación hidrológica excepcional.

Más de 400 mh3 y menos de una cantidad establecida para cada época del año.

Los aprueba la ministra.

Máximo de 20 hm3 al mes.

`; } else if (level == 2) { return `

Más de una cantidad establecida para cada época del año y menos de 1.300 mh3.

Se aprueban de forma automática.

A mediados de 2021 el máximo pasó de 38 a 27 hm3 al mes.

`; } else if (level == 1) { return `

A partir de 1.300 hm3.

Se aprueban de forma automática.

Máximo de 68 hm3 al mes.

`; } }34:T4b0,// Def svg gradient createGradient = (g, direction) => { const linearGradient = g .selectAll("linearGradient") .data([1, 2, 3, 4]) .join("linearGradient") .attr("gradientUnits", "objectBoundingBox") // So it's relative to each element .attr("id", (d) => `linear-gradient-${d}`) .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "0%") .attr("y2", "100%"); // Repeating some parameters as Safari has a bug if they are not specified again: if (direction === "left" && isMobile) { linearGradient.attr("x1", "0%"); linearGradient.attr("x2", "100%"); linearGradient.attr("y1", "0%"); linearGradient.attr("y2", "0%"); } else if (direction === "right" && isMobile) { linearGradient.attr("x1", "0%"); linearGradient.attr("x2", "100%"); linearGradient.attr("y1", "0%"); linearGradient.attr("y2", "0%"); } linearGradient .append("stop") .attr("offset", "50%") .attr("stop-color", (d) => scaleColor(d)); linearGradient .append("stop") .attr("offset", "100%") .attr("stop-color", "white") //https://github.com/d3/d3-color .attr("stop-color", (d) => d3.color(scaleColor(d)).copy({ opacity: 0.2 })); }35:[{"id":"9222f35c2bfc6848ee82b2cfc61ae600b7c1ecf3e74964dd6fcb3adccb871b56d223ce5ba82098c8a9580e4c8243743ef007d87b3adf79ae8bfd5e0ab758b4ab","href":"https://static.observableusercontent.com/files/9222f35c2bfc6848ee82b2cfc61ae600b7c1ecf3e74964dd6fcb3adccb871b56d223ce5ba82098c8a9580e4c8243743ef007d87b3adf79ae8bfd5e0ab758b4ab","name":"mobile_legend.svg","type":"image/svg+xml","lastModified":1661344297642.824,"size":269342},{"id":"d806fed34c5452cfe63b4e92cde04de29283f36ecee9b181e292ba72669754dec4203e6ba5d10f714d2c2e309d71e1aee08525a71011a8ab7243f54241420b7c","href":"https://static.observableusercontent.com/files/d806fed34c5452cfe63b4e92cde04de29283f36ecee9b181e292ba72669754dec4203e6ba5d10f714d2c2e309d71e1aee08525a71011a8ab7243f54241420b7c","name":"mobile_legend_svgText@2.svg","type":"image/svg+xml","lastModified":1661350292069.408,"size":55749},{"id":"b6c0ca6bd8ada6a7b194dd215f53ce271ca25d7c07aa84b1f839dedf3366ff627d8d6a0cdcbb157304c8cbc1e824b28b9431a1a699fc448418ffd0210ba50650","href":"https://static.observableusercontent.com/files/b6c0ca6bd8ada6a7b194dd215f53ce271ca25d7c07aa84b1f839dedf3366ff627d8d6a0cdcbb157304c8cbc1e824b28b9431a1a699fc448418ffd0210ba50650","name":"mobile_legend_svgTraced@1.svg","type":"image/svg+xml","lastModified":1661351277873.395,"size":274169},{"id":"15a2619efe58d145639cc5c61b6689badc72654499806a53b9fb8d7428f2fc4f7d41e4770b698f25c10297477c0c77e7bf33fff82899bee1e2bb36e5fd1ab09e","href":"https://static.observableusercontent.com/files/15a2619efe58d145639cc5c61b6689badc72654499806a53b9fb8d7428f2fc4f7d41e4770b698f25c10297477c0c77e7bf33fff82899bee1e2bb36e5fd1ab09e","name":"mobile_legend_svgTraced@2.svg","type":"image/svg+xml","lastModified":1661351324502.212,"size":282153},{"id":"b1441b20653ce3aee31c03602f974e2f12da115b8bcb19994904e402031f5121df3b882a358bcb7329ac6b98b13a3d0e3ac9917832bb73639dce75f617bfd859","href":"https://static.observableusercontent.com/files/b1441b20653ce3aee31c03602f974e2f12da115b8bcb19994904e402031f5121df3b882a358bcb7329ac6b98b13a3d0e3ac9917832bb73639dce75f617bfd859","name":"mobile_legend_svgTraced@3.svg","type":"image/svg+xml","lastModified":1661351424155.886,"size":274816}] 2f:{"title":"#150 Evolution of the water transfers from the Tagus to the Segura 💧","cells":[{"id":0,"value":"# #150 Evolution of the water transfers from the Tagus to the Segura 💧\n## Evolución de los trasvases del Tajo al Segura \n\n.\n\nWe have been reporting on [these transfers](https://en.wikipedia.org/wiki/Tagus-Segura_Water_Transfer#:~:text=The%20Tagus%2DSegura%20Water%20Transfer%20links%20the%20Bolarque%20Reservoir%20on,1%2C200%20cubic%20feet%20per%20second) and explaining their rules for years. Now we have created this chart with the status of the reservoirs and the transfers approved since 2018. We will update it with each new development.\n\n**Article published in Civio (25/08/22):**\n- Spanish version: [Lo que pasó en el BOE mientras medio país estaba de vacaciones](https://civio.es/el-boe-nuestro-de-cada-dia/2022/08/25/boe-de-verano/#trasvase).\n\n**Past articles about this topic:**\n- [List articles about the Tagus-Segura water transfers](https://civio.es/tag/trasvases/) (In Spanish)\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":4212,"value":"viewof deviceSelection = Inputs.radio([\"mobile\", \"desktop\"], {\n label: \"Responsiveness testing\",\n value: \"desktop\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3665,"value":"

${mobileLegend}

${chart_levels}

${chart_transfers}

${interactionNote_responsive}

","pinned":false,"hidden":false,"mode":"html"},{"id":1091,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1418,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4086,"value":"interactionNote_responsive = isMobile\n ? html`

Toca en cada elemento para ver el volumen del embalse y su nivel asociado (←) y el trasvase aprobado ese mes (→).

`\n : html`

Explora los datos en detalle interaccionando con la línea temporal y los niveles a la izquierda del gráfico. Puedes consultar la fuente de cada trasvase haciendo click sobre él.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4122,"value":"mobileLegend = isMobile\n ? html`

${locale.title_levelsRules}

\n $\"Leyenda$

`\n : html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"\n\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":44,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":3069,"value":"function giveLegendHeight(level) {\n if (level == 4) return 410;\n else if (level == 3) return 160;\n else if (level == 2) return 160;\n else if (level == 1) return 60;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3040,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1474,"value":"transitionDuration = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":1476,"value":"transtionDelay = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"highlightCurrentDate = (g) => {\n // Hightlight currentDate one as default\n g.filter((d) => formatTime(d.date) == currentDate).classed(\n \"currentDate\",\n true\n );\n\n d3.select(`.area-legend[data-level=\"${currentLevel}\"]`).classed(\n \"currentDate\",\n true\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"function onMouseOver(event, d, i) {\n d3.selectAll(\".interactive\").classed(\"currentDate\", false);\n\n d3.selectAll(\".interactive\")\n .filter((e) => e.date == d.date)\n .classed(\"currentDate\", true);\n\n d3.select(`.area-legend[data-level=\"${d.level}\"]`).classed(\n \"currentDate\",\n true\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"function onMouseOut(event, d, i) {\n d3.selectAll(\".interactive\").classed(\"currentDate\", false);\n d3.selectAll(\".interactive\").call(highlightCurrentDate);\n\n d3.selectAll(\".area-legend\").call(highlightCurrentDate);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1785,"value":"function onMouseOverArea(event, d, i) {\n function highlight(g) {\n g.style(\"stroke\", scaleColor(d))\n .style(\"stroke-dasharray\", 0)\n .style(\"opacity\", 1);\n }\n\n d3.selectAll(\".area-legend\").classed(\"currentDate\", false);\n d3.select(this).classed(\"currentDate\", true);\n\n const mylineUp = d3\n .selectAll(`.limit-level[data-level-up=\"${d}\"]`)\n .call(highlight);\n\n const mylineDown = d3\n .selectAll(`.limit-level[data-level-down=\"${d}\"]`)\n .call(highlight);\n\n // Unhighlight the currentDate\n d3.selectAll(\"g#tooltip\").style(\"visibility\", \"hidden\");\n\n d3.selectAll(\".volume,.level,.line-level-0,.trasvase\")\n .classed(\"currentDate\", (e) => e.level == d)\n .classed(\"hide\", (e) => e.level !== d);\n\n // Tooltip foreign-object stuff\n d3.select(\".fo-object\")\n .style(\"visibility\", \"visible\")\n .attr(\n \"transform\",\n `translate(${margin_transfers.left + 20},${giveLegendHeight(d)})`\n )\n .select(\".trasvase-tooltip\")\n .html(fillLegend(d));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1788,"value":"function onMouseOutArea(event, d, i) {\n d3.select(this).classed(\"currentDate\", false);\n d3.selectAll(\".area-legend\").call(highlightCurrentDate);\n\n d3.selectAll(\".limit-level\")\n .style(\"stroke\", baseColorLevels)\n .style(\"stroke-width\", 1)\n .style(\"opacity\", baseOpacityLevels);\n\n d3.selectAll(\"g#tooltip\").style(\"visibility\", \"visible\");\n\n d3.selectAll(\".volume,.level,.line-level-0,.trasvase\").classed(\n \"hide\",\n false\n );\n\n // Tooltip foreign-object stuff\n d3.select(\".fo-object\").style(\"visibility\", `hidden`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"---\n\n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":551,"value":"dateId = new Date().getTime() // To avoid cache problems","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"//dataURL = `https://data.civio.es/elboenuestrodecadadia/trasvases-tajo-segura/trasvases-tajo-segura-future-scenario.csv?q=${dateId}` // Testing future scenario\ndataURL = `https://data.civio.es/elboenuestrodecadadia/trasvases-tajo-segura/trasvases-tajo-segura.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"//dataRaw = await d3.csv(dataURL, d3.autoType) // ❌ This is causing the following filter by date not working properly\ndataRaw = await d3.csv(dataURL)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4265,"value":"**Note:** We need the latest date of the chart to be defined via a URL parameter when embedding, to have the chart matching the article publish date each time is used.","pinned":false,"hidden":false,"mode":"md"},{"id":397,"value":"//currentDate = \"2020-04-01\" // Example. To be defined when embedding, via URL parameter\ncurrentDate = dataRaw[dataRaw.length - 1].fecha // Default: last date from dataset","pinned":false,"hidden":false,"mode":"ojs"},{"id":1982,"value":"currentLevel = dataset.filter((d) => formatTime(d.date) == currentDate)[0].level","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"fillLimit = (date) => {\n const month = date.getMonth(); // Starting from 0\n return level3_limitArray[month]; // Starting from 0\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"dataModif = {\n const dataCleaning = dataRaw\n .map((d) => ({\n //...d,\n date: parseDate(d.fecha),\n transfer: +d.cantidad_mensual,\n volume: +d.volumen_embalse,\n level: +d.nivel,\n level3_limit: fillLimit(parseDate(d.fecha)),\n source: d.orden || d.acuerdo || \"\"\n }))\n .filter((d) => d.date <= parseDate(currentDate)); // It will be defined by url parameter\n\n return dataCleaning;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"dataset = dataModif","pinned":false,"hidden":false,"mode":"ojs"},{"id":1703,"value":"---\n\n#### Levels data","pinned":false,"hidden":false,"mode":"md"},{"id":1179,"value":"//maxVolume = level1_limit\nviewof maxVolume = Inputs.range([level2_limit, level1_limit], {\n value: 1600,\n label: \"Max volumne on y axis\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1753,"value":"levelsCategoryArray = [\n locale.level1,\n locale.level2,\n locale.level3,\n locale.level4\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"level4_limit = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"level3med_limit = d3.mean(level3_limitArray)","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"// Monthly limits\nlevel3_limitArray = [602, 597, 591, 585, 645, 673, 688, 661, 631, 613, 609, 605]","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"level2_limit = 1300","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"level1_limit = 2475","pinned":false,"hidden":false,"mode":"ojs"},{"id":1720,"value":"levelsLimitsArray = [level4_limit, level3med_limit, level2_limit, level1_limit]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1768,"value":"levelsLimitsArray_reduced = levelsLimitsArray.filter((d, i) => i != 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1761,"value":"levelsArray_reduced = levelsArray.filter((d, i) => i != 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1717,"value":"levelsArray = [4, 3, 2, 1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1083,"value":"levelsMiddlePointArray = [\n level4_limit / 2,\n +level4_limit + (level3med_limit - level4_limit) / 2,\n (level2_limit + level2_limit - level3med_limit) / 2,\n level2_limit + (maxVolume - level2_limit) / 2\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1739,"value":"levelsHeightArray = [\n yScale_levels(0) - yScale_levels(level4_limit),\n yScale_levels(level4_limit) - yScale_levels(level3med_limit),\n yScale_levels(level3med_limit) - yScale_levels(level2_limit),\n yScale_levels(level2_limit) - yScale_levels(level1_limit)\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"---\n\n### Scales\n\nScales depending on responsive design desktop/mobile","pinned":false,"hidden":false,"mode":"md"},{"id":208,"value":"datesArray = Array.from(new Set(dataset.map((d) => d.date)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3306,"value":"xScale_transfers = isMobile\n ? xScale_transfers_mobile_quantity\n : xScale_transfers_desktop_dates","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"// https://observablehq.com/@d3/d3-scaleband\nxScale_transfers_desktop_dates = d3\n .scaleBand()\n .domain(datesArray)\n .range([margin_transfers.left, myWidth - margin_transfers.right]) // [left, right]\n .paddingInner(0.3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3313,"value":"// https://observablehq.com/@d3/d3-scaleband\nxScale_transfers_mobile_quantity = d3\n .scaleLinear()\n //.domain([0, d3.max(dataset, (d) => d.transfer)]) // Domain from real data\n .domain([0, maxQuantity]) // Better having maxQuantity as reference\n .range([\n margin_transfers.left,\n myWidth_mobile_transfers - margin_transfers.right\n ]) // [left, right]\n .nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3605,"value":"yScale_legend = d3\n .scaleLinear()\n //.domain([0, d3.max(dataset, (d) => d.transfer)]) // Domain from real data\n .domain([0, maxVolume]) // Better having maxQuantity as reference\n .range([0, height_levels - margin_levels.top - margin_levels.bottom]) // [bottom, top]\n .nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3310,"value":"xScale_levels = isMobile ? xScale_levels_mobile_quantity : xScale_levels_desktop_dates","pinned":true,"hidden":false,"mode":"ojs"},{"id":719,"value":"// https://observablehq.com/@d3/d3-scaleband\nxScale_levels_desktop_dates = d3\n .scaleBand()\n .domain(datesArray)\n .range([margin_levels.left, myWidth - margin_levels.right]) // [left, right]\n .paddingInner(0.2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3315,"value":"xScale_levels_mobile_quantity = d3\n .scaleLinear()\n //.domain([0, d3.max(dataset, (d) => d.transfer)]) // Domain from real data\n .domain([0, maxVolume]) // Better having maxQuantity as reference\n .range([margin_levels.left, myWidth_mobile_levels - margin_levels.right]) // [left, right]\n .nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"maxQuantity = 68","pinned":true,"hidden":false,"mode":"ojs"},{"id":3330,"value":"yScale_transfers = isMobile\n ? yScale_transfers_mobile_dates\n : yScale_transfers_desktop_quantity","pinned":true,"hidden":false,"mode":"ojs"},{"id":1428,"value":"yScale_transfers_desktop_quantity = d3\n .scaleLinear()\n //.domain([0, d3.max(dataset, (d) => d.transfer)]) // Domain from real data\n .domain([0, maxQuantity]) // Better having maxQuantity as reference\n .range([margin_transfers.top, height_transfers - margin_transfers.bottom]) // [top, bottom]\n .nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3332,"value":"yScale_transfers_mobile_dates = d3\n .scaleBand()\n .domain(datesArray)\n .range([margin_transfers.top, height_transfers - margin_transfers.bottom]) // [top, bottom]\n .paddingInner(0.3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3335,"value":"yScale_levels = isMobile ? yScale_levels_mobile_dates : yScale_levels_desktop_quantity","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"yScale_levels_desktop_quantity = d3\n .scaleLinear()\n //.domain([0, d3.max(dataset, (d) => d.volume)]) // Domain from real data\n .domain([0, maxVolume]) // Better having maxQuantity as reference\n .range([height_levels - margin_levels.bottom, margin_levels.top]) // [bottom, top]\n .nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3337,"value":"yScale_levels_mobile_dates = d3\n .scaleBand()\n .domain(datesArray)\n .range([margin_levels.top, height_levels - margin_levels.bottom]) // [top, bottom]\n .paddingInner(0.3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"scaleColor = d3.scaleOrdinal().domain([1, 2, 3, 4]).range(colorNiveles)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1336,"value":"midPoint = margin_transfers.left +\n (myWidth - margin_transfers.left - margin_transfers.right) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"---\n\n### Axis\n\nAxis depending on responsive design desktop/mobile","pinned":false,"hidden":false,"mode":"md"},{"id":3751,"value":"xAxis_levels = isMobile\n ? xAxis_levels_mobile_quantities\n : xAxis_levels_desktop_date","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"xAxis_levels_desktop_date = (g) =>\n g\n .attr(\"class\", \"x-axis\")\n .attr(\"transform\", `translate(0,${height_levels - margin_levels.bottom})`)\n .style(\"color\", colorNeutral(500))\n .call(\n d3\n .axisBottom(xScale_levels)\n .tickValues(\n xScale_levels.domain().filter(function (d, i) {\n return !(i % 12);\n })\n )\n\n .ticks(d3.timeYear)\n .tickFormat((d) => d.getFullYear())\n )\n\n .call((g) => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":3759,"value":"xAxis_levels_mobile_quantities = (g) =>\n g\n .attr(\"class\", \"y-axis\")\n .style(\"color\", colorNeutral(600))\n .attr(\"transform\", `translate(0,${height_transfers})`)\n .call(\n d3\n .axisTop(xScale_levels)\n .tickValues([0, 400, 1000])\n .tickSize(\n height_transfers - margin_transfers.top - margin_transfers.bottom + 40\n )\n )\n .call((g) => g.select(\".domain\").remove())\n .call((g) =>\n g.selectAll(\".tick:not(:first-of-type) line\").style(\"opacity\", 0.3)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":3756,"value":"yAxis_levels = isMobile\n ? yAxis_levels_mobile_date\n : yAxis_levels_desktop_quantities","pinned":true,"hidden":false,"mode":"ojs"},{"id":642,"value":"yAxis_levels_desktop_quantities = (g) =>\n g\n .attr(\"class\", \"y-axis\")\n .style(\"color\", colorNeutral(600))\n .attr(\"transform\", `translate(${margin_levels.left},0)`)\n .call(\n d3.axisLeft(yScale_levels).ticks(8)\n )\n .call((g) => g.select(\".domain\").remove())\n .call((g) =>\n g.selectAll(\".tick:not(:first-of-type) line\").style(\"opacity\", 0.3)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":3767,"value":"yAxis_levels_mobile_date = (g) =>\n g\n .attr(\"class\", \"x-axis\")\n .attr(\"transform\", `translate(${margin_levels.left},0)`)\n .style(\"color\", colorNeutral(500))\n .call(\n d3\n .axisLeft(yScale_levels)\n .tickValues(\n yScale_levels.domain().filter(function (d, i) {\n return !(i % 12);\n })\n )\n .ticks(d3.timeYear)\n .tickFormat((d) => d.getFullYear())\n )\n\n .call((g) => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":3401,"value":"axis_transfers = isMobile ? xAxis_transfers_mobile : yAxis_transfers_desktop","pinned":true,"hidden":false,"mode":"ojs"},{"id":3403,"value":"xAxis_transfers_mobile = (g) =>\n g\n .attr(\"class\", \"x-axis\")\n .style(\"color\", colorNeutral(500))\n .attr(\"transform\", `translate(0,${height_transfers})`)\n .call(\n d3\n .axisTop(xScale_transfers) // [left, right])\n .tickValues([0, 30, 60])\n .tickSize(\n height_transfers - margin_transfers.top - margin_transfers.bottom + 40\n )\n )\n .call((g) => g.select(\".domain\").remove())\n .call((g) =>\n g.selectAll(\".tick:not(:first-of-type) line\").style(\"opacity\", 0.3)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1423,"value":"yAxis_transfers_desktop = (g) =>\n g\n .attr(\"class\", \"y-axis\")\n .style(\"color\", colorNeutral(500))\n .attr(\"transform\", `translate(${margin_transfers.left},0)`)\n .call(\n d3\n .axisLeft(yScale_transfers) // [top, bottom])\n .ticks(3)\n .tickSize(-myWidth + margin_transfers.left + margin_transfers.right)\n )\n .call((g) => g.select(\".domain\").remove())\n .call((g) =>\n g.selectAll(\".tick:not(:first-of-type) line\").style(\"opacity\", 0.3)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"---\n\n### Other useful functions","pinned":false,"hidden":false,"mode":"md"},{"id":1603,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"// Line generator\nline = d3\n .line()\n .x((d) => xScale_levels(d.date) + xScale_levels.bandwidth() / 2)\n .y((d) => yScale_levels(d.level3_limit))\n .curve(d3.curveStep)","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"---\n\n### Formatting & translations","pinned":false,"hidden":false,"mode":"md"},{"id":3571,"value":"locale = ({\n title_levels1: \"Reservas en los embalses\",\n title_levels2: \"Entrepeñas y Buendía (hm3)\",\n\n title_levels1_mobile: \"Reservas en los\",\n title_levels2_mobile: \"embalses de\",\n title_levels3_mobile: \"Entrepeñas y\",\n title_levels4_mobile: \"Buendía (hm3)\",\n\n title_transfers1: \"Zoom: detalle\",\n title_transfers2: \"de trasvases\",\n title_transfers3: \"mensuales\",\n title_transfers4: \"(hm3)\",\n\n title_transfers1_mobile: \"Zoom:\",\n title_transfers2_mobile: \"trasvases\",\n title_transfers3_mobile: \"mensuales\",\n title_transfers4_mobile: \"(hm3)\",\n\n titleHoverNote: \"Haz click para consultar la fuente de los datos\",\n\n level1: \"↕ Vetado\",\n level2: \"↕ Excepcional\",\n level3: \"↕ Automático\",\n level4: \"↑ Automático\",\n\n title_levelsRules: \"Las reglas de los embalses:\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1383,"value":"timeLocaleES = d3.timeFormatLocale({\n dateTime: \"%A, %e de %B de %Y, %X\",\n date: \"%d/%m/%Y\",\n time: \"%H:%M:%S\",\n periods: [\"AM\", \"PM\"],\n days: [\n \"domingo\",\n \"lunes\",\n \"martes\",\n \"miércoles\",\n \"jueves\",\n \"viernes\",\n \"sábado\"\n ],\n shortDays: [\"dom\", \"lun\", \"mar\", \"mié\", \"jue\", \"vie\", \"sáb\"],\n months: [\n \"Enero\",\n \"Febrero\",\n \"Marzo\",\n \"Abril\",\n \"Mayo\",\n \"Junio\",\n \"Julio\",\n \"Agosto\",\n \"Septiembre\",\n \"Octubre\",\n \"Noviembre\",\n \"Diciembre\"\n ],\n shortMonths: [\n \"Ene\",\n \"Feb\",\n \"Mar\",\n \"Abr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Ago\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dic\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3200,"value":"es_ES = ({\n decimal: \",\",\n thousands: \".\",\n //thousands: \"\\u00a0\", // space\n grouping: [3],\n currency: [\"\", \"\\u00a0€\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"formatPercent = d3.format(\",.1%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"formatIntegers = d3.formatLocale(es_ES).format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"formatTime = d3.timeFormat(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":999,"value":"formatVolume = d => `${d} hm3`","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"formatDateTooltip = timeLocaleES.format(\"%B %Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3986,"value":"formatDateTooltip_mobile = timeLocaleES.format(\"%b %Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"margin_transfers = ({\n top: isMobile ? 130 : 40,\n bottom: isMobile ? 20 : 0,\n right: 5,\n left: isMobile ? 5 : 130\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"margin_levels = ({\n top: isMobile ? 130 : 80,\n bottom: isMobile ? 20 : 20,\n right: 5,\n left: isMobile ? 35 : 130\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4061,"value":"height_mobile = 15 * dataset.length // Chart will grow on mobile with time, to be as readible as possible","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"height_transfers = isMobile ? height_mobile : 120","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"height_levels = isMobile ? height_mobile : 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"//maxWidth = 660 // Civio central column\nmaxWidth = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"myWidth = deviceSelection === \"desktop\" ? Math.min(width, maxWidth) : 320 // 👈🏻 Just for testing","pinned":true,"hidden":false,"mode":"ojs"},{"id":3794,"value":"proportionFactor = 0.7","pinned":false,"hidden":false,"mode":"ojs"},{"id":3789,"value":"myWidth_mobile_levels = myWidth * proportionFactor - 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":3792,"value":"myWidth_mobile_transfers = myWidth * (1 - proportionFactor) - 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":3675,"value":"myWidth_interactionNote = Math.min(width, maxWidth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"mediaQueryLimit = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"isMobile = myWidth <= mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"---\n\n### Color & styles","pinned":false,"hidden":false,"mode":"md"},{"id":325,"value":"colorNiveles = [\n colorBlueLight_boe,\n colorBlueDark_boe,\n colorOrange_espanaenllamas,\n colorRed_tuderechoasaber\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"colorBlueLight_boe = colors.project.elboenuestrodecadadia.secondary","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"colorBlueDark_boe = colors.project.elboenuestrodecadadia.primary","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"colorOrange_espanaenllamas = colors.project.espanaenllamas.primary","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"colorRed_tuderechoasaber = colors.project.tuderechoasaber.primary","pinned":false,"hidden":false,"mode":"ojs"},{"id":2178,"value":"baseOpacityAreas = 0.68","pinned":false,"hidden":false,"mode":"ojs"},{"id":1995,"value":"baseOpacityLevels = 0.4","pinned":false,"hidden":false,"mode":"ojs"},{"id":1999,"value":"baseColorLevels = colorNeutral(300)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"---\n \n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"// Civio main colors\nimport { colors, colorNeutral } from \"@civio/utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}