D3 Examples - Personal Best High Jumps for Two High Jumpers

xxxxxxxxxx
 
<!DOCTYPE HTML>
<html>
<head>
    <title>Personal Best High Jumps for Two High Jumpers</title>
​
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
    <script src="//literasee.io/public/frame-init.js"></script>
    <script src="xkcd.js"></script>
​
<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>
​
    <div id="chart"></div>
​
    <script>
​
        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;
        }
​
        var xmin = 1,
            xmax = 3,
            N = 100,
            data = d3.range(xmin, xmax, (xmax - xmin) / N).map(function (d) {
                return {x: d, y: f1(d)};
            })
            data2 = d3.range(xmin, xmax, (xmax - xmin) / N).map(function (d) {
                return {x: d, y: f2(d)};
            });
​
        // 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>
​
    