@khanacademy/perseus 0.0.1 → 0.1.0

package/src/util/graphie.js

@@ -0,0 +1,1585 @@
+/* eslint-disable @babel/no-invalid-this */
+// @flow
+import $ from "jquery";
+import {point as kpoint, vector as kvector} from "kmath";
+import Raphael from "raphael";
+import _ from "underscore";
+
+// Minify Raphael ourselves because IE8 has a problem with the 1.5.2 minified
+// release
+// http://groups.google.com/group/raphaeljs/browse_thread/thread/c34c75ad8d431544
+
+import {Errors, Log} from "../logging/log.js";
+import {PerseusError} from "../perseus-error.js";
+
+import KhanColors from "./colors.js";
+import KhanMath from "./math.js";
+import Tex from "./tex.js";
+
+import type {Coord} from "../interactive2/types";
+
+const {processMath} = Tex;
+
+/* Convert cartesian coordinates [x, y] to polar coordinates [r,
+ * theta], with theta in degrees, or in radians if angleInRadians is
+ * specified.
+ */
+function cartToPolar(coord, angleInRadians) {
+    const r = Math.sqrt(Math.pow(coord[0], 2) + Math.pow(coord[1], 2));
+    let theta = Math.atan2(coord[1], coord[0]);
+    // convert angle range from [-pi, pi] to [0, 2pi]
+    if (theta < 0) {
+        theta += 2 * Math.PI;
+    }
+    if (!angleInRadians) {
+        theta = (theta * 180) / Math.PI;
+    }
+    return [r, theta];
+}
+
+function polar(r, th) {
+    if (typeof r === "number") {
+        r = [r, r];
+    }
+    th = (th * Math.PI) / 180;
+    return [r[0] * Math.cos(th), r[1] * Math.sin(th)];
+}
+
+const GraphUtils: $FlowFixMe = {
+    unscaledSvgPath: function (points) {
+        // If this is an empty closed path, return "" instead of "z", which
+        // would give an error
+        if (points[0] === true) {
+            return "";
+        }
+        return $.map(points, function (point, i) {
+            if (point === true) {
+                return "z";
+            }
+            return (i === 0 ? "M" : "L") + point[0] + " " + point[1];
+        }).join("");
+    },
+
+    getDistance: function (point1, point2) {
+        return kpoint.distanceToPoint(point1, point2);
+    },
+
+    /**
+     * Return the difference between two sets of coordinates
+     */
+    coordDiff: function (startCoord, endCoord) {
+        return _.map(endCoord, function (val, i) {
+            return endCoord[i] - startCoord[i];
+        });
+    },
+
+    /**
+     * Round the given coordinates to a given snap value
+     * (e.g., nearest 0.2 increment)
+     */
+    snapCoord: function (coord, snap) {
+        return _.map(coord, function (val, i) {
+            return KhanMath.roundToNearest(snap[i], val);
+        });
+    },
+
+    // Find the angle in degrees between two or three points
+    findAngle: function (point1, point2, vertex) {
+        if (vertex === undefined) {
+            const x = point1[0] - point2[0];
+            const y = point1[1] - point2[1];
+            if (!x && !y) {
+                return 0;
+            }
+            return (180 + (Math.atan2(-y, -x) * 180) / Math.PI + 360) % 360;
+        }
+        return (
+            GraphUtils.findAngle(point1, vertex) -
+            GraphUtils.findAngle(point2, vertex)
+        );
+    },
+
+    graphs: {},
+};
+
+const Graphie = (GraphUtils.Graphie = function () {});
+
+_.extend(Graphie.prototype, {
+    cartToPolar: cartToPolar,
+    polar: polar,
+});
+
+const labelDirections = {
+    center: [-0.5, -0.5],
+    above: [-0.5, -1.0],
+    "above right": [0.0, -1.0],
+    right: [0.0, -0.5],
+    "below right": [0.0, 0.0],
+    below: [-0.5, 0.0],
+    "below left": [-1.0, 0.0],
+    left: [-1.0, -0.5],
+    "above left": [-1.0, -1.0],
+};
+
+/**
+ * Safari applies some SVG-specific styles to things that are not SVGs, so we
+ * need to exclude those styles from things that are not SVGs.
+ *
+ * To see this behavior in action, open https://codepen.io/anon/pen/zENEoa in
+ * Safari.
+ *
+ * Usage `$.extend({}, someStyles, SVG_SPECIFIC_STYLE_MASK)`
+ */
+const SVG_SPECIFIC_STYLE_MASK = {
+    "stroke-width": null,
+};
+
+GraphUtils.createGraphie = function (el) {
+    let xScale = 40;
+    let yScale = 40;
+    let xRange;
+    let yRange;
+
+    $(el).css("position", "relative");
+    const raphael = Raphael(el);
+
+    // For a sometimes-reproducible IE8 bug; doesn't affect SVG browsers at all
+    $(el).children("div").css("position", "absolute");
+
+    // Set up some reasonable defaults
+    let currentStyle: $FlowFixMe = {
+        "stroke-width": 2,
+        fill: "none",
+    };
+
+    const scaleVector = function (point: number | Coord) {
+        if (typeof point === "number") {
+            return scaleVector([point, point]);
+        }
+
+        const x = point[0];
+        const y = point[1];
+        return [x * xScale, y * yScale];
+    };
+
+    const scalePoint = function scalePoint(point: number | Coord): Coord {
+        if (typeof point === "number") {
+            return scalePoint([point, point]);
+        }
+
+        const x = point[0];
+        const y = point[1];
+        return [(x - xRange[0]) * xScale, (yRange[1] - y) * yScale];
+    };
+
+    const unscalePoint = function (point) {
+        if (typeof point === "number") {
+            return unscalePoint([point, point]);
+        }
+
+        const x = point[0];
+        const y = point[1];
+        return [x / xScale + xRange[0], yRange[1] - y / yScale];
+    };
+
+    const unscaleVector = function (point) {
+        if (typeof point === "number") {
+            return unscaleVector([point, point]);
+        }
+
+        return [point[0] / xScale, point[1] / yScale];
+    };
+
+    const setLabelMargins = function (span, size) {
+        const $span = $(span);
+        const direction = $span.data("labelDirection");
+        let [width, height] = size;
+        // This can happen when a span
+        // is invisible but we still want to update the CSS. At worst, we will
+        // be off by a few pixels instead of in a different position entirely.
+        if (width === 0 && height === 0) {
+            [width, height] = [1, 1];
+            Log.log("Label size was 0x0 in graphie.js; using 1x1 instead");
+        }
+        $span.css("visibility", "");
+
+        if (typeof direction === "number") {
+            const x = Math.cos(direction);
+            const y = Math.sin(direction);
+
+            const scale = Math.min(
+                width / 2 / Math.abs(x),
+                height / 2 / Math.abs(y),
+            );
+
+            $span.css({
+                marginLeft: -width / 2 + x * scale,
+                marginTop: -height / 2 - y * scale,
+            });
+        } else {
+            const multipliers = labelDirections[direction || "center"];
+            $span.css({
+                marginLeft: Math.round(width * multipliers[0]),
+                marginTop: Math.round(height * multipliers[1]),
+            });
+        }
+    };
+
+    const svgPath = function (points, alreadyScaled) {
+        return $.map(points, function (point, i) {
+            if (point === true) {
+                return "z";
+            }
+            const scaled = alreadyScaled ? point : scalePoint(point);
+            return (
+                (i === 0 ? "M" : "L") +
+                KhanMath.bound(scaled[0]) +
+                " " +
+                KhanMath.bound(scaled[1])
+            );
+        }).join("");
+    };
+
+    const svgParabolaPath = function (a, b, c) {
+        const computeParabola = function (x) {
+            return (a * x + b) * x + c;
+        };
+
+        // If points are collinear, plot a line instead
+        if (a === 0) {
+            const points = _.map(xRange, function (x) {
+                return [x, computeParabola(x)];
+            });
+            return svgPath(points);
+        }
+
+        // Calculate x coordinates of points on parabola
+        const xVertex = -b / (2 * a);
+        const distToEdge = Math.max(
+            Math.abs(xVertex - xRange[0]),
+            Math.abs(xVertex - xRange[1]),
+        );
+
+        // To guarantee that drawn parabola to spans the viewport, use a point
+        // on the edge of the graph furtherest from the vertex
+        const xPoint = xVertex + distToEdge;
+
+        // Compute parabola and other point on the curve
+        const vertex = [xVertex, computeParabola(xVertex)];
+        const point = [xPoint, computeParabola(xPoint)];
+
+        // Calculate SVG 'control' point, defined by spec
+        const control = [vertex[0], vertex[1] - (point[1] - vertex[1])];
+
+        // Calculate mirror points across parabola's axis of symmetry
+        const dx = Math.abs(vertex[0] - point[0]);
+        const left = [vertex[0] - dx, point[1]];
+        const right = [vertex[0] + dx, point[1]];
+
+        // Scale and bound
+        const points = _.map([left, control, right], scalePoint);
+        const values = _.map(_.flatten(points), KhanMath.bound);
+        return (
+            "M" +
+            values[0] +
+            "," +
+            values[1] +
+            " Q" +
+            values[2] +
+            "," +
+            values[3] +
+            " " +
+            values[4] +
+            "," +
+            values[5]
+        );
+    };
+
+    const svgSinusoidPath = function (a, b, c, d) {
+        // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
+        const quarterPeriod = Math.abs(Math.PI / (2 * b));
+
+        const computeSine = function (x) {
+            return a * Math.sin(b * x - c) + d;
+        };
+
+        const computeDerivative = function (x) {
+            return a * b * Math.cos(c - b * x);
+        };
+
+        const coordsForOffset = function (initial, i) {
+            // Return the cubic coordinates (including the two anchor and two
+            // control points) for the ith portion of the sinusoid.
+            const x0 = initial + quarterPeriod * i;
+            const x1 = x0 + quarterPeriod;
+
+            // Interpolate using derivative technique
+            // See: http://stackoverflow.com/questions/13932704/how-to-draw-sine-waves-with-svg-js
+            const xCoords = [
+                x0,
+                (x0 * 2) / 3 + (x1 * 1) / 3,
+                (x0 * 1) / 3 + (x1 * 2) / 3,
+                x1,
+            ];
+            const yCoords = [
+                computeSine(x0),
+                computeSine(x0) + (computeDerivative(x0) * (x1 - x0)) / 3,
+                computeSine(x1) - (computeDerivative(x1) * (x1 - x0)) / 3,
+                computeSine(x1),
+            ];
+
+            // Zip and scale
+            return _.map(_.zip(xCoords, yCoords), scalePoint);
+        };
+
+        // How many quarter-periods do we need to span the graph?
+        const extent = xRange[1] - xRange[0];
+        const numQuarterPeriods = Math.ceil(extent / quarterPeriod) + 1;
+
+        // Find starting coordinate: first anchor point curve left of xRange[0]
+        let initial = c / b;
+        const distToEdge = initial - xRange[0];
+        initial -= quarterPeriod * Math.ceil(distToEdge / quarterPeriod);
+
+        // First portion of path is special-case, requiring move-to ('M')
+        let coords = coordsForOffset(initial, 0);
+        let path =
+            "M" +
+            coords[0][0] +
+            "," +
+            coords[0][1] +
+            " C" +
+            coords[1][0] +
+            "," +
+            coords[1][1] +
+            " " +
+            coords[2][0] +
+            "," +
+            coords[2][1] +
+            " " +
+            coords[3][0] +
+            "," +
+            coords[3][1];
+        for (let i = 1; i < numQuarterPeriods; i++) {
+            coords = coordsForOffset(initial, i);
+            path +=
+                " C" +
+                coords[1][0] +
+                "," +
+                coords[1][1] +
+                " " +
+                coords[2][0] +
+                "," +
+                coords[2][1] +
+                " " +
+                coords[3][0] +
+                "," +
+                coords[3][1];
+        }
+
+        return path;
+    };
+
+    // `svgPath` is independent of graphie range, so we export it independently
+    GraphUtils.svgPath = svgPath;
+
+    const processAttributes = function (attrs) {
+        const transformers = {
+            scale: function (scale) {
+                if (typeof scale === "number") {
+                    scale = [scale, scale];
+                }
+
+                xScale = scale[0];
+                yScale = scale[1];
+
+                // Update the canvas size
+                raphael.setSize(
+                    (xRange[1] - xRange[0]) * xScale,
+                    (yRange[1] - yRange[0]) * yScale,
+                );
+            },
+
+            clipRect: function (pair) {
+                const point = pair[0];
+                const size = pair[1];
+                point[1] += size[1]; // because our coordinates are flipped
+
+                return {
+                    "clip-rect": scalePoint(point)
+                        .concat(scaleVector(size))
+                        .join(" "),
+                };
+            },
+
+            strokeWidth: function (val) {
+                return {"stroke-width": parseFloat(val)};
+            },
+
+            rx: function (val) {
+                return {rx: scaleVector([val, 0])[0]};
+            },
+
+            ry: function (val) {
+                return {ry: scaleVector([0, val])[1]};
+            },
+
+            r: function (val) {
+                const scaled = scaleVector([val, val]);
+                return {rx: scaled[0], ry: scaled[1]};
+            },
+        };
+
+        const processed = {};
+        $.each(attrs || {}, function (key, value) {
+            const transformer = transformers[key];
+
+            if (typeof transformer === "function") {
+                $.extend(processed, transformer(value));
+            } else {
+                const dasherized = key
+                    .replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2")
+                    .replace(/([a-z\d])([A-Z])/g, "$1-$2")
+                    .toLowerCase();
+                processed[dasherized] = value;
+            }
+        });
+
+        return processed;
+    };
+
+    const addArrowheads = function arrows(path) {
+        const type = path.constructor.prototype;
+
+        if (type === Raphael.el) {
+            if (
+                path.type === "path" &&
+                typeof path.arrowheadsDrawn === "undefined"
+            ) {
+                const w = path.attr("stroke-width");
+                const s = 0.6 + 0.4 * w;
+                const l = path.getTotalLength();
+                const set = raphael.set();
+                const head = raphael.path(
+                    graphie.isMobile
+                        ? "M-4,4 C-4,4 -0.25,0 -0.25,0 C-0.25,0 -4,-4 -4,-4"
+                        : "M-3 4 C-2.75 2.5 0 0.25 0.75 0C0 -0.25 -2.75 -2.5 -3 -4",
+                );
+                const end = path.getPointAtLength(l - 0.4);
+                const almostTheEnd = path.getPointAtLength(l - 0.75 * s);
+                const angle =
+                    (Math.atan2(
+                        end.y - almostTheEnd.y,
+                        end.x - almostTheEnd.x,
+                    ) *
+                        180) /
+                    Math.PI;
+                const attrs = path.attr();
+                delete attrs.path;
+
+                let subpath = path.getSubpath(0, l - 0.75 * s);
+                subpath = raphael.path(subpath).attr(attrs);
+                subpath.arrowheadsDrawn = true;
+                path.remove();
+
+                // For some unknown reason 0 doesn't work for the rotation
+                // origin so we use a tiny number.
+                head.rotate(angle, graphie.isMobile ? 1e-5 : 0.75, 0)
+                    .scale(s, s, 0.75, 0)
+                    .translate(almostTheEnd.x, almostTheEnd.y)
+                    .attr(attrs)
+                    .attr({
+                        "stroke-linejoin": "round",
+                        "stroke-linecap": "round",
+                    });
+
+                head.arrowheadsDrawn = true;
+                set.push(subpath);
+                set.push(head);
+                return set;
+            }
+        } else if (type === Raphael.st) {
+            for (let i = 0, l = path.items.length; i < l; i++) {
+                arrows(path.items[i]);
+            }
+        }
+        return path;
+    };
+
+    const drawingTools: $FlowFixMe = {
+        circle: function (center, radius) {
+            return raphael.ellipse(
+                ...scalePoint(center).concat(scaleVector([radius, radius])),
+            );
+        },
+
+        // (x, y) is coordinate of bottom left corner
+        rect: function (x, y, width, height) {
+            // Raphael needs (x, y) to be coordinate of upper left corner
+            const corner = scalePoint([x, y + height]);
+            const dims = scaleVector([width, height]);
+            const elem = raphael.rect(...corner.concat(dims));
+
+            if (graphie.isMobile) {
+                elem.node.style.shapeRendering = "crispEdges";
+            }
+
+            return elem;
+        },
+
+        ellipse: function (center, radii) {
+            return raphael.ellipse(
+                ...scalePoint(center).concat(scaleVector(radii)),
+            );
+        },
+
+        fixedEllipse: function (
+            center: number | Coord,
+            // Different type than Coord, this is radiusX, radiusY
+            radii: number | [number, number],
+            maxScale: number,
+            padding: number,
+        ) {
+            // Scale point and radius
+            const scaledPoint = scalePoint(center);
+            const scaledRadii = scaleVector(radii);
+
+            const width = 2 * scaledRadii[0] * maxScale + padding;
+            const height = 2 * scaledRadii[1] * maxScale + padding;
+
+            // Calculate absolute left, top
+            const left = scaledPoint[0] - width / 2;
+            const top = scaledPoint[1] - height / 2;
+
+            // Wrap in <div>
+            const wrapper = document.createElement("div");
+            $(wrapper).css({
+                position: "absolute",
+                width: width + "px",
+                height: height + "px",
+                left: left + "px",
+                top: top + "px",
+            });
+            // wrapper.setAttribute("data-graphie-type", "ellipse");
+
+            // Create Raphael canvas
+            const localRaphael = Raphael(wrapper, width, height);
+            const visibleShape = localRaphael.ellipse(
+                width / 2,
+                height / 2,
+                scaledRadii[0],
+                scaledRadii[1],
+            );
+
+            return {
+                wrapper: wrapper,
+                visibleShape: visibleShape,
+            };
+        },
+
+        arc: function (center, radius, startAngle, endAngle, sector) {
+            startAngle = ((startAngle % 360) + 360) % 360;
+            endAngle = ((endAngle % 360) + 360) % 360;
+
+            const cent = scalePoint(center);
+            const radii = scaleVector(radius);
+            const startVector = polar(radius, startAngle);
+            const endVector = polar(radius, endAngle);
+
+            const startPoint = scalePoint([
+                center[0] + startVector[0],
+                center[1] + startVector[1],
+            ]);
+            const endPoint = scalePoint([
+                center[0] + endVector[0],
+                center[1] + endVector[1],
+            ]);
+
+            const largeAngle =
+                (((endAngle - startAngle) % 360) + 360) % 360 > 180;
+
+            return raphael.path(
+                "M" +
+                    startPoint.join(" ") +
+                    "A" +
+                    radii.join(" ") +
+                    " 0 " + // ellipse rotation
+                    (largeAngle ? 1 : 0) +
+                    " 0 " + // sweep flag
+                    endPoint.join(" ") +
+                    (sector ? "L" + cent.join(" ") + "z" : ""),
+            );
+        },
+
+        path: function (points) {
+            const p = raphael.path(svgPath(points));
+            p.graphiePath = points;
+
+            return p;
+        },
+
+        fixedPath: function (points, center, createPath) {
+            points = _.map(points, scalePoint);
+            center = center ? scalePoint(center) : null;
+            createPath = createPath || svgPath;
+
+            const pathLeft = _.min(_.pluck(points, 0));
+            const pathRight = _.max(_.pluck(points, 0));
+            const pathTop = _.min(_.pluck(points, 1));
+            const pathBottom = _.max(_.pluck(points, 1));
+
+            // Apply padding to line
+            const padding = [4, 4];
+
+            // Calculate and apply additional offset
+            const extraOffset = [pathLeft, pathTop];
+
+            // Apply padding and offset to points
+            points = _.map(points, function (point) {
+                return kvector.add(
+                    kvector.subtract(point, extraOffset),
+                    kvector.scale(padding, 0.5),
+                );
+            });
+
+            // Calculate <div> dimensions
+            const width = pathRight - pathLeft + padding[0];
+            const height = pathBottom - pathTop + padding[1];
+            const left = extraOffset[0] - padding[0] / 2;
+            const top = extraOffset[1] - padding[1] / 2;
+
+            // Create <div>
+            const wrapper = document.createElement("div");
+            $(wrapper).css({
+                position: "absolute",
+                width: width + "px",
+                height: height + "px",
+                left: left + "px",
+                top: top + "px",
+                // If user specified a center, set it
+                transformOrigin: center
+                    ? width / 2 +
+                      center[0] +
+                      "px " +
+                      (height / 2 + center[1]) +
+                      "px"
+                    : null,
+            });
+
+            // Create Raphael canvas
+            const localRaphael = Raphael(wrapper, width, height);
+
+            // Calculate path
+            const visibleShape = localRaphael.path(createPath(points));
+
+            return {
+                wrapper: wrapper,
+                visibleShape: visibleShape,
+            };
+        },
+
+        scaledPath: function (points) {
+            const p = raphael.path(svgPath(points, /* alreadyScaled */ true));
+            p.graphiePath = points;
+            return p;
+        },
+
+        line: function (start, end) {
+            const l = this.path([start, end]);
+
+            if (graphie.isMobile) {
+                l.node.style.shapeRendering = "crispEdges";
+            }
+
+            return l;
+        },
+
+        parabola: function (a, b, c) {
+            // Plot a parabola of the form: f(x) = (a * x + b) * x + c
+            return raphael.path(svgParabolaPath(a, b, c));
+        },
+
+        fixedLine: function (start, end, thickness) {
+            // Apply padding to line
+            const padding = [thickness, thickness];
+
+            // Scale points to get values in pixels
+            start = scalePoint(start);
+            end = scalePoint(end);
+
+            // Calculate and apply additional offset
+            const extraOffset = [
+                Math.min(start[0], end[0]),
+                Math.min(start[1], end[1]),
+            ];
+
+            // Apply padding and offset to start, end points
+            start = kvector.add(
+                kvector.subtract(start, extraOffset),
+                kvector.scale(padding, 0.5),
+            );
+            end = kvector.add(
+                kvector.subtract(end, extraOffset),
+                kvector.scale(padding, 0.5),
+            );
+
+            // Calculate <div> dimensions
+            const left = extraOffset[0] - padding[0] / 2;
+            const top = extraOffset[1] - padding[1] / 2;
+            const width = Math.abs(start[0] - end[0]) + padding[0];
+            const height = Math.abs(start[1] - end[1]) + padding[1];
+
+            // Create <div>
+            const wrapper = document.createElement("div");
+            $(wrapper).css({
+                position: "absolute",
+                width: width + "px",
+                height: height + "px",
+                left: left + "px",
+                top: top + "px",
+                // Outsiders should feel like the line's 'origin' (i.e., for
+                // rotation) is the starting point
+                transformOrigin: start[0] + "px " + start[1] + "px",
+            });
+
+            // Create Raphael canvas
+            const localRaphael = Raphael(wrapper, width, height);
+
+            // Calculate path
+            const path =
+                "M" +
+                start[0] +
+                " " +
+                start[1] +
+                " " +
+                "L" +
+                end[0] +
+                " " +
+                end[1];
+            const visibleShape = localRaphael.path(path);
+            visibleShape.graphiePath = [start, end];
+
+            return {
+                wrapper: wrapper,
+                visibleShape: visibleShape,
+            };
+        },
+
+        sinusoid: function (a, b, c, d) {
+            // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
+            return raphael.path(svgSinusoidPath(a, b, c, d));
+        },
+
+        grid: function (xr, yr) {
+            const step: $FlowFixMe = currentStyle.step || [1, 1];
+            const set = raphael.set();
+
+            let x = step[0] * Math.ceil(xr[0] / step[0]);
+            for (; x <= xr[1]; x += step[0]) {
+                set.push(this.line([x, yr[0]], [x, yr[1]]));
+            }
+
+            let y = step[1] * Math.ceil(yr[0] / step[1]);
+            for (; y <= yr[1]; y += step[1]) {
+                set.push(this.line([xr[0], y], [xr[1], y]));
+            }
+
+            return set;
+        },
+
+        label: function (point, text, direction, latex) {
+            latex = typeof latex === "undefined" || latex;
+
+            const $span = $("<span>").addClass("graphie-label");
+
+            const pad = currentStyle["label-distance"];
+
+            $span
+                .css(
+                    $.extend(
+                        {},
+                        {
+                            position: "absolute",
+                            padding: (pad != null ? pad : 7) + "px",
+                            color: "black",
+                        },
+                    ),
+                )
+                .data("labelDirection", direction)
+                .appendTo(el);
+
+            $span.setPosition = function (point) {
+                const scaledPoint = scalePoint(point);
+                $span.css({
+                    left: scaledPoint[0],
+                    top: scaledPoint[1],
+                });
+            };
+
+            $span.setPosition(point);
+
+            const span = $span[0];
+
+            $span.processMath = function (math, force) {
+                processMath(span, math, force, function () {
+                    const width = span.scrollWidth;
+                    const height = span.scrollHeight;
+                    setLabelMargins(span, [width, height]);
+                });
+            };
+
+            $span.processText = function (text) {
+                $span.html(text);
+                const width = span.scrollWidth;
+                const height = span.scrollHeight;
+                setLabelMargins(span, [width, height]);
+            };
+
+            if (latex) {
+                $span.processMath(text, /* force */ false);
+            } else {
+                $span.processText(text);
+            }
+
+            return $span;
+        },
+
+        plotParametric: function (fn, range, shade, fn2) {
+            // Note: fn2 should only be set if 'shade' is true, as it denotes
+            // the function between which fn should have its area shaded.
+            // In general, plotParametric shouldn't be used to shade the area
+            // between two arbitrary parametrics functions over an interval,
+            // as the method assumes that fn and fn2 are both of the form
+            // fn(t) = (t, fn'(t)) for some initial fn'.
+            fn2 =
+                fn2 ||
+                function (t) {
+                    return [t, 0];
+                };
+
+            // We truncate to 500,000, since anything bigger causes
+            // overflow in the firefox svg renderer.  This is safe
+            // since 500,000 is outside the viewport anyway.  We
+            // write these functions the way we do to handle undefined.
+            const clipper = (xy) => {
+                if (Math.abs(xy[1]) > 500000) {
+                    return [xy[0], Math.min(Math.max(xy[1], -500000), 500000)];
+                }
+                return xy;
+            };
+            const clippedFn = (x) => clipper(fn(x));
+            const clippedFn2 = (x) => clipper(fn2(x));
+
+            if (!currentStyle.strokeLinejoin) {
+                currentStyle.strokeLinejoin = "round";
+            }
+            if (!currentStyle.strokeLinecap) {
+                currentStyle.strokeLinecap = "round";
+            }
+
+            const min = range[0];
+            const max = range[1];
+            let step = (max - min) / (currentStyle["plot-points"] || 800);
+            if (step === 0) {
+                step = 1;
+            }
+
+            const paths = raphael.set();
+            let points = [];
+            let lastDiff = GraphUtils.coordDiff(
+                clippedFn(min),
+                clippedFn2(min),
+            );
+
+            let lastFlip = min;
+            for (let t = min; t <= max; t += step) {
+                const top = clippedFn(t);
+                const bottom = clippedFn2(t);
+                const diff = GraphUtils.coordDiff(top, bottom);
+
+                // Find points where it flips
+                // Create path that sketches area between the two functions
+                if (
+                    // if there is an asymptote here, meaning that the graph
+                    // switches signs and has a large difference
+                    (diff[1] < 0 !== lastDiff[1] < 0 &&
+                        Math.abs(diff[1] - lastDiff[1]) > 2 * yScale) ||
+                    // or the function is undefined
+                    isNaN(diff[1])
+                ) {
+                    // split the path at this point, and draw it
+                    if (shade) {
+                        points.push(top);
+
+                        // backtrack to draw paired function
+                        for (let u = t - step; u >= lastFlip; u -= step) {
+                            points.push(clippedFn2(u));
+                        }
+                        lastFlip = t;
+                    }
+                    paths.push(this.path(points));
+                    // restart the path, excluding this point
+                    points = [];
+                    if (shade) {
+                        points.push(top);
+                    }
+                } else {
+                    // otherwise, just add the point to the path
+                    points.push(top);
+                }
+
+                lastDiff = diff;
+            }
+
+            if (shade) {
+                // backtrack to draw paired function
+                for (let u = max - step; u >= lastFlip; u -= step) {
+                    points.push(clippedFn2(u));
+                }
+            }
+            paths.push(this.path(points));
+
+            return paths;
+        },
+
+        plotPolar: function (fn, range) {
+            const min = range[0];
+            const max = range[1];
+
+            // There is probably a better heuristic for this
+            if (!currentStyle["plot-points"]) {
+                currentStyle["plot-points"] = 2 * (max - min) * xScale;
+            }
+
+            return this.plotParametric(function (th) {
+                return polar(fn(th), (th * 180) / Math.PI);
+            }, range);
+        },
+
+        plot: function (fn, range, swapAxes, shade, fn2) {
+            const min = range[0];
+            const max = range[1];
+            if (!currentStyle["plot-points"]) {
+                currentStyle["plot-points"] = 2 * (max - min) * xScale;
+            }
+
+            if (swapAxes) {
+                if (fn2) {
+                    // TODO(charlie): support swapped axis area shading
+                    throw new PerseusError(
+                        "Can't shade area between functions with swapped axes.",
+                        Errors.Internal,
+                    );
+                }
+                return this.plotParametric(
+                    function (y) {
+                        return [fn(y), y];
+                    },
+                    range,
+                    shade,
+                );
+            }
+            if (fn2) {
+                if (shade) {
+                    return this.plotParametric(
+                        function (x) {
+                            return [x, fn(x)];
+                        },
+                        range,
+                        shade,
+                        function (x) {
+                            return [x, fn2(x)];
+                        },
+                    );
+                }
+                throw new PerseusError(
+                    "fn2 should only be set when 'shade' is True.",
+                    Errors.Internal,
+                );
+            }
+            return this.plotParametric(
+                function (x) {
+                    return [x, fn(x)];
+                },
+                range,
+                shade,
+            );
+        },
+
+        /**
+         * Given a piecewise function, return a Raphael set of paths that
+         * can be used to draw the function, e.g. using style().
+         * Calls plotParametric.
+         *
+         * @param  {[]} fnArray    array of functions which when called
+         *                         with a parameter i return the value of
+         *                         the function at i
+         * @param  {[]} rangeArray array of ranges over which the
+         *                         corresponding functions are defined
+         * @return {Raphael set}
+         */
+        plotPiecewise: function (fnArray, rangeArray) {
+            const paths = raphael.set();
+            const self = this;
+            _.times(fnArray.length, function (i) {
+                const fn = fnArray[i];
+                const range = rangeArray[i];
+                const fnPaths = self.plotParametric(function (x) {
+                    return [x, fn(x)];
+                }, range);
+                _.each(fnPaths, function (fnPath) {
+                    paths.push(fnPath);
+                });
+            });
+
+            return paths;
+        },
+
+        /**
+         * Given an array of coordinates of the form [x, y], create and
+         * return a Raphael set of Raphael circle objects at those
+         * coordinates
+         *
+         * @param  {Array of arrays} endpointArray
+         * @return {Raphael set}
+         */
+        plotEndpointCircles: function (endpointArray) {
+            const circles = raphael.set();
+            const self = this;
+
+            _.each(endpointArray, function (coord, i) {
+                circles.push(self.circle(coord, 0.15));
+            });
+
+            return circles;
+        },
+
+        plotAsymptotes: function (fn, range) {
+            const min = range[0];
+            const max = range[1];
+            const step = (max - min) / (currentStyle["plot-points"] || 800);
+
+            const asymptotes = raphael.set();
+            let lastVal = fn(min);
+
+            for (let t = min; t <= max; t += step) {
+                const funcVal = fn(t);
+
+                if (
+                    funcVal < 0 !== lastVal < 0 &&
+                    Math.abs(funcVal - lastVal) > 2 * yScale
+                ) {
+                    asymptotes.push(this.line([t, yScale], [t, -yScale]));
+                }
+
+                lastVal = funcVal;
+            }
+
+            return asymptotes;
+        },
+    };
+
+    // $FlowFixMe[invalid-constructor]
+    const graphie = new Graphie();
+    _.extend(graphie, {
+        raphael: raphael,
+
+        init: function (options) {
+            let scale = options.scale || [40, 40];
+            scale = typeof scale === "number" ? [scale, scale] : scale;
+
+            xScale = scale[0];
+            yScale = scale[1];
+
+            if (options.range == null) {
+                throw new PerseusError(
+                    "range should be specified in graph init",
+                    Errors.Internal,
+                );
+            }
+
+            xRange = options.range[0];
+            yRange = options.range[1];
+
+            const w = (xRange[1] - xRange[0]) * xScale;
+            const h = (yRange[1] - yRange[0]) * yScale;
+            raphael.setSize(w, h);
+
+            $(el).css({
+                width: w,
+                height: h,
+            });
+
+            this.range = options.range;
+            this.scale = scale;
+            this.dimensions = [w, h];
+            this.xpixels = w;
+            this.ypixels = h;
+
+            this.isMobile = options.isMobile;
+
+            return this;
+        },
+
+        style: function (attrs, fn) {
+            const processed = processAttributes(attrs);
+
+            if (typeof fn === "function") {
+                const oldStyle = currentStyle;
+                currentStyle = $.extend({}, currentStyle, processed);
+                const result = fn.call(graphie);
+                currentStyle = oldStyle;
+                return result;
+            }
+            $.extend(currentStyle, processed);
+        },
+
+        scalePoint: scalePoint,
+        scaleVector: scaleVector,
+
+        unscalePoint: unscalePoint,
+        unscaleVector: unscaleVector,
+
+        // Custom SVG path functions that are dependent on graphie range
+        // `svgPath`, while independent of range, is exported for consistency
+        svgPath: svgPath,
+        svgParabolaPath: svgParabolaPath,
+        svgSinusoidPath: svgSinusoidPath,
+    });
+
+    $.each(drawingTools, function (name) {
+        graphie[name] = function () {
+            const last = arguments[arguments.length - 1];
+            const oldStyle = currentStyle;
+            let result;
+
+            // The last argument is probably trying to change the style
+            if (typeof last === "object" && !_.isArray(last)) {
+                currentStyle = {
+                    ...currentStyle,
+                    ...processAttributes(last),
+                };
+
+                // $FlowFixMe[method-unbinding]
+                const rest = [].slice.call(arguments, 0, arguments.length - 1);
+                result = drawingTools[name](...rest);
+            } else {
+                currentStyle = $.extend({}, currentStyle);
+
+                result = drawingTools[name](...arguments);
+            }
+
+            // Bad heuristic for recognizing Raphael elements and sets
+            const type = result.constructor.prototype;
+            if (type === Raphael.el || type === Raphael.st) {
+                result.attr(currentStyle);
+
+                if (currentStyle.arrows) {
+                    result = addArrowheads(result);
+                }
+            } else if (result instanceof $) {
+                // We assume that if it's not a Raphael element/set, it
+                // does not contain SVG.
+                result.css({...currentStyle, ...SVG_SPECIFIC_STYLE_MASK});
+            }
+
+            currentStyle = oldStyle;
+            return result;
+        };
+    });
+
+    // Initializes graphie settings for a graph and draws the basic graph
+    // features (axes, grid, tick marks, and axis labels)
+    // Options expected are:
+    // - range: [[a, b], [c, d]] or [a, b]
+    // - scale: [a, b] or number
+    // - gridOpacity: number (0 - 1)
+    // - gridStep: [a, b] or number (relative to units)
+    // - tickStep: [a, b] or number (relative to grid steps)
+    // - tickLen: [a, b] or number (in pixels)
+    // - labelStep: [a, b] or number (relative to tick steps)
+    // - yLabelFormat: fn to format label string for y-axis
+    // - xLabelFormat: fn to format label string for x-axis
+    // - smartLabelPositioning: true or false to ignore minus sign
+    graphie.graphInit = function (options) {
+        options = options || {};
+
+        $.each(options, function (prop, val: $FlowFixMe) {
+            // allow options to be specified by a single number for shorthand if
+            // the horizontal and vertical components are the same
+            if (
+                !prop.match(/.*Opacity$/) &&
+                prop !== "range" &&
+                typeof val === "number"
+            ) {
+                options[prop] = [val, val];
+            }
+
+            // allow symmetric ranges to be specified by the absolute values
+            if (prop === "range" || prop === "gridRange") {
+                if (val.constructor === Array) {
+                    // but don't mandate symmetric ranges
+                    if (val[0].constructor !== Array) {
+                        options[prop] = [
+                            [-val[0], val[0]],
+                            [-val[1], val[1]],
+                        ];
+                    }
+                } else if (typeof val === "number") {
+                    options[prop] = [
+                        [-val, val],
+                        [-val, val],
+                    ];
+                }
+            }
+        });
+
+        const range = options.range || [
+            [-10, 10],
+            [-10, 10],
+        ];
+        const gridRange = options.gridRange || options.range;
+        const scale = options.scale || [20, 20];
+        const grid = options.grid != null ? options.grid : true;
+        const gridOpacity = options.gridOpacity || 0.1;
+        const gridStep = options.gridStep || [1, 1];
+        const axes = options.axes != null ? options.axes : true;
+        const axisArrows = options.axisArrows || "";
+        const axisOpacity = options.axisOpacity || 1.0;
+        const axisCenter = options.axisCenter || [
+            Math.min(Math.max(range[0][0], 0), range[0][1]),
+            Math.min(Math.max(range[1][0], 0), range[1][1]),
+        ];
+        const axisLabels =
+            options.axisLabels != null ? options.axisLabels : false;
+        const ticks = options.ticks != null ? options.ticks : true;
+        const tickStep = options.tickStep || [2, 2];
+        const tickLen = options.tickLen || [5, 5];
+        const tickOpacity = options.tickOpacity || 1.0;
+        const labels = options.labels || options.labelStep || false;
+        const labelStep = options.labelStep || [1, 1];
+        const labelOpacity = options.labelOpacity || 1.0;
+        let unityLabels = options.unityLabels || false;
+        const labelFormat =
+            options.labelFormat ||
+            function (a) {
+                return a;
+            };
+        let xLabelFormat = options.xLabelFormat || labelFormat;
+        let yLabelFormat = options.yLabelFormat || labelFormat;
+        const smartLabelPositioning =
+            options.smartLabelPositioning != null
+                ? options.smartLabelPositioning
+                : true;
+        const realRange = [
+            [
+                range[0][0] - (range[0][0] > 0 ? 1 : 0),
+                range[0][1] + (range[0][1] < 0 ? 1 : 0),
+            ],
+            [
+                range[1][0] - (range[1][0] > 0 ? 1 : 0),
+                range[1][1] + (range[1][1] < 0 ? 1 : 0),
+            ],
+        ];
+
+        if (!_.isArray(unityLabels)) {
+            unityLabels = [unityLabels, unityLabels];
+        }
+
+        if (smartLabelPositioning) {
+            const minusIgnorer = function (lf) {
+                return function (a) {
+                    return (lf(a) + "").replace(/-(\d)/g, "\\llap{-}$1");
+                };
+            };
+
+            xLabelFormat = minusIgnorer(xLabelFormat);
+            yLabelFormat = minusIgnorer(yLabelFormat);
+        }
+
+        this.init({
+            range: realRange,
+            scale: scale,
+            isMobile: options.isMobile,
+        });
+
+        // draw grid
+        if (grid) {
+            this.grid(gridRange[0], gridRange[1], {
+                stroke: options.isMobile ? KhanColors.GRAY_C : "#000000",
+                opacity: options.isMobile ? 1 : gridOpacity,
+                step: gridStep,
+                strokeWidth: options.isMobile ? 1 : 2,
+            });
+        }
+
+        // draw axes
+        if (axes) {
+            // this is a slight hack until <-> arrowheads work
+            if (axisArrows === "<->" || axisArrows === true) {
+                this.style(
+                    {
+                        stroke: options.isMobile
+                            ? KhanColors.GRAY_G
+                            : "#000000",
+                        opacity: options.isMobile ? 1 : axisOpacity,
+                        strokeWidth: options.isMobile ? 1 : 2,
+                        arrows: "->",
+                    },
+                    function () {
+                        if (range[1][0] < 0 && range[1][1] > 0) {
+                            this.path([
+                                axisCenter,
+                                [gridRange[0][0], axisCenter[1]],
+                            ]);
+                            this.path([
+                                axisCenter,
+                                [gridRange[0][1], axisCenter[1]],
+                            ]);
+                        }
+                        if (range[0][0] < 0 && range[0][1] > 0) {
+                            this.path([
+                                axisCenter,
+                                [axisCenter[0], gridRange[1][0]],
+                            ]);
+                            this.path([
+                                axisCenter,
+                                [axisCenter[0], gridRange[1][1]],
+                            ]);
+                        }
+                    },
+                );
+
+                // also, we don't support "<-" arrows yet, but why you
+                // would want that on your graph is beyond me.
+            } else if (axisArrows === "->" || axisArrows === "") {
+                this.style(
+                    {
+                        stroke: "#000000",
+                        opacity: axisOpacity,
+                        strokeWidth: 2,
+                        arrows: axisArrows,
+                    },
+                    function () {
+                        this.path([
+                            [gridRange[0][0], axisCenter[1]],
+                            [gridRange[0][1], axisCenter[1]],
+                        ]);
+                        this.path([
+                            [axisCenter[0], gridRange[1][0]],
+                            [axisCenter[0], gridRange[1][1]],
+                        ]);
+                    },
+                );
+            }
+
+            if (axisLabels && axisLabels.length === 2) {
+                this.label(
+                    [gridRange[0][1], axisCenter[1]],
+                    axisLabels[0],
+                    "right",
+                );
+                this.label(
+                    [axisCenter[0], gridRange[1][1]],
+                    axisLabels[1],
+                    "above",
+                );
+            }
+        }
+
+        // draw tick marks
+        if (ticks) {
+            const halfWidthTicks = options.isMobile;
+            this.style(
+                {
+                    stroke: options.isMobile ? KhanColors.GRAY_G : "#000000",
+                    opacity: options.isMobile ? 1 : tickOpacity,
+                    strokeWidth: 1,
+                },
+                function () {
+                    // horizontal axis
+                    let step = gridStep[0] * tickStep[0];
+                    let len = tickLen[0] / scale[1];
+                    let start = gridRange[0][0];
+                    let stop = gridRange[0][1];
+
+                    if (range[1][0] < 0 && range[1][1] > 0) {
+                        for (
+                            let x = step + axisCenter[0];
+                            x <= stop;
+                            x += step
+                        ) {
+                            if (x < stop || !axisArrows) {
+                                this.line(
+                                    [x, -len + axisCenter[1]],
+                                    [
+                                        x,
+                                        halfWidthTicks
+                                            ? 0
+                                            : len + axisCenter[1],
+                                    ],
+                                );
+                            }
+                        }
+
+                        for (
+                            let x = -step + axisCenter[0];
+                            x >= start;
+                            x -= step
+                        ) {
+                            if (x > start || !axisArrows) {
+                                this.line(
+                                    [x, -len + axisCenter[1]],
+                                    [
+                                        x,
+                                        halfWidthTicks
+                                            ? 0
+                                            : len + axisCenter[1],
+                                    ],
+                                );
+                            }
+                        }
+                    }
+
+                    // vertical axis
+                    step = gridStep[1] * tickStep[1];
+                    len = tickLen[1] / scale[0];
+                    start = gridRange[1][0];
+                    stop = gridRange[1][1];
+
+                    if (range[0][0] < 0 && range[0][1] > 0) {
+                        for (
+                            let y = step + axisCenter[1];
+                            y <= stop;
+                            y += step
+                        ) {
+                            if (y < stop || !axisArrows) {
+                                this.line(
+                                    [-len + axisCenter[0], y],
+                                    [
+                                        halfWidthTicks
+                                            ? 0
+                                            : len + axisCenter[0],
+                                        y,
+                                    ],
+                                );
+                            }
+                        }
+
+                        for (
+                            let y = -step + axisCenter[1];
+                            y >= start;
+                            y -= step
+                        ) {
+                            if (y > start || !axisArrows) {
+                                this.line(
+                                    [-len + axisCenter[0], y],
+                                    [
+                                        halfWidthTicks
+                                            ? 0
+                                            : len + axisCenter[0],
+                                        y,
+                                    ],
+                                );
+                            }
+                        }
+                    }
+                },
+            );
+        }
+
+        // draw axis labels
+        if (labels) {
+            this.style(
+                {
+                    stroke: options.isMobile ? KhanColors.GRAY_G : "#000000",
+                    opacity: options.isMobile ? 1 : labelOpacity,
+                },
+                function () {
+                    // horizontal axis
+                    let step = gridStep[0] * tickStep[0] * labelStep[0];
+                    let start = gridRange[0][0];
+                    let stop = gridRange[0][1];
+                    const xAxisPosition = axisCenter[0] < 0 ? "above" : "below";
+                    const yAxisPosition = axisCenter[0] < 0 ? "right" : "left";
+                    const xShowZero =
+                        axisCenter[0] === 0 && axisCenter[1] !== 0;
+                    const yShowZero =
+                        axisCenter[0] !== 0 && axisCenter[1] === 0;
+                    const axisOffCenter =
+                        axisCenter[0] !== 0 || axisCenter[1] !== 0;
+                    const showUnityX = unityLabels[0] || axisOffCenter;
+                    const showUnityY = unityLabels[1] || axisOffCenter;
+
+                    // positive x-axis
+                    for (
+                        let x = (xShowZero ? 0 : step) + axisCenter[0];
+                        x <= stop;
+                        x += step
+                    ) {
+                        if (x < stop || !axisArrows) {
+                            this.label(
+                                [x, axisCenter[1]],
+                                xLabelFormat(x),
+                                xAxisPosition,
+                            );
+                        }
+                    }
+
+                    // negative x-axis
+                    for (
+                        let x = -step * (showUnityX ? 1 : 2) + axisCenter[0];
+                        x >= start;
+                        x -= step
+                    ) {
+                        if (x > start || !axisArrows) {
+                            this.label(
+                                [x, axisCenter[1]],
+                                xLabelFormat(x),
+                                xAxisPosition,
+                            );
+                        }
+                    }
+
+                    step = gridStep[1] * tickStep[1] * labelStep[1];
+                    start = gridRange[1][0];
+                    stop = gridRange[1][1];
+
+                    // positive y-axis
+                    for (
+                        let y = (yShowZero ? 0 : step) + axisCenter[1];
+                        y <= stop;
+                        y += step
+                    ) {
+                        if (y < stop || !axisArrows) {
+                            this.label(
+                                [axisCenter[0], y],
+                                yLabelFormat(y),
+                                yAxisPosition,
+                            );
+                        }
+                    }
+
+                    // negative y-axis
+                    for (
+                        let y = -step * (showUnityY ? 1 : 2) + axisCenter[1];
+                        y >= start;
+                        y -= step
+                    ) {
+                        if (y > start || !axisArrows) {
+                            this.label(
+                                [axisCenter[0], y],
+                                yLabelFormat(y),
+                                yAxisPosition,
+                            );
+                        }
+                    }
+                },
+            );
+        }
+    };
+
+    return graphie;
+};
+
+export default GraphUtils;