function step0(svg) { const step0 = svg.append("g").attr("class", "step0"); // Desktop if (!isMobile) { const xPos = myWidth - margin.right; const offset = 15; const yPos = height / 2 - 70; const verticalCorrection = 2; // Vertical line step0 .append("line") .attr("x1", xPos + offset / 2) .attr("x2", xPos + offset / 2) .attr("y1", margin.top - verticalCorrection) .attr("y2", margin.top - verticalCorrection) .attr("stroke-width", 2) .attr("stroke", colorNeutral(1000)) .transition() .delay(delayStep0) .duration(durationStep0) .attr( "y2", height - margin.bottom + data.length * space - verticalCorrection - extraMargin ); // Step 0 all data presentation step0 .append("text") .attr("x", xPos) .attr("y", yPos) .attr("class", "legend") .attr("text-anchor", "star") .html( `${ dataLocale[languageSelector].step0_desktop[0] } 276.263 ${ dataLocale[languageSelector].step0_desktop[1] } ${ dataLocale[languageSelector].step0_desktop[2] } ` ) .style("opacity", 0) .transition() .delay(delayStep0) .duration(durationStep0) .style("opacity", 1); } // Mobile scenario else { const xPos = myWidth / 2 - 10; const offset = 15; const yPos = margin.top - 45; const verticalCorrection = 2; // Vertical line step0 .append("line") .attr("x1", margin.left) .attr("x2", margin.left) .attr("y1", yScale(2023) - offset / 2) .attr("y2", yScale(2023) - offset / 2) .attr("stroke-width", 2) .attr("stroke", colorNeutral(1000)) .transition() .delay(delayStep0) .duration(durationStep0) .attr("x2", myWidth - margin.right); // Step 0 all data presentation step0 .append("text") .attr("x", xPos) .attr("y", yPos) .attr("class", "legend") .attr("text-anchor", "middle") .html( `${ dataLocale[languageSelector].step0_mobile[0] } 276.263 ${ dataLocale[languageSelector].step0_mobile[1] } ` ) .style("opacity", 0) .transition() .delay(delayStep0) .duration(durationStep0) .style("opacity", 1); } }