@khanacademy/perseus 0.0.1 → 0.1.0

package/src/widgets/plotter.jsx

@@ -0,0 +1,1198 @@
+/* eslint-disable @babel/no-invalid-this, no-unused-vars, one-var, react/no-unsafe, react/sort-comp */
+// @flow
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import $ from "jquery";
+import PropTypes from "prop-types";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import _ from "underscore";
+
+import Interactive2 from "../interactive2.js";
+import WrappedLine from "../interactive2/wrapped-line.js";
+import {ClassNames as ApiClassNames} from "../perseus-api.jsx";
+import Util from "../util.js";
+import KhanColors from "../util/colors.js";
+import GraphUtils from "../util/graph-utils.js";
+import KhanMath from "../util/math.js";
+
+import type {WidgetExports} from "../types.js";
+
+const {deepEq} = Util;
+
+const BAR = "bar",
+    LINE = "line",
+    PIC = "pic",
+    HISTOGRAM = "histogram",
+    DOTPLOT = "dotplot";
+
+const widgetPropTypes = {
+    type: PropTypes.oneOf([BAR, LINE, PIC, HISTOGRAM, DOTPLOT]),
+    labels: PropTypes.arrayOf(PropTypes.string),
+    categories: PropTypes.arrayOf(
+        PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ),
+
+    scaleY: PropTypes.number,
+    maxY: PropTypes.number,
+    snapsPerLine: PropTypes.number,
+
+    picSize: PropTypes.number,
+    pixBoxHeight: PropTypes.number,
+    picUrl: PropTypes.string,
+
+    plotDimensions: PropTypes.arrayOf(PropTypes.number),
+    labelInterval: PropTypes.number,
+    starting: PropTypes.arrayOf(PropTypes.number),
+    static: PropTypes.bool,
+};
+
+class Plotter extends React.Component<$FlowFixMe, $FlowFixMe> {
+    shouldSetupGraphie: boolean;
+    _isMounted: boolean = false;
+    horizHairline: $FlowFixMe;
+    hairlineRange: $FlowFixMe;
+    graphie: $FlowFixMe;
+
+    static propTypes = {
+        onChange: PropTypes.func.isRequired,
+        trackInteraction: PropTypes.func.isRequired,
+        // TODO(alex): Figure out why lint chokes on this line
+        // ...widgetPropTypes,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        type: BAR,
+        labels: ["", ""],
+        categories: [""],
+
+        scaleY: 1,
+        maxY: 10,
+        snapsPerLine: 2,
+
+        picSize: 40,
+        picBoxHeight: 48,
+        picUrl: "",
+
+        plotDimensions: [380, 300],
+        labelInterval: 1,
+    };
+
+    state: $FlowFixMe = {
+        values: this.props.starting || [1],
+
+        // The measured rendered height of category strings. Used to calculate
+        // bottom padding of plot, to prevent categories from overlapping the
+        // bottom label.
+        categoryHeights: {},
+    };
+
+    DOT_PLOT_POINT_SIZE: () => number = () => {
+        return this.props.apiOptions.isMobile ? 6 : 4;
+    };
+
+    DOT_PLOT_POINT_PADDING: () => number = () => {
+        return 8;
+    };
+
+    DOT_TICK_POINT_SIZE: () => number = () => {
+        return 2;
+    };
+
+    render(): React.Node {
+        // TODO(kevinb) actually compute the size of the graphie correctly and
+        // make it that size so we don't have to add extra padding.  The value
+        // was determined by eye-balling the layout.  :(
+        const paddingForBottomLabel = 75;
+        const style = {
+            marginBottom: this.props.labels[0] ? paddingForBottomLabel : 0,
+        };
+
+        return (
+            <div
+                className={
+                    "perseus-widget-plotter graphie " +
+                    ApiClassNames.INTERACTIVE
+                }
+                // eslint-disable-next-line react/no-string-refs
+                ref="graphieDiv"
+                style={style}
+            />
+        );
+    }
+
+    componentDidUpdate(prevProps: $FlowFixMe, prevState: $FlowFixMe) {
+        this.shouldSetupGraphie =
+            this.shouldSetupGraphie ||
+            !_.isEqual(this.state.categoryHeights, prevState.categoryHeights);
+
+        if (this.shouldSetupGraphie) {
+            this.setupGraphie(prevState);
+        }
+    }
+
+    componentDidMount() {
+        this._isMounted = true;
+
+        this.setupGraphie(this.state);
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps: $FlowFixMe) {
+        const props = [
+            "type",
+            "labels",
+            "categories",
+            "scaleY",
+            "maxY",
+            "snapsPerLine",
+            "picUrl",
+            "labelInterval",
+            "static",
+        ];
+
+        this.shouldSetupGraphie = _.any(
+            props,
+            function (prop) {
+                return !_.isEqual(this.props[prop], nextProps[prop]);
+            },
+            this,
+        );
+
+        if (
+            !_.isEqual(this.props.starting, nextProps.starting) &&
+            !_.isEqual(this.state.values, nextProps.starting)
+        ) {
+            this.shouldSetupGraphie = true;
+            this.setState({values: nextProps.starting});
+        }
+    }
+
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+
+    setupGraphie: ($FlowFixMe) => void = (prevState) => {
+        const self = this;
+        self.shouldSetupGraphie = false;
+        const graphieDiv = ReactDOM.findDOMNode(self.refs.graphieDiv);
+        $(graphieDiv).empty();
+        const graphie = GraphUtils.createGraphie(graphieDiv);
+
+        // TODO(jakesandlund): It's not the react way to hang
+        // something off the component object, but since graphie
+        // is outside React, it makes it easier to do this.
+        self.graphie = graphie;
+        self.graphie.pics = [];
+        self.graphie.dotTicks = [];
+
+        const isBar = self.props.type === BAR,
+            isLine = self.props.type === LINE,
+            isPic = self.props.type === PIC,
+            isHistogram = self.props.type === HISTOGRAM,
+            isDotplot = self.props.type === DOTPLOT;
+
+        const isTiledPlot = isPic || isDotplot;
+
+        const config = {};
+        const c = config; // c for short
+
+        const isMobile = this.props.apiOptions.isMobile;
+
+        c.graph = {
+            lines: [],
+            bars: [],
+            points: [],
+            dividers: [],
+        };
+        c.scaleY = self.props.scaleY;
+        c.dimX = self.props.categories.length;
+        const plotDimensions = isMobile
+            ? [288, 336]
+            : self.props.plotDimensions;
+        if (isLine) {
+            // Subtracting 0.2 makes line have equal padding on each side
+            c.dimX += isMobile ? -0.2 : 1;
+        } else if (isHistogram) {
+            c.barPad = 0;
+            c.barWidth = 1;
+        } else if (isBar) {
+            c.barPad = isMobile ? 0.08 : 0.15;
+            c.barWidth = 1 - 2 * c.barPad;
+            c.dimX += (isMobile ? -2 : 2) * c.barPad;
+        } else if (isTiledPlot) {
+            c.picBoxHeight = self.props.picBoxHeight;
+            c.picBoxWidthPx = plotDimensions[0] / self.props.categories.length;
+            const picPadAllWidth = plotDimensions[0] - c.dimX * c.picBoxWidthPx;
+            c.picPad = picPadAllWidth / (2 * c.dimX + 2);
+            const picFullWidth = c.picBoxWidthPx + 2 * c.picPad;
+
+            // Convert from px to "unscaled"
+            c.picPad = c.picPad / picFullWidth;
+            c.picBoxWidth = c.picBoxWidthPx / picFullWidth;
+            c.dimX += 2 * c.picPad;
+        }
+
+        if (isDotplot) {
+            c.picBoxHeight =
+                this.DOT_PLOT_POINT_SIZE() * 2 + this.DOT_PLOT_POINT_PADDING();
+        }
+
+        c.dimY = Math.ceil(self.props.maxY / c.scaleY) * c.scaleY;
+
+        let padX = 25;
+
+        if ((isBar || isLine) && isMobile) {
+            padX = self.props.labels[1].length !== 0 ? 17 : 11;
+        }
+
+        // Since dotplot doesn't have an axis along the left it looks weird
+        // with the same padding as the others
+        if (isDotplot) {
+            padX /= 2;
+        }
+
+        if (isMobile && isTiledPlot && self.props.labels[1].length === 0) {
+            padX = 0;
+        }
+
+        // Default vertical padding.
+        let padTop = 25;
+        let padBottom = 25 * 3;
+
+        // TODO(michaelpolyak): Handle other plot types: Dot, Histogram, Line.
+        if (isMobile && (isBar || isTiledPlot)) {
+            // $FlowFixMe[incompatible-call]
+            const maxCategoryHeight = Math.max(
+                0,
+                ...Object.values(self.state.categoryHeights),
+            );
+
+            if (maxCategoryHeight) {
+                // Account for bottom label position, height.
+                let offsetY = 25;
+
+                if (isTiledPlot) {
+                    // Tiled plot categories have additional spacing.
+                    offsetY += 10;
+                }
+
+                padBottom = offsetY + maxCategoryHeight;
+            }
+        }
+
+        if (isMobile) {
+            c.scale = [
+                // We multiply pad by 4 because we add 3*pad padding on the left
+                // and 1*pad on the right
+                (plotDimensions[0] - padX * 4) / c.dimX,
+                (plotDimensions[1] - (padTop + padBottom)) / c.dimY,
+            ];
+        } else {
+            c.scale = _.map([c.dimX, c.dimY], function (dim, i) {
+                return plotDimensions[i] / dim;
+            });
+        }
+
+        if (isTiledPlot) {
+            c.scale[1] = c.picBoxHeight / c.scaleY;
+        }
+
+        // Transform from screen space (pixels) to plot space.
+        padX /= c.scale[0];
+        padTop /= c.scale[1];
+        padBottom /= c.scale[1];
+
+        graphie.init({
+            range: [
+                [-3 * padX, c.dimX + padX],
+                [-padBottom, c.dimY + padTop],
+            ],
+            scale: c.scale,
+            isMobile: this.props.apiOptions.isMobile,
+        });
+        graphie.addMouseLayer({
+            allowScratchpad: true,
+            setDrawingAreaAvailable:
+                this.props.apiOptions.setDrawingAreaAvailable,
+        });
+
+        if (!isTiledPlot) {
+            // If we have isMobile, we skip the 0 label.
+            const initialY = isMobile ? c.scaleY : 0;
+            for (let y = initialY; y <= c.dimY; y += c.scaleY) {
+                graphie.label(
+                    [0, y],
+                    KhanMath.roundToApprox(y, 2),
+                    "left",
+                    /* isTeX */ true /* for the \approx symbol */,
+                );
+                graphie.style(
+                    {
+                        stroke: isMobile ? "#e9ebec" : "#000",
+                        strokeWidth: 1,
+                        opacity: isMobile ? 1 : 0.3,
+                    },
+                    function () {
+                        graphie.line([0, y], [c.dimX, y]);
+                    },
+                );
+            }
+        }
+
+        if ((isBar || isLine) && isMobile) {
+            self.graphie.dragPrompt = graphie
+                .label(
+                    [c.dimX / 2, c.dimY / 2],
+                    i18n._("Drag handles to make graph"),
+                    "center",
+                    false,
+                )
+                .css("font-weight", "bold")
+                .css("color", KhanColors.KA_GREEN)
+                .css("display", "none");
+        }
+
+        self.setupCategories(config);
+
+        if (isTiledPlot && isMobile) {
+            self.graphie.dotPrompt = graphie
+                .label(
+                    [c.dimX / 2, c.dimY / 2],
+                    i18n._("Tap to add points"),
+                    "center",
+                    false,
+                )
+                .css("font-weight", "bold")
+                .css("color", KhanColors.KA_GREEN)
+                .css("display", "none");
+        }
+
+        if (isTiledPlot) {
+            self.drawPicHeights(self.state.values, prevState.values);
+        }
+
+        graphie.style(
+            {stroke: "#000", strokeWidth: 2, opacity: 1.0},
+            function () {
+                if (isTiledPlot) {
+                    if (isDotplot) {
+                        // Dotplot is a subtype of tiled plot, here we only draw
+                        // the x-axis
+                        graphie.style(
+                            {
+                                stroke: isMobile ? KhanColors.GRAY_G : "#000",
+                                strokeWidth: isMobile ? 1 : 2,
+                            },
+                            () =>
+                                graphie.line(
+                                    [isMobile ? 0 : 0.5, 0],
+                                    [c.dimX - (isMobile ? 0 : 0.5), 0],
+                                ),
+                        );
+                    } else {
+                        graphie.line([0, 0], [c.dimX, 0]);
+
+                        // Draw the left axis for non-dotplots
+                        if (self.props.labels[1].length !== 0 || !isMobile) {
+                            graphie.style(
+                                {
+                                    stroke: isMobile
+                                        ? KhanColors.GRAY_G
+                                        : "#000",
+                                    strokeWidth: isMobile ? 1 : 2,
+                                },
+                                () => graphie.line([0, 0], [0, c.dimY]),
+                            );
+                        }
+                    }
+                } else {
+                    // Draw normal axes
+                    graphie.style(
+                        {
+                            stroke: isMobile ? KhanColors.GRAY_G : "#000",
+                            strokeWidth: isMobile ? 1 : 2,
+                        },
+                        () =>
+                            graphie.line(
+                                [isMobile ? -padX * 3 : 0, 0],
+                                [c.dimX + (isMobile ? padX : 0), 0],
+                            ),
+                    );
+
+                    if (!((isBar || isLine) && isMobile)) {
+                        graphie.style(
+                            {
+                                stroke: isMobile ? KhanColors.GRAY_G : "#000",
+                                strokeWidth: isMobile ? 1 : 2,
+                            },
+                            () => graphie.line([0, 0], [0, c.dimY]),
+                        );
+                    }
+                }
+            },
+        );
+
+        graphie
+            .label(
+                [c.dimX / 2, isMobile ? -padBottom : -35 / c.scale[1]],
+                self.props.labels[0],
+                isMobile ? "above" : "below",
+                false,
+            )
+            .css("font-weight", "bold")
+            .css("color", isMobile && KhanColors.GRAY_F);
+
+        graphie
+            .label(
+                [(isMobile ? -35 : -60) / c.scale[0], c.dimY / 2],
+                self.props.labels[1],
+                "center",
+                false,
+            )
+            .css("font-weight", "bold")
+            .css("color", isMobile && KhanColors.GRAY_F)
+            .addClass("rotate");
+
+        if (this.props.apiOptions.isMobile) {
+            // $FlowFixMe[invalid-constructor]
+            this.horizHairline = new WrappedLine(this.graphie, [0, 0], [0, 0], {
+                normalStyle: {
+                    strokeWidth: 1,
+                },
+            });
+
+            this.horizHairline.attr({
+                stroke: KhanColors.INTERACTIVE,
+            });
+            this.horizHairline.hide();
+
+            this.hairlineRange = [
+                [0, c.dimX],
+                [0, c.dimY],
+            ];
+        }
+    };
+
+    showHairlines: ($FlowFixMe) => void = (point) => {
+        if (this.props.apiOptions.isMobile && this.props.markings !== "none") {
+            // Hairlines are already initialized when the graph is loaded, so
+            // here we just move them to the updated location and make them
+            // visible.
+            this.horizHairline.moveTo(
+                [this.hairlineRange[0][0], point[1]],
+                [this.hairlineRange[0][1], point[1]],
+            );
+
+            this.horizHairline.show();
+        }
+    };
+
+    hideHairlines: () => void = () => {
+        if (this.props.apiOptions.isMobile) {
+            this.horizHairline.hide();
+        }
+    };
+
+    labelCategory: ($FlowFixMe, $FlowFixMe) => Promise<$FlowFixMe> = (
+        x,
+        category,
+    ) => {
+        const isMobile = this.props.apiOptions.isMobile;
+
+        const graphie = this.graphie;
+        category = category + "";
+        let isTeX = false;
+        const mathyCategory = category.match(/^\$(.*)\$$/);
+        if (mathyCategory) {
+            category = mathyCategory[1];
+            isTeX = true;
+        }
+
+        const translateX = 5;
+        const rotationDeg = 45;
+        const rotationRad = rotationDeg * (Math.PI / 180);
+
+        const labelRotation =
+            `translateX(-50%) translateX(${translateX}px) ` +
+            `translateY(-50%) rotate(-${rotationDeg}deg)`;
+
+        const shouldRotate = isMobile && !mathyCategory;
+
+        // We return a promise that will resolve to measured category height.
+        return new Promise((resolve) => {
+            graphie.style(
+                {
+                    color: isMobile ? KhanColors.GRAY_G : "inherit",
+                    transform: shouldRotate ? labelRotation : "none",
+                    transformOrigin: "100%",
+                },
+                () => {
+                    const $span = graphie.label(
+                        [x, isMobile ? -0.5 : 0],
+                        category,
+                        "below",
+                        isTeX,
+                    );
+
+                    const height =
+                        // Additional padding is applied by style.
+                        14 +
+                        (shouldRotate
+                            ? Math.round(
+                                  $span.height() * Math.cos(rotationRad) +
+                                      ($span.width() + translateX) *
+                                          Math.sin(rotationRad),
+                              )
+                            : $span.height());
+
+                    resolve({category, height});
+                },
+            );
+        });
+    };
+
+    setupCategories: ($FlowFixMe) => void = (config) => {
+        const self = this;
+        const c = config;
+        const graphie = self.graphie;
+
+        const isMobile = this.props.apiOptions.isMobile;
+
+        // The deferred measurements returned from `labelCategory`.
+        const categoryHeightPromises = [];
+
+        if (self.props.type === HISTOGRAM) {
+            // Histograms with n labels/categories have n - 1 buckets
+            _.times(self.props.categories.length - 1, function (i) {
+                self.setupBar({
+                    index: i,
+                    startHeight: self.state.values[i],
+                    config: config,
+                    isHistogram: true,
+                });
+            });
+
+            // Label categories
+            _.each(self.props.categories, function (category, i) {
+                const x = 0.5 + i * c.barWidth;
+
+                categoryHeightPromises.push(self.labelCategory(x, category));
+                const tickHeight = 6 / c.scale[1];
+                graphie.style(
+                    {
+                        stroke: "#000",
+                        strokeWidth: isMobile ? 1 : 2,
+                        opacity: 1.0,
+                    },
+                    function () {
+                        graphie.line([x, -tickHeight], [x, 0]);
+                    },
+                );
+            });
+        } else {
+            _.each(self.props.categories, function (category, i) {
+                const startHeight = self.state.values[i];
+                let x;
+
+                if (self.props.type === BAR) {
+                    x = self.setupBar({
+                        index: i,
+                        startHeight: startHeight,
+                        config: config,
+                        isHistogram: false,
+                    });
+                } else if (self.props.type === LINE) {
+                    x = self.setupLine(i, startHeight, config);
+                } else if (self.props.type === PIC) {
+                    x = self.setupPic(i, config);
+                } else if (self.props.type === DOTPLOT) {
+                    x = self.setupDotplot(i, config);
+                }
+
+                let tickStart = 0;
+                let tickEnd = -6 / c.scale[1];
+
+                if (self.props.type === DOTPLOT && !isMobile) {
+                    tickStart = -tickEnd;
+                }
+
+                if (self.props.type === DOTPLOT) {
+                    // Dotplot lets you specify to only show labels every 'n'
+                    // ticks. It also looks nicer if it makes the labelled
+                    // ticks a bit bigger.
+                    if (
+                        i % self.props.labelInterval === 0 ||
+                        i === self.props.categories.length - 1
+                    ) {
+                        categoryHeightPromises.push(
+                            self.labelCategory(x, category),
+                        );
+                        tickStart *= 1.5;
+                        tickEnd *= 1.5;
+                    }
+                } else {
+                    categoryHeightPromises.push(
+                        self.labelCategory(x, category),
+                    );
+                }
+
+                graphie.style(
+                    {
+                        stroke: isMobile ? KhanColors.GRAY_G : "#000",
+                        strokeWidth: isMobile ? 1 : 2,
+                        opacity: 1.0,
+                    },
+                    function () {
+                        graphie.line([x, tickStart], [x, tickEnd]);
+                    },
+                );
+            });
+        }
+
+        Promise.all(categoryHeightPromises).then((measurements) => {
+            if (self._isMounted) {
+                const categoryHeights = {};
+
+                measurements.forEach(
+                    ({category, height}) =>
+                        (categoryHeights[category] = height),
+                );
+
+                self.setState({categoryHeights});
+            }
+        });
+    };
+
+    _clampValue: (number, number, number) => number = (v, min, max) => {
+        return Math.max(Math.min(v, max), min);
+    };
+
+    _maybeShowDragPrompt: () => void = () => {
+        // The drag prompt is only added on certain types of plots.
+        if (this.graphie.dragPrompt != null) {
+            this.graphie.dragPrompt[0].style.display = "inline";
+        }
+    };
+
+    _maybeHideDragPrompt: () => void = () => {
+        // The drag prompt is only added on certain types of plots.
+        if (this.graphie.dragPrompt != null) {
+            this.graphie.dragPrompt[0].style.display = "none";
+        }
+    };
+
+    setupBar: ($FlowFixMe) => number = (args) => {
+        const isMobile = this.props.apiOptions.isMobile;
+
+        const i = args.index;
+        const startHeight = args.startHeight;
+        const config = args.config;
+        const isHistogram = args.isHistogram;
+
+        const self = this;
+        const graphie = self.graphie;
+        const barHalfWidth = config.barWidth / 2;
+        let x;
+        if (isHistogram) {
+            x = 0.5 + i * config.barWidth + barHalfWidth;
+        } else {
+            x = (isMobile ? barHalfWidth : 0.5 + config.barPad) + i;
+        }
+
+        /**
+         * Updates the bar with given index to the given height
+         * @param i the index of the bar to update
+         * @param height the new height of the bar
+         */
+        const scaleBar = function (i, height) {
+            const center = graphie.scalePoint(0);
+
+            // Scale filled bucket (bar)
+            config.graph.bars[i].scale(
+                1,
+                Math.max(isMobile ? 0.2 : 0.01, height / config.scaleY),
+                center[0],
+                center[1],
+            );
+
+            if (isHistogram) {
+                // Scale dividers between buckets
+                const leftDivider = config.graph.dividers[i - 1],
+                    rightDivider = config.graph.dividers[i];
+
+                if (leftDivider) {
+                    const divHeight = Math.min(
+                        self.state.values[i - 1],
+                        height,
+                    );
+                    leftDivider.scale(
+                        1,
+                        Math.max(0.01, divHeight / config.scaleY),
+                        center[0],
+                        center[1],
+                    );
+                }
+
+                if (rightDivider) {
+                    const divHeight = Math.min(
+                        self.state.values[i + 1],
+                        height,
+                    );
+                    rightDivider.scale(
+                        1,
+                        Math.max(0.01, divHeight / config.scaleY),
+                        center[0],
+                        center[1],
+                    );
+                }
+            }
+        };
+
+        graphie.style(
+            {
+                stroke: "none",
+                fill: isMobile ? KhanColors.BLUE_C : KhanColors.LIGHT_BLUE,
+                opacity: 1.0,
+            },
+            function () {
+                config.graph.bars[i] = graphie.path([
+                    [x - barHalfWidth, 0],
+                    [x - barHalfWidth, config.scaleY],
+                    [x + barHalfWidth, config.scaleY],
+                    [x + barHalfWidth, 0],
+                    [x - barHalfWidth, 0],
+                ]);
+            },
+        );
+
+        if (isHistogram) {
+            if (i > 0) {
+                // Don't draw a divider to the left of the first bucket
+                graphie.style(
+                    {
+                        stroke: "#000",
+                        strokeWidth: 1,
+                        opacity: 0.3,
+                    },
+                    function () {
+                        config.graph.dividers.push(
+                            graphie.path([
+                                [x - barHalfWidth, 0],
+                                [x - barHalfWidth, config.scaleY],
+                            ]),
+                        );
+                    },
+                );
+            }
+        }
+
+        if (isMobile) {
+            const snap = config.scaleY / self.props.snapsPerLine;
+            config.graph.lines[i] = Interactive2.addMaybeMobileMovablePoint(
+                this,
+                {
+                    coord: [x, startHeight],
+                    constraints: [
+                        (coord, prev, options) => {
+                            return [
+                                x,
+                                this._clampValue(
+                                    Math.round(coord[1] / snap) * snap,
+                                    0,
+                                    config.dimY,
+                                ),
+                            ];
+                        },
+                    ],
+                    onMoveStart: function () {
+                        config.graph.bars[i].attr({
+                            fill: KhanColors.INTERACTIVE,
+                        });
+                    },
+                    onMove: function () {
+                        const y = config.graph.lines[i].coord()[1];
+
+                        const values = _.clone(self.state.values);
+                        values[i] = y;
+                        self.setState({values: values});
+                        self.changeAndTrack({values: values});
+
+                        self._maybeHideDragPrompt();
+
+                        scaleBar(i, y);
+                    },
+                    onMoveEnd: function () {
+                        config.graph.bars[i].attr({
+                            fill: KhanColors.BLUE_C,
+                        });
+                    },
+                },
+            );
+
+            // We set the z-index to 1 here so that the hairlines cover up the
+            // points
+            config.graph.lines[i].state.visibleShape.wrapper.style.zIndex = "1";
+
+            self._maybeShowDragPrompt();
+        } else {
+            config.graph.lines[i] = graphie.addMovableLineSegment({
+                coordA: [x - barHalfWidth, startHeight],
+                coordZ: [x + barHalfWidth, startHeight],
+                snapY: config.scaleY / self.props.snapsPerLine,
+                constraints: {
+                    constrainX: true,
+                },
+                normalStyle: {
+                    stroke: KhanColors.INTERACTIVE,
+                    // Don't display graph handles in static mode
+                    "stroke-width": this.props.static ? 0 : 4,
+                },
+            });
+
+            config.graph.lines[i].onMove = function (dx, dy) {
+                let y = this.coordA[1];
+                if (y < 0 || y > config.dimY) {
+                    y = Math.min(Math.max(y, 0), config.dimY);
+                    this.coordA[1] = this.coordZ[1] = y;
+
+                    // Snap the line back into range.
+                    this.transform();
+                }
+
+                const values = _.clone(self.state.values);
+                values[i] = y;
+                self.setState({values: values});
+                self.changeAndTrack({values: values});
+
+                scaleBar(i, y);
+            };
+        }
+
+        scaleBar(i, startHeight);
+        return x;
+    };
+
+    /**
+     * Renders a segment of an interactive line to the plotter graph
+     * @param i the index of the point to render
+     * @param startHeight the initial height of the given point
+     * @param config the graph setup, such as scale and dimensions
+     */
+    setupLine: (number, number, $FlowFixMe) => number = (
+        i,
+        startHeight,
+        config,
+    ) => {
+        const isMobile = this.props.apiOptions.isMobile;
+
+        const self = this;
+        const c = config;
+        const graphie = self.graphie;
+        const x = i + (isMobile ? 0.4 : 1);
+
+        if (isMobile) {
+            const snap = config.scaleY / self.props.snapsPerLine;
+            c.graph.points[i] = Interactive2.addMaybeMobileMovablePoint(this, {
+                coord: [x, startHeight],
+                constraints: [
+                    (coord, prev, options) => {
+                        return [
+                            x,
+                            this._clampValue(
+                                Math.round(coord[1] / snap) * snap,
+                                0,
+                                config.dimY,
+                            ),
+                        ];
+                    },
+                ],
+                onMove: function () {
+                    const y = c.graph.points[i].coord()[1];
+
+                    const values = _.clone(self.state.values);
+                    values[i] = y;
+                    self.setState({values: values});
+                    self.changeAndTrack({values: values});
+
+                    self._maybeHideDragPrompt();
+                },
+            });
+
+            self._maybeShowDragPrompt();
+
+            if (i > 0) {
+                c.graph.lines[i] = Interactive2.addMovableLine(graphie, {
+                    points: [c.graph.points[i - 1], c.graph.points[i]],
+                    // $FlowFixMe[prop-missing]
+                    constraints: Interactive2.MovablePoint.constraints.fixed(),
+                    normalStyle: {
+                        stroke: KhanColors.BLUE_C,
+                        "stroke-width": 2,
+                    },
+                    highlightStyle: {
+                        stroke: KhanColors.BLUE_C,
+                        "stroke-width": 2,
+                    },
+                });
+            }
+        } else {
+            c.graph.points[i] = graphie.addMovablePoint({
+                coord: [x, startHeight],
+                constraints: {
+                    constrainX: true,
+                },
+                normalStyle: {
+                    fill: KhanColors.INTERACTIVE,
+                    stroke: KhanColors.INTERACTIVE,
+                },
+                snapY: c.scaleY / self.props.snapsPerLine,
+            });
+            c.graph.points[i].onMove = function (x, y) {
+                y = Math.min(Math.max(y, 0), c.dimY);
+                const values = _.clone(self.state.values);
+                values[i] = y;
+                self.setState({values: values});
+                self.changeAndTrack({values: values});
+                return [x, y];
+            };
+
+            if (i > 0) {
+                c.graph.lines[i] = graphie.addMovableLineSegment({
+                    pointA: c.graph.points[i - 1],
+                    pointZ: c.graph.points[i],
+                    constraints: {
+                        fixed: true,
+                    },
+                    normalStyle: {
+                        stroke: "#9ab8ed",
+                        "stroke-width": 2,
+                    },
+                });
+            }
+        }
+
+        return x;
+    };
+
+    setupDotplot: ($FlowFixMe, $FlowFixMe) => $FlowFixMe = (i, config) => {
+        const graphie = this.graphie;
+        const isMobile = this.props.apiOptions.isMobile;
+
+        return this.setupTiledPlot(i, isMobile ? 0.5 : 1, config, (x, y) => {
+            return graphie.ellipse(
+                [x, y],
+                [
+                    this.DOT_PLOT_POINT_SIZE() / graphie.scale[0],
+                    this.DOT_PLOT_POINT_SIZE() / graphie.scale[1],
+                ],
+                {
+                    fill: KhanColors.INTERACTIVE,
+                    stroke: KhanColors.INTERACTIVE,
+                },
+            );
+        });
+    };
+
+    setupPic: ($FlowFixMe, $FlowFixMe) => $FlowFixMe = (i, config) => {
+        const graphie = this.graphie;
+        return this.setupTiledPlot(i, 0, config, (x, y) => {
+            const scaledCenter = graphie.scalePoint([x, y]);
+            const size = this.props.picSize;
+            return graphie.raphael.image(
+                this.props.picUrl,
+                scaledCenter[0] - size / 2,
+                scaledCenter[1] - size / 2,
+                size,
+                size,
+            );
+        });
+    };
+
+    setupTiledPlot: (
+        $FlowFixMe,
+        $FlowFixMe,
+        $FlowFixMe,
+        $FlowFixMe,
+    ) => $FlowFixMe = (i, bottomMargin, config, createImage) => {
+        const self = this;
+        const c = config;
+        const graphie = self.graphie;
+        const pics = graphie.pics;
+        const dotTicks = graphie.dotTicks;
+        const x = i + 0.5 + c.picPad;
+
+        // In order to make sure that manipulating the graph doesn't cause
+        // dragging, we disable touch actions for the whole mouselayer.
+        // TODO(emily): Figure out a way to turn of touch actions for only the
+        // part of the widget that can be manipulated. Putting this style
+        // directly on the rects below doesn't work.
+        graphie.mouselayer.canvas.style.touchAction = "none";
+
+        pics[i] = [];
+        dotTicks[i] = [];
+        const n = Math.round(c.dimY / c.scaleY) + 1;
+        _(n).times(function (j) {
+            j -= 1;
+            const midY = (j + 0.5) * c.scaleY;
+            const leftX = x - c.picBoxWidth / 2;
+            const topY = midY + 0.5 * c.scaleY;
+            const coord = graphie.scalePoint([leftX, topY + bottomMargin]);
+            const mouseRect = graphie.mouselayer.rect(
+                coord[0],
+                coord[1],
+                c.picBoxWidthPx,
+                c.picBoxHeight,
+            );
+            $(mouseRect[0])
+                .css({fill: "#000", opacity: 0.0, cursor: "pointer"})
+                .on("vmousedown", function (e) {
+                    e.preventDefault();
+                    // $FlowFixMe[prop-missing]
+                    self.whichPicClicked = i;
+                    self.setPicHeight(i, topY);
+
+                    $(document).on("vmouseup.plotTile", function (e) {
+                        $(document).unbind(".plotTile");
+                    });
+
+                    $(document).on("vmousemove.plotTile", function (e) {
+                        e.preventDefault();
+
+                        // Reverse-engineer the initial calculation
+                        const yCoord = graphie.getMouseCoord(e)[1];
+                        const adjustedCoord = Math.floor(yCoord - bottomMargin);
+
+                        // Calculate top coord from j value, but don't let them
+                        // go below j = -1, which is equivalent to having '0'
+                        // on the dot plot (due to weird indexing).
+                        const newJ = Math.max(
+                            -1,
+                            Math.floor(adjustedCoord / c.scaleY),
+                        );
+                        const newMidY = (newJ + 0.5) * c.scaleY;
+                        // Constrain the max Y value to max displayable Y of the
+                        // plot.  Otherwise users can unintentionally select an
+                        // out-of-range value and not see that they have done so.
+                        const newTopY = Math.min(
+                            newMidY + 0.5 * c.scaleY,
+                            c.dimY,
+                        );
+                        // $FlowFixMe[prop-missing]
+                        self.setPicHeight(self.whichPicClicked, newTopY);
+                    });
+                });
+
+            if (j < 0) {
+                // Don't show a pic underneath the axis!
+                return;
+            }
+            pics[i][j] = createImage(x, midY + bottomMargin);
+            dotTicks[i][j] = graphie.ellipse(
+                [x, midY + bottomMargin],
+                [
+                    self.DOT_TICK_POINT_SIZE() / graphie.scale[0],
+                    self.DOT_TICK_POINT_SIZE() / graphie.scale[1],
+                ],
+                {
+                    fill: "#dee1e3",
+                    stroke: "#dee1e3",
+                },
+            );
+        });
+        return x;
+    };
+
+    setPicHeight: (number, number) => void = (i, y) => {
+        const values = _.clone(this.state.values);
+        values[i] = y;
+        this.drawPicHeights(values, this.state.values);
+        this.setState({values: values});
+        this.changeAndTrack({values: values});
+    };
+
+    changeAndTrack: ($FlowFixMe) => void = (data) => {
+        this.props.onChange(data);
+        this.props.trackInteraction();
+    };
+
+    drawPicHeights: ($FlowFixMe, $FlowFixMe) => void = (values, prevValues) => {
+        const self = this;
+        const graphie = self.graphie;
+        const pics = graphie.pics;
+
+        const isMobile = this.props.apiOptions.isMobile;
+
+        if (isMobile) {
+            const shouldDisplay = values.every((v) => v === 0);
+            graphie.dotPrompt[0].style.display = shouldDisplay
+                ? "inline"
+                : "none";
+        }
+
+        _.each(pics, function (ps, i) {
+            _.each(ps, function (pic, j) {
+                const y = (j + 1) * self.props.scaleY;
+                const show = y <= values[i];
+
+                if (self.props.type === DOTPLOT) {
+                    const wasShown = y <= prevValues[i];
+                    const wasJustShown = show && !wasShown;
+                    if (wasJustShown) {
+                        pic.animate(
+                            {
+                                "stroke-width": 8,
+                            },
+                            75,
+                            () =>
+                                pic.animate(
+                                    {
+                                        "stroke-width": 2,
+                                    },
+                                    75,
+                                ),
+                        );
+                    }
+                }
+                $(pic[0]).css({display: show ? "inline" : "none"});
+
+                graphie.dotTicks[i][j][0].style.display =
+                    show || !isMobile ? "none" : "inline";
+            });
+        });
+    };
+
+    getUserInput: () => $FlowFixMe = () => {
+        return this.state.values;
+    };
+
+    simpleValidate: ($FlowFixMe) => $FlowFixMe = (rubric) => {
+        // $FlowFixMe[prop-missing]
+        return Plotter.validate(this.getUserInput(), rubric);
+    };
+}
+
+_.extend(Plotter, {
+    validate: function (guess, rubric) {
+        if (deepEq(guess, rubric.starting)) {
+            return {
+                type: "invalid",
+                message: null,
+            };
+        }
+        return {
+            type: "points",
+            earned: deepEq(guess, rubric.correct) ? 1 : 0,
+            total: 1,
+            message: null,
+        };
+    },
+});
+
+// We don't need to change any of the original props for static mode
+const staticTransform = _.identity;
+
+export default ({
+    name: "plotter",
+    displayName: "Plotter",
+    widget: Plotter,
+    staticTransform: staticTransform,
+}: WidgetExports<typeof Plotter>);