How to exaggerate the Y axis of an SVG plot? - math

Question

In this SVG chart, the line is too flat. How can I exaggerate the difference in Y values of the points so that it appears more "zig-zaggy", with the lowest point of the line at the bottom of the graph and the highest point at the top?
svg {
display: flex;
width: calc(100% + 4em);
transform: translateX(-2em);
clip-path: polygon(2em 0, calc(100% - 2em) 0, calc(100% - 2em) 100%, 2em 100%);
}
polyline {
transform: scaleY(-1);
}
<svg viewBox="0 -100 900 100" class="chart" style="height: 100vh; width: 100vw;">
<defs>
<marker id="red-circle" viewBox="0 0 10 10" refX="5" refY="5" orient="auto">
<circle fill="red" cx="5" cy="5" r="5" />
</marker>
</defs>
<polyline fill="#FEF9CC" stroke="#FED225" stroke-width="2" points="
0, 0
100, 23
200, 21
300, 20
400, 20
500, 23
600, 28
700, 30
800, 30
900, 30
0, -99999
0, 0
" marker-start="url(#red-circle)" marker-end="url(#red-circle)" marker-mid="url(#red-circle)" />
</svg>

Answer 1

I received the formula here on Reddit. Here is how I implemented it:
const exaggerate = function () {
const polyline = document.querySelector('polyline');
const points = [...polyline.points].slice(2, -2);
// slice off (ignore) first 2 and last 2 because
// they are purely for closing the loop
// so that it can be filled with a color
const ys = points.map(({ y }) => y);
const y_min = Math.min(...ys);
const y_max = Math.max(...ys);
points.forEach((point) => {
point.y = (point.y - y_min) * 100 / (y_max - y_min);
});
}
exaggerate();
svg {
display: flex;
width: calc(100% + 4em);
transform: translateX(-2em);
clip-path: polygon(2em 0, calc(100% - 2em) 0, calc(100% - 2em) 100%, 2em 100%);
}
polyline {
transform: scaleY(-1);
}
<svg viewBox="0 -100 900 100" class="chart" style="height: 100vh; width: 100vw;">
<defs>
<marker id="red-circle" viewBox="0 0 10 10" refX="5" refY="5" orient="auto">
<circle fill="red" cx="5" cy="5" r="5" />
</marker>
https://stackoverflow.com/questions/66473797/how-to-exaggerate-the-y-axis-of-an-svg-plot# </defs>
<polyline fill="#FEF9CC" stroke="#FED225" stroke-width="2" points="
0, 0
100, 23
200, 21
300, 20
400, 20
500, 23
600, 28
700, 30
800, 30
900, 30
0, -99999
0, 0
" marker-start="url(#red-circle)" marker-end="url(#red-circle)" marker-mid="url(#red-circle)" />
</svg>
EDIT:
Came across this question and answer as well, for anyone interested.