@khanacademy/perseus 18.0.1 → 19.1.0

package/src/util/graphie.ts

@@ -1,9 +1,13 @@
 /* eslint-disable @babel/no-invalid-this */
-import {point as kpoint, vector as kvector} from "@khanacademy/kmath";
+import {
+    point as kpoint,
+    vector as kvector,
+    number as knumber,
+} from "@khanacademy/kmath";
+import {entries} from "@khanacademy/wonder-stuff-core";
 import $ from "jquery";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import Raphael from "raphael";
-import _ from "underscore";
 
 // Minify Raphael ourselves because IE8 has a problem with the 1.5.2 minified
 // release
@@ -23,7 +27,7 @@ import type {Coord} from "../interactive2/types";
 
 const {processMath} = Tex;
 
-export function polar(r: number | Coord, th: number) {
+export function polar(r: number | Coord, th: number): Coord {
     if (typeof r === "number") {
         r = [r, r];
     }
@@ -31,64 +35,62 @@ export function polar(r: number | Coord, th: number) {
     return [r[0] * Math.cos(th), r[1] * Math.sin(th)];
 }
 
-const GraphUtils: any = {
-    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);
-        });
-    },
+interface RaphaelElement {
+    type: string;
+    attrs: Record<string, any>;
+    node: {
+        style: {
+            shapeRendering: "crispEdges" | "geometricPrecision";
+        };
+    };
+}
 
-    // 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)
-        );
-    },
+type PositionedShape = {wrapper: HTMLDivElement; visibleShape: RaphaelElement};
 
-    graphs: {},
+export type StyleParams = {
+    fill?: string;
+    labelDistance?: number;
+    opacity?: number;
+    step?: Coord;
+    stroke?: string;
+    strokeWidth?: number;
 };
 
-class Graphie {
+type LabelPosition =
+    | "center"
+    | "above"
+    | "below"
+    | "right"
+    | "left"
+    | "above right"
+    | "above left"
+    | "below right"
+    | "below left";
+
+interface LabelMethod {
+    (point: Coord, text: string, position: LabelPosition): any;
+    (
+        point: Coord,
+        text: string,
+        position: LabelPosition,
+        renderTex: boolean,
+    ): any;
+    (
+        point: Coord,
+        text: string,
+        position: LabelPosition,
+        style: StyleParams,
+    ): any;
+    (
+        point: Coord,
+        text: string,
+        position: LabelPosition,
+        renderTex: boolean,
+        style: StyleParams,
+    ): any;
+}
+
+export class Graphie {
     el: HTMLElement;
     #bounds?: GraphBounds;
     #drawingTransform?: DrawingTransform;
@@ -121,7 +123,7 @@ class Graphie {
     init(options: {
         range?: [Interval, Interval];
         scale?: number | Coord;
-        isMobile: boolean;
+        isMobile?: boolean;
     }) {
         let scale = options.scale || [40, 40];
         scale = typeof scale === "number" ? [scale, scale] : scale;
@@ -156,7 +158,7 @@ class Graphie {
         this.xpixels = w;
         this.ypixels = h;
 
-        this.isMobile = options.isMobile;
+        this.isMobile = options.isMobile ?? false;
 
         return this;
     }
@@ -173,14 +175,37 @@ class Graphie {
     // - 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
-    graphInit(options: any) {
+    graphInit(options: {
+        range?: [Interval, Interval] | Coord;
+        grid?: boolean;
+        gridRange?: [Interval, Interval] | Coord;
+        scale: Coord | number;
+        axes?: true;
+        axisArrows?: "<->" | "->" | true | "";
+        axisOpacity?: number;
+        axisCenter?: Coord;
+        axisLabels?: [string, string] | false;
+        gridOpacity?: number;
+        gridStep?: Coord | number;
+        ticks?: boolean;
+        tickStep?: Coord | number;
+        tickLen?: Coord | number;
+        tickOpacity?: number;
+        labels?: boolean;
+        labelStep?: number;
+        labelOpacity?: number;
+        labelFormat?: (a: number) => string;
+        yLabelFormat?: (y: number) => string;
+        xLabelFormat?: (x: number) => string;
+        unityLabels?: boolean | [boolean, boolean];
+        isMobile?: boolean;
+    }) {
         options = options || {};
 
-        $.each(options, function (prop, val: any) {
+        for (const [prop, val] of entries(options)) {
             // allow options to be specified by a single number for shorthand if
             // the horizontal and vertical components are the same
             if (
-                // @ts-expect-error - TS2339 - Property 'match' does not exist on type 'string | number | symbol'.
                 !prop.match(/.*Opacity$/) &&
                 prop !== "range" &&
                 typeof val === "number"
@@ -190,32 +215,21 @@ class Graphie {
 
             // 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],
-                    ];
-                }
+                options[prop] = normalizeRange(options[prop]);
             }
-        });
+        }
 
-        const range = options.range || [
-            [-10, 10],
-            [-10, 10],
-        ];
-        const gridRange = options.gridRange || options.range;
+        const range = normalizeRange(
+            options.range || [
+                [-10, 10],
+                [-10, 10],
+            ],
+        );
+        const gridRange = normalizeRange(options.gridRange || 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 gridStep = toPair(options.gridStep || [1, 1]);
         const axes = options.axes != null ? options.axes : true;
         const axisArrows = options.axisArrows || "";
         const axisOpacity = options.axisOpacity || 1.0;
@@ -251,7 +265,7 @@ class Graphie {
             ],
         ] as [Interval, Interval];
 
-        if (!_.isArray(unityLabels)) {
+        if (!Array.isArray(unityLabels)) {
             unityLabels = [unityLabels, unityLabels];
         }
 
@@ -366,7 +380,7 @@ class Graphie {
                     opacity: options.isMobile ? 1 : tickOpacity,
                     strokeWidth: 1,
                 },
-                function () {
+                () => {
                     // horizontal axis
                     let step = gridStep[0] * tickStep[0];
                     let len = tickLen[0] / scale[1];
@@ -424,7 +438,6 @@ class Graphie {
                             y += step
                         ) {
                             if (y < stop || !axisArrows) {
-                                // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                                 this.line(
                                     [-len + axisCenter[0], y],
                                     [
@@ -443,7 +456,6 @@ class Graphie {
                             y -= step
                         ) {
                             if (y > start || !axisArrows) {
-                                // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                                 this.line(
                                     [-len + axisCenter[0], y],
                                     [
@@ -552,7 +564,7 @@ class Graphie {
         }
     }
 
-    drawingTransform(): DrawingTransform {
+    private drawingTransform(): DrawingTransform {
         if (this.#drawingTransform == null) {
             throw new Error(
                 "Can't get drawingTransform of an uninitialized Graphie",
@@ -561,7 +573,7 @@ class Graphie {
         return this.#drawingTransform;
     }
 
-    bounds(): GraphBounds {
+    private bounds(): GraphBounds {
         if (this.#bounds == null) {
             throw new Error("Can't get bounds of an uninitialized Graphie");
         }
@@ -573,39 +585,517 @@ class Graphie {
 
         if (typeof fn === "function") {
             const oldStyle = this.currentStyle;
-            this.currentStyle = $.extend({}, this.currentStyle, processed);
+            this.currentStyle = {...this.currentStyle, ...processed};
             const result = fn.call(this);
             this.currentStyle = oldStyle;
             return result;
         }
-        $.extend(this.currentStyle, processed);
+        Object.assign(this.currentStyle, processed);
     }
 
-    label(point: any, text: any, direction: any, latex?: any) {}
+    grid(xr: Interval, yr: Interval, style?: StyleParams): unknown {
+        return this.withStyle(style, () => {
+            const step: any = this.currentStyle.step || [1, 1];
+            const set = this.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]));
+            }
 
-    grid(xr: any, yr: any, styleAttributes: any) {}
+            return set;
+        });
+    }
 
-    // path is a stub that gets overwritten with a function from drawingTools
-    // in createGraphie
-    path(points: any) {}
+    arc(
+        center: Coord,
+        radius: Coord,
+        startAngle: number,
+        endAngle: number,
+        sector: boolean,
+        style?: StyleParams,
+    ): RaphaelElement {
+        return this.withStyle(style, () => {
+            startAngle = ((startAngle % 360) + 360) % 360;
+            endAngle = ((endAngle % 360) + 360) % 360;
+
+            const cent = this.scalePoint(center);
+            const radii = this.scaleVector(radius);
+            const startVector = polar(radius, startAngle);
+            const endVector = polar(radius, endAngle);
+
+            // We round the coordinates to make testing easier, because trig
+            // operations return unround numbers.
+            // TODO(benchristel): move rounding to scalePoint?
+            const round = (x) => knumber.round(x, 6);
+            const startPoint = this.scalePoint([
+                round(center[0] + startVector[0]),
+                round(center[1] + startVector[1]),
+            ]);
+            const endPoint = this.scalePoint([
+                round(center[0] + endVector[0]),
+                round(center[1] + endVector[1]),
+            ]);
+
+            const largeAngle =
+                (((endAngle - startAngle) % 360) + 360) % 360 > 180;
+
+            return this.raphael.path(
+                "M" +
+                    startPoint.join(" ") +
+                    "A" +
+                    radii.join(" ") +
+                    " 0 " + // ellipse rotation
+                    (largeAngle ? 1 : 0) +
+                    " 0 " + // sweep flag
+                    endPoint.join(" ") +
+                    (sector ? "L" + cent.join(" ") + "z" : ""),
+            );
+        });
+    }
 
-    // line is a stub that gets overwritten with a function from drawingTools
-    // in createGraphie
-    line(start: any, end: any) {}
+    circle(center: Coord, radius: number, style?: StyleParams) {
+        return this.withStyle(style, () =>
+            this.raphael.ellipse(
+                ...this.scalePoint(center),
+                ...this.scaleVector([radius, radius]),
+            ),
+        );
+    }
 
-    svgPath = (points: any, alreadyScaled) => {
-        return $.map(points, (point, i) => {
-            if (point === true) {
-                return "z";
+    // (x, y) is coordinate of bottom left corner
+    rect(x, y, width, height, style?: StyleParams) {
+        return this.withStyle(style, () => {
+            // Raphael needs (x, y) to be coordinate of upper left corner
+            const corner = this.scalePoint([x, y + height]);
+            const dims = this.scaleVector([width, height]);
+            const elem = this.raphael.rect(...corner.concat(dims));
+
+            if (this.isMobile) {
+                elem.node.style.shapeRendering = "crispEdges";
             }
-            const scaled = alreadyScaled ? point : this.scalePoint(point);
-            return (
-                (i === 0 ? "M" : "L") +
-                KhanMath.bound(scaled[0]) +
-                " " +
-                KhanMath.bound(scaled[1])
+
+            return elem;
+        });
+    }
+
+    ellipse(center, radii, style?: StyleParams) {
+        return this.withStyle(style, () =>
+            this.raphael.ellipse(
+                ...this.scalePoint(center).concat(this.scaleVector(radii)),
+            ),
+        );
+    }
+
+    fixedEllipse(
+        center: number | Coord,
+        // Different type than Coord, this is radiusX, radiusY
+        radii: number | [number, number],
+        maxScale: number,
+        padding: number,
+        style?: StyleParams,
+    ): PositionedShape {
+        return this.withStyle(style, () => {
+            // Scale point and radius
+            const scaledPoint = this.scalePoint(center);
+            const scaledRadii = this.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,
+            };
+        });
+    }
+
+    private unstyledPath(points: Coord[]): RaphaelElement {
+        const p = this.raphael.path(this.svgPath(points));
+        p.graphiePath = points;
+        return p;
+    }
+
+    path(points: Coord[], style?: StyleParams): RaphaelElement {
+        return this.withStyle(style, () => {
+            return this.unstyledPath(points);
+        });
+    }
+
+    // fixedPath is a stub that gets overwritten with a function from
+    // drawingTools in createGraphie
+    fixedPath(
+        points: Coord[],
+        center: Coord | null,
+        createPath: (scaledPoints: Coord[]) => string,
+    ): PositionedShape {
+        points = points.map(this.scalePoint);
+        center = center ? this.scalePoint(center) : null;
+        createPath = createPath || this.svgPath;
+
+        // Compute bounding box
+        const xs = points.map((p) => p[0]);
+        const ys = points.map((p) => p[1]);
+        const pathLeft = Math.min(...xs);
+        const pathRight = Math.max(...xs);
+        const pathTop = Math.min(...ys);
+        const pathBottom = Math.max(...ys);
+
+        // Apply padding to line
+        const padding: Coord = [4, 4];
+
+        // Calculate and apply additional offset
+        const topLeftOfBoundingBox: Coord = [pathLeft, pathTop];
+
+        // Apply padding and offset to points to convert from
+        // canvas coordinates to pixel coordinates relative to bounding box
+        points = points.map(function (point) {
+            return kvector.add(
+                kvector.subtract(point, topLeftOfBoundingBox),
+                kvector.scale(padding, 0.5),
+            );
+        });
+
+        // Calculate <div> dimensions
+        const width = pathRight - pathLeft + padding[0];
+        const height = pathBottom - pathTop + padding[1];
+        const left = topLeftOfBoundingBox[0] - padding[0] / 2;
+        const top = topLeftOfBoundingBox[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
+            // NOTE(kevinb): jQuery doesn't like that `transformOrigin `could be `null`
+            // so we cast to `any` here.
+            transformOrigin: center
+                ? width / 2 +
+                  center[0] +
+                  "px " +
+                  (height / 2 + center[1]) +
+                  "px"
+                : null,
+        } as any);
+
+        // Create Raphael canvas
+        const localRaphael = Raphael(wrapper, width, height);
+
+        // Calculate path
+        const visibleShape = localRaphael.path(createPath(points));
+
+        return {
+            wrapper: wrapper,
+            visibleShape: visibleShape,
+        };
+    }
+
+    scaledPath(points: Coord[], style?: StyleParams): RaphaelElement {
+        return this.withStyle(style, () => {
+            const p = this.raphael.path(
+                this.svgPath(points, /* alreadyScaled */ true),
             );
-        }).join("");
+            p.graphiePath = points;
+            return p;
+        });
+    }
+
+    line(start: Coord, end: Coord, style?: StyleParams): RaphaelElement {
+        return this.withStyle(style, () => {
+            const l = this.unstyledPath([start, end]);
+
+            if (this.isMobile) {
+                l.node.style.shapeRendering = "crispEdges";
+            }
+
+            return l;
+        });
+    }
+
+    parabola(
+        a: number,
+        b: number,
+        c: number,
+        style?: StyleParams,
+    ): RaphaelElement {
+        return this.withStyle(style, () =>
+            this.raphael.path(this.svgParabolaPath(a, b, c)),
+        );
+    }
+
+    fixedLine(start: Coord, end: Coord, thickness: number): PositionedShape {
+        // Apply padding to line
+        const padding: Coord = [thickness, thickness];
+
+        // Scale points to get values in pixels
+        start = this.scalePoint(start);
+        end = this.scalePoint(end);
+
+        // Calculate and apply additional offset
+        const extraOffset: Coord = [
+            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(
+        a: number,
+        b: number,
+        c: number,
+        d: number,
+        style?: StyleParams,
+    ): RaphaelElement {
+        return this.withStyle(style, () =>
+            // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
+            this.raphael.path(this.svgSinusoidPath(a, b, c, d)),
+        );
+    }
+
+    label: LabelMethod = (
+        point: Coord,
+        text: string,
+        direction:
+            | "center"
+            | "above"
+            | "below"
+            | "right"
+            | "left"
+            | "above right"
+            | "above left"
+            | "below right"
+            | "below left",
+        arg4?: boolean | StyleParams,
+        arg5?: StyleParams,
+    ): any => {
+        const style = typeof arg4 === "object" ? arg4 : arg5;
+        const latex = typeof arg4 === "boolean" ? arg4 : true;
+        return this.withStyle(style, () => {
+            const $span = $("<span>").addClass("graphie-label");
+
+            const pad = this.currentStyle["label-distance"];
+
+            $span
+                .css({
+                    position: "absolute",
+                    padding: (pad != null ? pad : 7) + "px",
+                    color: "black",
+                })
+                .data("labelDirection", direction)
+                .appendTo(this.el);
+
+            // @ts-expect-error - TS2339 - Property 'setPosition' does not exist on type 'JQuery<HTMLElement>'.
+            $span.setPosition = (point) => {
+                const scaledPoint = this.scalePoint(point);
+                $span.css({
+                    left: scaledPoint[0],
+                    top: scaledPoint[1],
+                });
+            };
+
+            // @ts-expect-error - TS2339 - Property 'setPosition' does not exist on type 'JQuery<HTMLElement>'.
+            $span.setPosition(point);
+
+            const span = $span[0];
+
+            // @ts-expect-error - TS2339 - Property 'processMath' does not exist on type 'JQuery<HTMLElement>'.
+            $span.processMath = function (math, force) {
+                processMath(span, math, force, function () {
+                    const width = span.scrollWidth;
+                    const height = span.scrollHeight;
+                    setLabelMargins(span, [width, height]);
+                });
+            };
+
+            // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
+            $span.processText = function (text: any) {
+                $span.html(text);
+                const width = span.scrollWidth;
+                const height = span.scrollHeight;
+                setLabelMargins(span, [width, height]);
+            };
+
+            if (latex) {
+                // @ts-expect-error - TS2339 - Property 'processMath' does not exist on type 'JQuery<HTMLElement>'.
+                $span.processMath(text, /* force */ false);
+            } else {
+                // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
+                $span.processText(text);
+            }
+
+            return $span;
+        });
+    };
+
+    plotParametric(
+        fn: (t: number) => Coord,
+        range: Interval,
+        style?: StyleParams,
+    ): RaphaelElement {
+        return this.withStyle(style, () => {
+            // 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 clip = (xy) => {
+                if (Math.abs(xy[1]) > 500000) {
+                    return [xy[0], Math.min(Math.max(xy[1], -500000), 500000)];
+                }
+                return xy;
+            };
+            const clippedFn = (x) => clip(fn(x));
+
+            const min = range[0];
+            const max = range[1];
+            let step = (max - min) / (this.currentStyle["plot-points"] || 800);
+            if (step === 0) {
+                step = 1;
+            }
+
+            const paths = this.raphael.set();
+            let points: Coord[] = [];
+            let lastY = clippedFn(min)[1];
+
+            for (let t = min; t <= max; t += step) {
+                const point = clippedFn(t);
+                const y = point[1];
+
+                // Find points where it flips
+                if (
+                    // if there is an asymptote here, meaning that the graph
+                    // switches signs and has a large difference
+                    (y > 0 !== lastY > 0 &&
+                        Math.abs(y - lastY) >
+                            2 * this.drawingTransform().pixelsPerUnitY()) ||
+                    // or the function is undefined
+                    isNaN(y)
+                ) {
+                    // split the path at this point, and draw it
+                    paths.push(this.unstyledPath(points));
+                    // restart the path, excluding this point
+                    points = [];
+                } else {
+                    // otherwise, just add the point to the path
+                    points.push(point);
+                }
+
+                lastY = y;
+            }
+
+            paths.push(this.unstyledPath(points));
+
+            return paths;
+        });
+    }
+
+    plot(
+        fn: (x: number) => number,
+        range: Interval,
+        style?: StyleParams,
+    ): RaphaelElement {
+        return this.withStyle(style, () => {
+            const min = range[0];
+            const max = range[1];
+            if (!this.currentStyle["plot-points"]) {
+                this.currentStyle["plot-points"] =
+                    2 * (max - min) * this.drawingTransform().pixelsPerUnitX();
+            }
+
+            const parametricFn = (x): Coord => [x, fn(x)];
+            return this.plotParametric(parametricFn, range);
+        });
+    }
+
+    svgPath = (points: (Coord | true)[], alreadyScaled?: boolean) => {
+        return points
+            .map((point, i) => {
+                if (point === true) {
+                    return "z";
+                }
+                const scaled = alreadyScaled ? point : this.scalePoint(point);
+                return (
+                    (i === 0 ? "M" : "L") +
+                    KhanMath.bound(scaled[0]) +
+                    " " +
+                    KhanMath.bound(scaled[1])
+                );
+            })
+            .join("");
     };
 
     svgParabolaPath = (a: any, b: any, c: any) => {
@@ -615,11 +1105,10 @@ class Graphie {
 
         // If points are collinear, plot a line instead
         if (a === 0) {
-            const points = [
+            const points: Coord[] = [
                 [this.bounds().xMin, computeParabola(this.bounds().xMin)],
                 [this.bounds().xMax, computeParabola(this.bounds().xMax)],
             ];
-            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             return this.svgPath(points);
         }
 
@@ -639,17 +1128,16 @@ class Graphie {
         const point = [xPoint, computeParabola(xPoint)];
 
         // Calculate SVG 'control' point, defined by spec
-        const control = [vertex[0], vertex[1] - (point[1] - vertex[1])];
+        const control: Coord = [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]];
+        const left: Coord = [vertex[0] - dx, point[1]];
+        const right: Coord = [vertex[0] + dx, point[1]];
 
         // Scale and bound
-        // @ts-expect-error - TS2345 - Argument of type '(point: number | Coord) => Coord' is not assignable to parameter of type 'Iteratee<any[][], any, any[]>'.
-        const points = _.map([left, control, right], this.scalePoint);
-        const values = _.map(_.flatten(points), KhanMath.bound);
+        const points = [left, control, right].map(this.scalePoint);
+        const values = points.flat().map(KhanMath.bound);
         return (
             "M" +
             values[0] +
@@ -666,7 +1154,7 @@ class Graphie {
         );
     };
 
-    svgSinusoidPath = (a, b, c: any, d: any) => {
+    svgSinusoidPath = (a: number, b: number, c: number, d: number) => {
         // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
         const quarterPeriod = Math.abs(Math.PI / (2 * b));
 
@@ -699,9 +1187,8 @@ class Graphie {
                 computeSine(x1),
             ];
 
-            // Zip and scale
-            // @ts-expect-error - TS2345 - Argument of type '(point: number | Coord) => Coord' is not assignable to parameter of type 'Iteratee<any[][], any, any[]>'.
-            return _.map(_.zip(xCoords, yCoords), this.scalePoint);
+            const points = kvector.zip(xCoords, yCoords);
+            return points.map(this.scalePoint);
         };
 
         // How many quarter-periods do we need to span the graph?
@@ -752,10 +1239,101 @@ class Graphie {
         return path;
     };
 
-    scalePoint = (point: number | Coord): Coord => {
-        return this.drawingTransform().scalePoint(point);
-    };
-
+    private withStyle<T>(style: StyleParams | undefined, fn: () => T): T {
+        const oldStyle = this.currentStyle;
+        this.currentStyle = {
+            ...this.currentStyle,
+            ...this.processAttributes(style),
+        };
+        const result = this.postprocessDrawingResult(fn());
+        this.currentStyle = oldStyle;
+        return result;
+    }
+
+    private postprocessDrawingResult(result: any): any {
+        // Bad heuristic for recognizing Raphael elements and sets
+        const type = result.constructor.prototype;
+        if (type === Raphael.el || type === Raphael.st) {
+            result.attr(this.currentStyle);
+
+            if (this.currentStyle.arrows) {
+                result = this.addArrowheads(result);
+            }
+        } else if (result instanceof $) {
+            // We assume that if it's not a Raphael element/set, it
+            // does not contain SVG.
+            // @ts-expect-error - TS2339 - Property 'css' does not exist on type '{}'.
+            result.css({
+                ...this.currentStyle,
+                ...SVG_SPECIFIC_STYLE_MASK,
+            });
+        }
+
+        return result;
+    }
+
+    private addArrowheads(path: any) {
+        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 = this.raphael.set();
+                const head = this.raphael.path(
+                    this.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 = this.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, this.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++) {
+                this.addArrowheads(path.items[i]);
+            }
+        }
+        return path;
+    }
+
+    scalePoint = (point: number | Coord): Coord => {
+        return this.drawingTransform().scalePoint(point);
+    };
+
     scaleVector = (point: number | Coord) => {
         return this.drawingTransform().scaleVector(point);
     };
@@ -768,7 +1346,7 @@ class Graphie {
         return this.drawingTransform().unscaleVector(point);
     };
 
-    processAttributes(attrs: any) {
+    private processAttributes(attrs: any) {
         const transformers = {
             scale: (scale) => {
                 this.drawingTransform().setScale(scale);
@@ -805,14 +1383,13 @@ class Graphie {
         } as const;
 
         const processed: Record<string, any> = {};
-        $.each(attrs || {}, function (key, value) {
+        Object.entries(attrs || {}).forEach(function ([key, value]) {
             const transformer = transformers[key];
 
             if (typeof transformer === "function") {
-                $.extend(processed, transformer(value));
+                Object.assign(processed, transformer(value));
             } else {
-                const dasherized = key
-                    // @ts-expect-error - TS2339 - Property 'replace' does not exist on type 'string | number | symbol'.
+                const dasherized = String(key)
                     .replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2")
                     .replace(/([a-z\d])([A-Z])/g, "$1-$2")
                     .toLowerCase();
@@ -824,8 +1401,6 @@ class Graphie {
     }
 }
 
-GraphUtils.Graphie = Graphie;
-
 const labelDirections = {
     center: [-0.5, -0.5],
     above: [-0.5, -1.0],
@@ -838,689 +1413,162 @@ const labelDirections = {
     "above left": [-1.0, -1.0],
 } as const;
 
-/**
- * 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,
-} as const;
-
-GraphUtils.createGraphie = function (el: any) {
-    const thisGraphie = new Graphie(el);
-
-    const setLabelMargins = function (span: any, size: Array<any>) {
-        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,
-            });
+// A range for a Graphie can be specified in one of three forms:
+// - A pair of intervals, [[xMin, xMax], [yMin, yMax]]. This is the
+//   "normalized" form.
+// - A pair of magnitudes for the x and y ranges, respectively. E.g. [5, 10]
+//   is equivalent to [[-5, 5], [-10, 10]].
+// - A single magnitude to be used for both x and y. E.g. 10 is equivalent to
+//   [[-10, 10], [-10, 10]]
+type RangeSpecifier = [Interval, Interval] | Coord | number;
+
+// Overload normalizeRange to specify that it only returns undefined if its
+// argument is undefined.
+export function normalizeRange(range: RangeSpecifier): [Interval, Interval];
+export function normalizeRange(
+    range: RangeSpecifier | undefined,
+): [Interval, Interval] | undefined;
+
+// normalizeRange converts a RangeSpecifier into a pair of Intervals that give
+// the x and y ranges, respectively
+export function normalizeRange(
+    range: RangeSpecifier | undefined,
+): [Interval, Interval] | undefined {
+    function normalizeInterval(magnitude: number | Interval): Interval {
+        if (typeof magnitude === "number") {
+            return [-magnitude, magnitude];
         } else {
-            const multipliers = labelDirections[direction || "center"];
-            $span.css({
-                marginLeft: Math.round(width * multipliers[0]),
-                marginTop: Math.round(height * multipliers[1]),
-            });
+            return magnitude;
         }
-    };
-
-    // `svgPath` is independent of graphie range, so we export it independently
-    GraphUtils.svgPath = thisGraphie.svgPath;
-
-    const addArrowheads = function arrows(path: any) {
-        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 = thisGraphie.raphael.set();
-                const head = thisGraphie.raphael.path(
-                    thisGraphie.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 = thisGraphie.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, thisGraphie.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;
-    };
-
-    function circle(center, radius) {
-        return thisGraphie.raphael.ellipse(
-            ...thisGraphie
-                .scalePoint(center)
-                .concat(thisGraphie.scaleVector([radius, radius])),
-        );
     }
 
-    // (x, y) is coordinate of bottom left corner
-    function rect(x, y, width, height) {
-        // Raphael needs (x, y) to be coordinate of upper left corner
-        const corner = thisGraphie.scalePoint([x, y + height]);
-        const dims = thisGraphie.scaleVector([width, height]);
-        const elem = thisGraphie.raphael.rect(...corner.concat(dims));
-
-        if (thisGraphie.isMobile) {
-            elem.node.style.shapeRendering = "crispEdges";
+    function getXAndYRanges(
+        range: RangeSpecifier,
+    ): Coord | [Interval, Interval] {
+        if (Array.isArray(range)) {
+            return range;
+        } else {
+            return [range, range];
         }
-
-        return elem;
     }
 
-    function ellipse(center, radii) {
-        return thisGraphie.raphael.ellipse(
-            ...thisGraphie
-                .scalePoint(center)
-                .concat(thisGraphie.scaleVector(radii)),
-        );
+    if (range == null) {
+        return range;
     }
 
-    function fixedEllipse(
-        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 = thisGraphie.scalePoint(center);
-        const scaledRadii = thisGraphie.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,
-        };
-    }
-
-    function arc(center, radius, startAngle, endAngle, sector) {
-        startAngle = ((startAngle % 360) + 360) % 360;
-        endAngle = ((endAngle % 360) + 360) % 360;
-
-        const cent = thisGraphie.scalePoint(center);
-        const radii = thisGraphie.scaleVector(radius);
-        const startVector = polar(radius, startAngle);
-        const endVector = polar(radius, endAngle);
-
-        const startPoint = thisGraphie.scalePoint([
-            center[0] + startVector[0],
-            center[1] + startVector[1],
-        ]);
-        const endPoint = thisGraphie.scalePoint([
-            center[0] + endVector[0],
-            center[1] + endVector[1],
-        ]);
-
-        const largeAngle = (((endAngle - startAngle) % 360) + 360) % 360 > 180;
-
-        return thisGraphie.raphael.path(
-            "M" +
-                startPoint.join(" ") +
-                "A" +
-                radii.join(" ") +
-                " 0 " + // ellipse rotation
-                (largeAngle ? 1 : 0) +
-                " 0 " + // sweep flag
-                endPoint.join(" ") +
-                (sector ? "L" + cent.join(" ") + "z" : ""),
-        );
-    }
-
-    function path(points) {
-        // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-        const p = thisGraphie.raphael.path(thisGraphie.svgPath(points));
-        p.graphiePath = points;
-
-        return p;
-    }
-
-    function fixedPath(points, center, createPath) {
-        points = _.map(points, thisGraphie.scalePoint);
-        center = center ? thisGraphie.scalePoint(center) : null;
-        createPath = createPath || thisGraphie.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
-            // NOTE(kevinb): jQuery doesn't like that `transformOrigin `could be `null`
-            // so we cast to `any` here.
-            transformOrigin: center
-                ? width / 2 +
-                  center[0] +
-                  "px " +
-                  (height / 2 + center[1]) +
-                  "px"
-                : null,
-        } as any);
-
-        // Create Raphael canvas
-        const localRaphael = Raphael(wrapper, width, height);
-
-        // Calculate path
-        const visibleShape = localRaphael.path(createPath(points));
-
-        return {
-            wrapper: wrapper,
-            visibleShape: visibleShape,
-        };
-    }
+    const [xRange, yRange] = getXAndYRanges(range);
+    return [normalizeInterval(xRange), normalizeInterval(yRange)];
+}
 
-    function scaledPath(points) {
-        const p = thisGraphie.raphael.path(
-            thisGraphie.svgPath(points, /* alreadyScaled */ true),
-        );
-        p.graphiePath = points;
-        return p;
+function toPair(x: number | [number, number]): [number, number] {
+    if (Array.isArray(x)) {
+        return x;
     }
+    return [x, x];
+}
 
-    function line(start, end) {
-        const l = path([start, end]);
-
-        if (thisGraphie.isMobile) {
-            l.node.style.shapeRendering = "crispEdges";
-        }
-
-        return l;
-    }
+/**
+ * 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 `{...someStyles, ...SVG_SPECIFIC_STYLE_MASK}`
+ */
+const SVG_SPECIFIC_STYLE_MASK = {
+    "stroke-width": null,
+} as const;
 
-    function parabola(a, b, c) {
-        // Plot a parabola of the form: f(x) = (a * x + b) * x + c
-        return thisGraphie.raphael.path(thisGraphie.svgParabolaPath(a, b, c));
+const setLabelMargins = function (span: HTMLElement, size: Coord): void {
+    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", "");
 
-    function fixedLine(start, end, thickness) {
-        // Apply padding to line
-        const padding = [thickness, thickness];
-
-        // Scale points to get values in pixels
-        start = thisGraphie.scalePoint(start);
-        end = thisGraphie.scalePoint(end);
+    if (typeof direction === "number") {
+        const x = Math.cos(direction);
+        const y = Math.sin(direction);
 
-        // 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),
+        const scale = Math.min(
+            width / 2 / Math.abs(x),
+            height / 2 / Math.abs(y),
         );
-        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",
+        $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]),
         });
-
-        // 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,
-        };
-    }
-
-    function sinusoid(a, b, c, d) {
-        // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
-        return thisGraphie.raphael.path(
-            thisGraphie.svgSinusoidPath(a, b, c, d),
-        );
-    }
-
-    function grid(xr, yr) {
-        const step: any = thisGraphie.currentStyle.step || [1, 1];
-        const set = thisGraphie.raphael.set();
-
-        let x = step[0] * Math.ceil(xr[0] / step[0]);
-        for (; x <= xr[1]; x += step[0]) {
-            set.push(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(line([xr[0], y], [xr[1], y]));
-        }
-
-        return set;
-    }
-
-    function label(point, text, direction, latex) {
-        latex = typeof latex === "undefined" || latex;
-
-        const $span = $("<span>").addClass("graphie-label");
-
-        const pad = thisGraphie.currentStyle["label-distance"];
-
-        $span
-            .css(
-                $.extend(
-                    {},
-                    {
-                        position: "absolute",
-                        padding: (pad != null ? pad : 7) + "px",
-                        color: "black",
-                    },
-                ),
-            )
-            .data("labelDirection", direction)
-            .appendTo(thisGraphie.el);
-
-        // @ts-expect-error - TS2339 - Property 'setPosition' does not exist on type 'JQuery<HTMLElement>'.
-        $span.setPosition = function (point) {
-            const scaledPoint = thisGraphie.scalePoint(point);
-            $span.css({
-                left: scaledPoint[0],
-                top: scaledPoint[1],
-            });
-        };
-
-        // @ts-expect-error - TS2339 - Property 'setPosition' does not exist on type 'JQuery<HTMLElement>'.
-        $span.setPosition(point);
-
-        const span = $span[0];
-
-        // @ts-expect-error - TS2339 - Property 'processMath' does not exist on type 'JQuery<HTMLElement>'.
-        $span.processMath = function (math, force) {
-            processMath(span, math, force, function () {
-                const width = span.scrollWidth;
-                const height = span.scrollHeight;
-                setLabelMargins(span, [width, height]);
-            });
-        };
-
-        // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
-        $span.processText = function (text: any) {
-            $span.html(text);
-            const width = span.scrollWidth;
-            const height = span.scrollHeight;
-            setLabelMargins(span, [width, height]);
-        };
-
-        if (latex) {
-            // @ts-expect-error - TS2339 - Property 'processMath' does not exist on type 'JQuery<HTMLElement>'.
-            $span.processMath(text, /* force */ false);
-        } else {
-            // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
-            $span.processText(text);
-        }
-
-        return $span;
     }
+};
 
-    function plotParametric(
-        fn: (t: number) => Coord,
-        range,
-        shade,
-        fn2: (t: number) => Coord = (t) => [t, 0],
-    ) {
-        // 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'.
-
-        // 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: number) => clipper(fn2(x));
+const GraphUtils: any = {
+    Graphie,
 
-        if (!thisGraphie.currentStyle.strokeLinejoin) {
-            thisGraphie.currentStyle.strokeLinejoin = "round";
-        }
-        if (!thisGraphie.currentStyle.strokeLinecap) {
-            thisGraphie.currentStyle.strokeLinecap = "round";
-        }
+    createGraphie: function (el: any): Graphie {
+        return new Graphie(el);
+    },
 
-        const min = range[0];
-        const max = range[1];
-        let step =
-            (max - min) / (thisGraphie.currentStyle["plot-points"] || 800);
-        if (step === 0) {
-            step = 1;
+    unscaledSvgPath: function (points) {
+        // If this is an empty closed path, return "" instead of "z", which
+        // would give an error
+        if (points[0] === true) {
+            return "";
         }
-
-        const paths = thisGraphie.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 * thisGraphie.drawingTransform().pixelsPerUnitY()) ||
-                // or the function is undefined
-                isNaN(diff[1])
-            ) {
-                // split the path at this point, and draw it
-                if (shade) {
-                    // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-                    points.push(top);
-
-                    // backtrack to draw paired function
-                    for (let u = t - step; u >= lastFlip; u -= step) {
-                        // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-                        points.push(clippedFn2(u));
-                    }
-                    lastFlip = t;
-                }
-                paths.push(path(points));
-                // restart the path, excluding this point
-                points = [];
-                if (shade) {
-                    // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-                    points.push(top);
+        return points
+            .map(function (point, i) {
+                if (point === true) {
+                    return "z";
                 }
-            } else {
-                // otherwise, just add the point to the path
-                // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-                points.push(top);
-            }
-
-            lastDiff = diff;
-        }
-
-        if (shade) {
-            // backtrack to draw paired function
-            for (let u = max - step; u >= lastFlip; u -= step) {
-                // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-                points.push(clippedFn2(u));
-            }
-        }
-        paths.push(path(points));
+                return (i === 0 ? "M" : "L") + point[0] + " " + point[1];
+            })
+            .join("");
+    },
 
-        return paths;
-    }
+    getDistance: function (point1, point2) {
+        return kpoint.distanceToPoint(point1, point2);
+    },
 
-    function plot(fn, range, swapAxes, shade, fn2) {
-        const min = range[0];
-        const max = range[1];
-        if (!thisGraphie.currentStyle["plot-points"]) {
-            thisGraphie.currentStyle["plot-points"] =
-                2 *
-                (max - min) *
-                thisGraphie.drawingTransform().pixelsPerUnitX();
-        }
+    /**
+     * Round the given coordinates to a given snap value
+     * (e.g., nearest 0.2 increment)
+     */
+    snapCoord: function (coord, snap) {
+        return coord.map(function (val, i) {
+            return KhanMath.roundToNearest(snap[i], val);
+        });
+    },
 
-        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 plotParametric(
-                function (y) {
-                    return [fn(y), y];
-                },
-                range,
-                shade,
-            );
-        }
-        if (fn2) {
-            if (shade) {
-                return plotParametric(
-                    function (x) {
-                        return [x, fn(x)];
-                    },
-                    range,
-                    shade,
-                    function (x) {
-                        return [x, fn2(x)];
-                    },
-                );
+    // 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;
             }
-            throw new PerseusError(
-                "fn2 should only be set when 'shade' is True.",
-                Errors.Internal,
-            );
+            return (180 + (Math.atan2(-y, -x) * 180) / Math.PI + 360) % 360;
         }
-        return plotParametric(
-            function (x) {
-                return [x, fn(x)];
-            },
-            range,
-            shade,
+        return (
+            GraphUtils.findAngle(point1, vertex) -
+            GraphUtils.findAngle(point2, vertex)
         );
-    }
-
-    const drawingTools = {
-        circle,
-        rect,
-        ellipse,
-        fixedEllipse,
-        arc,
-        path,
-        fixedPath,
-        scaledPath,
-        line,
-        parabola,
-        fixedLine,
-        sinusoid,
-        grid,
-        label,
-        plotParametric,
-        plot,
-    };
-
-    function graphify(drawingFn: any): any {
-        return function (...args) {
-            const last = args[args.length - 1];
-            const oldStyle = thisGraphie.currentStyle;
-            let result;
-
-            // The last argument is probably trying to change the style
-            if (typeof last === "object" && !_.isArray(last)) {
-                thisGraphie.currentStyle = {
-                    ...thisGraphie.currentStyle,
-                    ...thisGraphie.processAttributes(last),
-                };
-
-                const rest = [].slice.call(args, 0, args.length - 1);
-                result = drawingFn(...rest);
-            } else {
-                thisGraphie.currentStyle = $.extend(
-                    {},
-                    thisGraphie.currentStyle,
-                );
-
-                result = drawingFn(...args);
-            }
-
-            // Bad heuristic for recognizing Raphael elements and sets
-            const type = result.constructor.prototype;
-            if (type === Raphael.el || type === Raphael.st) {
-                result.attr(thisGraphie.currentStyle);
-
-                if (thisGraphie.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.
-                // @ts-expect-error - TS2339 - Property 'css' does not exist on type '{}'.
-                result.css({
-                    ...thisGraphie.currentStyle,
-                    ...SVG_SPECIFIC_STYLE_MASK,
-                });
-            }
-
-            thisGraphie.currentStyle = oldStyle;
-            return result;
-        };
-    }
-
-    $.each(drawingTools, function (name) {
-        thisGraphie[name] = graphify(drawingTools[name]);
-    });
+    },
 
-    return thisGraphie;
+    graphs: {},
 };
 
 export default GraphUtils;