<commit_before><html>
    <head>
        <title>Focus and Directrix</title>
        <style>
            #canvas {
                border: 1px solid #CCC;
            }
        </style>
    </head>
    
    <body>
        <h1>Focus and Directrix</h1>
        
        <canvas id="canvas" width="500" height="500"></canvas>
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                function distance(pos1, pos2) {
                    return Math.sqrt((pos2[0] - pos1[0]) * (pos2[0] - pos1[0]) + (pos2[1] - pos1[1]) * (pos2[1] - pos1[1]));
                }
                function midpoint(pos1, pos2) {
                    return [
                        (pos1[0] + pos2[0]) / 2,
                        (pos1[1] + pos2[1]) / 2
                    ]
                }
                Canvas = function(selector, maxX, maxY, points) {
                    this.selector = selector;
                    this.maxX = maxX;
                    this.maxY = maxY;
                    this.points = points;
                    this.pointSelected = -1; // index into this.points or -1
                    this.position = $(this.selector).position();
                    this.ctx = $(selector)[0].getContext("2d");
                    this.ctx.translate(0, maxY);
                    this.ctx.scale(1, -1);
                }<commit_msg>styling, instructions and link to source<commit_after><html>
    <head>
        <title>Focus and Directrix</title>
        <style>
            body, h1 {
                font-weight: 300;
                font-family: "Helvetica Neue", sans-serif;
            }
            h1 span {
                font-size: 60%;
            }
            #canvas {
                border: 1px solid #CCC;
            }
        </style>
    </head>
    
    <body>
        <h1>Focus and Directrix <span>by <NAME></span></h1>
        <p>Click and drag the dots to move the focus and directrix.</p>
        
        <canvas id="canvas" width="500" height="500"></canvas>

        <p><a href="https://github.com/jtauber/interactives/blob/master/parabola/focus_and_directrix.html">source</a></p>
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                function distance(pos1, pos2) {
                    return Math.sqrt((pos2[0] - pos1[0]) * (pos2[0] - pos1[0]) + (pos2[1] - pos1[1]) * (pos2[1] - pos1[1]));
                }
                function midpoint(pos1, pos2) {
                    return [
                        (pos1[0] + pos2[0]) / 2,
                        (pos1[1] + pos2[1]) / 2
                    ]
                }
                Canvas = function(selector, maxX, maxY, points) {
                    this.selector = selector;
                    this.maxX = maxX;
                    this.maxY = maxY;
                    this.points = points;
                    this.pointSelected = -1; // index into this.points or -1
                    this.position = $(this.selector).position();
                    this.ctx = $(selector)[0].getContext("2d");
                    this.ctx.translate(0, maxY);
                    this.ctx.scale(1, -1);
                }
{'fraction_non_alphanumeric': 0.1408996127494787, 'fraction_numerical': 0.03187369675305332, 'mean_word_length': 1.1962066710268149, 'pattern_counts': {'":': 0, '<': 42, '<?xml version=': 0, '>': 42, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3497671', 'n_tokens_mistral': 1032, 'n_tokens_neox': 956, 'n_words': 184}