Personal Best High Jumps for Two High Jumpers

<!DOCTYPE HTML>
<html>
<head>
    <title>Personal Best High Jumps for Two High Jumpers</title>

<style>

@font-face {
    font-family: "xkcd";
    src: url('//rawgit.com/shreyankg/xkcd-desktop/master/Humor-Sans.ttf');
}

body {
    font-family: "xkcd", sans-serif;
    font-size: 16px;
    color: #333;
}

text.title {
    font-size: 20px;
}

path {
    fill: none;
    stroke-width: 2.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

path.axis {
    stroke: black;
}

path.bgline {
    stroke: white;
    stroke-width: 6px;
}

</style>

</head>
<body>

function responsivefy (svg) {
          // get container + svg aspect ratio
          var container = d3.select(svg.node().parentNode),
            width = parseInt(svg.style('width')) / 1,
            height = parseInt(svg.style('height')),
            aspect = width / height;

// add viewBox and preserveAspectRatio properties,
          // and call resize so that svg resizes on inital page load
          svg.attr('viewBox', '0 0 ' + width + ' ' + height)
            .attr('preserveAspectRatio', 'xMinYMid')
            .call(resize);

// to register multiple listeners for same event type,
          // you need to add namespace, i.e., 'click.foo'
          // necessary if you call invoke this function for multiple svgs
          // api docs: https://github.com/mbostock/d3/wiki/Selections#on
          d3.select(window).on('resize.' + container.attr('id'), resize);

// get width of container and resize svg to fit it
          function resize () {
            var targetWidth = parseInt(container.style('width'));
            svg.attr('width', targetWidth);
            svg.attr('height', Math.round(targetWidth / aspect));
          }
        }

// Data for elite jumper Judy
        function f1 (x) {
            return 0.166667 * x + 6.416667;
        }

// Data for novice jumper Anna
        function f2 (x) {
            return 0.5 * x + 3;
        }

// Build the plot.
        var plot = xkcdplot();
        plot('#chart');

// Add the lines.
        plot.plot(data);
        plot.plot(data2, {stroke: "red"});

// Render the image.
        plot.xlim([0, 4]).draw();

responsivefy(d3.select('svg'));

</script>

</body>
</html>

https://d3js.org/d3.v3.min.js

https://literasee.io/public/frame-init.js