/residual-plot

Primary LanguageJavaScriptMIT LicenseMIT

residual-plot

Demo

Takes some data and a regression function, and plots either a scatterplot with a line of best fit or a bar chart of the sorted residuals. Optionally, it can do a simple linear regression for you.

API Reference

# window.residualPlot() <>

Returns a new residualPlot instance.

# residualPlot.regressionFunction([regression])

If regression is specified, uses regression to find the line of best fit for the data. regression should be a unary function mapping from domain x-values to domain y-values.

If regression is not specified, returns the regression function currently in use. Note that this will return undefined if the plot generates a regression function automatically. It will only return a function that has been manually set.

# residualPlot.residualMode([residualMode])

If residualMode is specified, sets the current mode of the chart. True means the plot will show the residuals in a bar chart format, false means the plot will show the raw data in a scatterplot format with a line of best fit.

If residualMode is not specified, returns a boolean signifying whether the plot is currently in residual mode.

# residualPlot(selection)

Draws the residual plot inside each item of selection with the data bound to that item. The data bound should be an array of objects.

Encodings

The x and y calls are not always needed, because they have defaults. If not set, the plot will look for an x property and a y property on the data.

Likewise, if no identity function is passed to the plot, it will use index within the data array for identification.

# residualPlot.x([x])

If x is a constant, sets the x-value (independent variable) of all data points to x.

If x is a function, calls x with the current datum and the index (in that order) for each element. The return value of x is used as the x-value.

If x is not specified, returns the constant or function currently determining the x-value.

# residualPlot.y([y])

If y is a constant, sets the y-value (dependent variable) of all data points to y.

If y is a function, calls y with the current datum and the index (in that order) for each element. The return value of y is used as the y-value.

If y is not specified, returns the constant or function currently determining the y-value.

# residualPlot.id([idFunction])

If idFunction is specified, calls idFunction with the current datum and the index (in that order) for each element in order to determine the unique identity of each datum.

If idFunction is not specified, returns the identification function currently in use.

Axis Titles

Axis titles are set separately for the scatterplot and bar chart modes. This is because the axes represent different things in the two modes and it would be cumbersome to have to switch back and forth.

# residualPlot.scatterAxisTitleX([title])

If title is specified, sets the plot's x axis title while in scatterplot mode to title.

If title is not specified, returns the the scatterplot's current x axis title.

# residualPlot.scatterAxisTitleY([title])

If title is specified, sets the plot's y axis title while in scatterplot mode to title.

If title is not specified, returns the the scatterplot's current y axis title.

# residualPlot.barAxisTitleX([title])

If title is specified, sets the plot's x axis title while in bar chart mode to title.

If title is not specified, returns the the bar chart's current x axis title.

# residualPlot.barAxisTitleY([title])

If title is specified, sets the plot's y axis title while in bar chart mode to title.

If title is not specified, returns the the bar chart's current y axis title.

Hover

Two events, mouseover and mouseout, can be bound on the points. These are useful for hover effects and tooltips.

# residualPlot.pointOnMouseover([handler])

If handler is specified, sets the plot's handler for mouseovers on the points to handler.

If handler is not specified, returns plot's current handler for mouseovers on the points.

# residualPlot.pointOnMouseout([handler])

If handler is specified, sets the plot's handler for mouseouts on the points to handler.

If handler is not specified, returns plot's current handler for mouseouts on the points.

Styling

Note: While almost all the time, you'll want to call these with constants, all of them except barColorPositive and barColorNegative actually accept functions as well, because they are passed directly on to d3.attr. Use wisely.

Points

# residualPlot.pointOpacity([opacity])

If opacity is specified, sets the opacity of the points to opacity.

If opacity is not specified, returns plot's current point opacity.

# residualPlot.pointSize([radius])

If radius is specified, sets the radius of the points to radius.

If radius is not specified, returns plot's current point radius.

# residualPlot.pointColor([color])

If color is specified, sets the size of the points to color.

If color is not specified, returns plot's current point color.

Bars

# residualPlot.barOpacity([opacity])

If opacity is specified, sets the opacity of the bars to opacity.

If opacity is not specified, returns plot's current bar opacity.

# residualPlot.barColorPositive([color])

If color is specified, sets the color of the bars corresponding to positive residuals to color.

If color is not specified, returns plot's current bar color for positive residuals.

# residualPlot.barColorNegative([color])

If color is specified, sets the color of the bars corresponding to negative residuals to color.

If color is not specified, returns plot's current bar color for negative residuals.

Line

# residualPlot.lineOpacity([opacity])

If opacity is specified, sets the opacity of the line to opacity.

If opacity is not specified, returns plot's current line opacity.

# residualPlot.lineWidth([width])

If width is specified, sets the width (thickness) of the line to width.

If width is not specified, returns plot's current line width.

# residualPlot.lineColor([color])

If color is specified, sets the color of the line to color.

If color is not specified, returns plot's current line color.

Size and Margins

# residualPlot.width([width])

If width is specified, sets the plot's width to width pixels.

If width is not specified, returns plot's current width in pixels.

# residualPlot.height([height])

If height is specified, sets the plot's height to height pixels.

If height is not specified, returns plot's current height in pixels.

# residualPlot.marginTop([margin])

If margin is specified, sets the plot's top exterior margin (outside the drawing area) to margin pixels.

If margin is not specified, returns plot's current top exterior margin in pixels.

# residualPlot.marginRight([margin])

If margin is specified, sets the plot's right exterior margin (outside the drawing area) to margin pixels.

If margin is not specified, returns plot's current right exterior margin in pixels.

# residualPlot.marginBottom([margin])

If margin is specified, sets the plot's bottom exterior margin (outside the drawing area) to margin pixels.

If margin is not specified, returns plot's current bottom exterior margin in pixels.

# residualPlot.marginLeft([margin])

If margin is specified, sets the plot's left exterior margin (outside the drawing area) to margin pixels.

If margin is not specified, returns plot's current left exterior margin in pixels.

Padding

As in CSS, 'padding' here refers to space inside the chart. This applies only to the data points, not to axes. It's used to give the points a little breathing room.

Scatterplot Mode

# residualPlot.scatterPaddingTop([padding])

If padding is specified, sets the plot's top padding while in scatterplot mode to padding domain units (the same units as the data y-values).

If padding is not specified, returns the scatterplot's current top padding in domain units.

# residualPlot.scatterPaddingRight([padding])

If padding is specified, sets the plot's right padding while in scatterplot mode to padding domain units (the same units as the data y-values).

If padding is not specified, returns the scatterplot's current right padding in domain units.

# residualPlot.scatterPaddingBottom([padding])

If padding is specified, sets the plot's bottom padding while in scatterplot mode to padding domain units (the same units as the data y-values).

If padding is not specified, returns the scatterplot's current bottom padding in domain units.

# residualPlot.scatterPaddingLeft([padding])

If padding is specified, sets the plot's left padding while in scatterplot mode to padding domain units (the same units as the data y-values).

If padding is not specified, returns the scatterplot's current left padding in domain units.

Bar Chart Mode

# residualPlot.barPaddingTop([padding])

If padding is specified, sets the plot's top padding while in bar chart mode to padding domain units (the same units as the data y-values).

If padding is not specified, returns the bar chart's current top padding in domain units.

# residualPlot.barPaddingBottom([padding])

If padding is specified, sets the plot's bottom padding while in bar chart mode to padding domain units (the same units as the data y-values).

If padding is not specified, returns the bar chart's current bottom padding in domain units.

# residualPlot.barPaddingOuter([padding])

If padding is specified, sets the plot's left and right padding while in bar chart mode to padding number of bar widths. Because this uses d3.scaleBand(), which has a bug, this value must be less than or equal to 1.

If padding is not specified, returns the bar chart's current left and right padding in bar widths.

# residualPlot.barPaddingInner([padding])

If padding is specified, sets the plot's between-bar padding to padding number of bar widths.

If padding is not specified, returns plot's between-bar padding in bar widths.

Animation Timing

# residualPlot.scatterUpdateDuration([duration])

If duration is specified, sets the plot's update time while in scatterplot mode to duration number of milliseconds.

If duration is not specified, returns the scatterplot's current update time in milliseconds.

Transitioning Between Modes

When the plot switches modes, it does so one axis at a time. When switching from scatterplot to bar chart mode, the y axis adjusts before the points sort themselves horizontally. When switching from bar chart to scatterplot mode, the points return to their x positions before the y axis shifts.

# residualPlot.firstAxisUpdateDuration([duration])

If duration is specified, sets the plot's first axis to transition for duration number of milliseconds.

If duration is not specified, returns plot's current first axis transition time in milliseconds.

# residualPlot.secondAxisUpdateDuration([duration])

If duration is specified, sets the plot's second axis to transition for duration number of milliseconds, after the first axis transition has completed.

If duration is not specified, returns plot's current second axis transition time in milliseconds.

Added and Removed

# residualPlot.pointEnterDuration([duration])

If duration is specified, sets new points to fade in for duration number of milliseconds.

If duration is not specified, returns plot's current point entering transition time in milliseconds.

# residualPlot.pointExitDuration([duration])

If duration is specified, sets old points to fade out for duration number of milliseconds.

If duration is not specified, returns plot's current point exiting transition time in milliseconds.

# residualPlot.barEnterDuration([duration])

If duration is specified, sets new bars to "grow" in for duration number of milliseconds.

If duration is not specified, returns plot's current bar entering transition time in milliseconds.

# residualPlot.barExitDuration([duration])

If duration is specified, sets old bars to fade out for duration number of milliseconds.

If duration is not specified, returns plot's current bar exiting transition time in milliseconds.