diff --git a/src/components/InlineHint/index.tsx b/src/components/InlineHint/index.tsx
new file mode 100644
index 00000000..110cdc20
--- /dev/null
+++ b/src/components/InlineHint/index.tsx
@@ -0,0 +1,36 @@
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { Tooltip } from "antd";
+import React, { ReactElement, ReactNode, useRef } from "react";
+
+type InlineHintProps = {
+    title?: ReactNode;
+};
+
+/** An icon that can be hovered or focused to show an informational tooltip. */
+export default function InlineHint(props: InlineHintProps): ReactElement {
+    const popupContainerRef = useRef<HTMLDivElement>(null);
+
+    return (
+        <div ref={popupContainerRef}>
+            <Tooltip
+                trigger={["focus", "hover"]}
+                title={props.title}
+                getPopupContainer={() => popupContainerRef.current ?? document.body}
+            >
+                <button
+                    style={{
+                        background: "none",
+                        border: "none",
+                        padding: 0,
+                        margin: 0,
+                        cursor: "help",
+                        color: "unset",
+                    }}
+                    aria-label="More information"
+                >
+                    <InfoCircleOutlined></InfoCircleOutlined>
+                </button>
+            </Tooltip>
+        </div>
+    );
+}
diff --git a/src/components/LabeledSlider/index.tsx b/src/components/LabeledSlider/index.tsx
index 07a20ec6..2df7d7f9 100644
--- a/src/components/LabeledSlider/index.tsx
+++ b/src/components/LabeledSlider/index.tsx
@@ -1,10 +1,10 @@
 import { InputNumber, Row } from "antd";
 import Slider, { SliderSingleProps } from "antd/es/slider";
-import React, { ReactElement, useEffect, useState } from "react";
+import React, { ReactElement, ReactNode, useEffect, useId, useState } from "react";
 
 type LabeledSliderProps = {
     sliderProps: SliderSingleProps;
-    label: string;
+    label: string | ReactNode;
     labelWidth?: string;
     id?: string;
     inputMax?: number;
@@ -25,7 +25,8 @@ export default function LabeledSlider(props: LabeledSliderProps): ReactElement {
         }
     };
 
-    const inputId = props.id || `labeled-slider-${props.label.toLowerCase().replace(/\s+/g, "-")}`;
+    const generatedId = useId();
+    const inputId = props.id || `labeled-slider-${generatedId}`;
 
     useEffect(() => {
         setInputValue(props.sliderProps.value);
@@ -43,7 +44,10 @@ export default function LabeledSlider(props: LabeledSliderProps): ReactElement {
             }}
             wrap={false}
         >
-            <label htmlFor={inputId} style={{ width: props.labelWidth }}>
+            <label
+                htmlFor={inputId}
+                style={{ width: props.labelWidth, flexBasis: props.labelWidth, flexShrink: 0 }}
+            >
                 {props.label}
             </label>
 
@@ -61,7 +65,7 @@ export default function LabeledSlider(props: LabeledSliderProps): ReactElement {
                 onBlur={onConfirmInputValue}
             ></InputNumber>
 
-            <div style={{ width: "100%" }} ref={containerRef}>
+            <div style={{ width: "100%", flexGrow: 1, flexShrink: 1 }} ref={containerRef}>
                 <Slider
                     {...props.sliderProps}
                     tooltip={{
diff --git a/src/components/PlotLineSettings/index.tsx b/src/components/PlotLineSettings/index.tsx
new file mode 100644
index 00000000..16491138
--- /dev/null
+++ b/src/components/PlotLineSettings/index.tsx
@@ -0,0 +1,134 @@
+import React, { ReactElement } from "react";
+import { connect } from "react-redux";
+import { ActionCreator } from "redux";
+
+import {
+    SetLineAverageWindowAction,
+    SetLineDefaultColorAction,
+    SetLineWidthAction,
+} from "../../state/selection/types";
+import { State } from "../../state/types";
+import { useDebouncedSetter } from "../../hooks";
+import LabeledSlider from "../LabeledSlider";
+import {
+    getLineDefaultColor,
+    getLineMovingAverageWindow,
+    getLineWidth,
+} from "../../state/selection/selectors";
+import {
+    setConnectLineDefaultColor,
+    setConnectLineAverageWindow,
+    setConnectLineWidth,
+} from "../../state/selection/actions";
+import ResettableColorPicker from "../ResettableColorPicker";
+import { GENERAL_PLOT_SETTINGS, PALETTE } from "../../constants";
+import InlineHint from "../InlineHint";
+
+type PropsFromState = {
+    lineAverageWindow: number;
+    lineWidth: number;
+    lineDefaultColor: string;
+};
+
+type DispatchProps = {
+    handleSetLineAverageWindow: ActionCreator<SetLineAverageWindowAction>;
+    handleSetLineWidth: ActionCreator<SetLineWidthAction>;
+    handleSetLineDefaultColor: ActionCreator<SetLineDefaultColorAction>;
+};
+
+type PlotLineSettingsProps = PropsFromState &
+    DispatchProps & {
+        labelWidth?: string;
+    };
+
+const PlotLineSettings = (props: PlotLineSettingsProps): ReactElement => {
+    const [lineAverageWindow, setLineAverageWindow] = useDebouncedSetter(
+        props.lineAverageWindow,
+        props.handleSetLineAverageWindow
+    );
+    const [lineWidth, setLineWidth] = useDebouncedSetter(props.lineWidth, props.handleSetLineWidth);
+    const [lineDefaultColor, setLineDefaultColor] = useDebouncedSetter(
+        props.lineDefaultColor,
+        props.handleSetLineDefaultColor
+    );
+
+    return (
+        <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
+            <p style={{ fontWeight: 600, marginBottom: 0, color: PALETTE.white }}>Line settings</p>
+            <LabeledSlider
+                label={
+                    <div style={{ display: "flex", flexDirection: "row", gap: "6px" }}>
+                        Average window
+                        <InlineHint title="Total number of points to average over, including past and future." />
+                    </div>
+                }
+                id={"line-average-window-input"}
+                labelWidth={props.labelWidth}
+                sliderProps={{
+                    value: lineAverageWindow,
+                    onChange: setLineAverageWindow,
+                    min: 1,
+                    max: 31,
+                    step: 2,
+                }}
+                inputMin={1}
+                inputMax={101}
+            ></LabeledSlider>
+            <LabeledSlider
+                label="Line width"
+                labelWidth={props.labelWidth}
+                sliderProps={{
+                    value: lineWidth,
+                    onChange: setLineWidth,
+                    min: 0.1,
+                    max: 3.5,
+                    step: 0.1,
+                    marks: { 1.5: <></> },
+                    tooltip: {
+                        formatter: (value) => value?.toFixed(1),
+                    },
+                }}
+                inputMin={0}
+                inputMax={100}
+            ></LabeledSlider>
+            <div
+                style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "flex-start",
+                    marginTop: "4px",
+                }}
+            >
+                <label style={{ width: props.labelWidth }}>Default color</label>
+                <ResettableColorPicker
+                    value={lineDefaultColor}
+                    onChange={(color) => {
+                        setLineDefaultColor(color.toHexString());
+                    }}
+                    size="small"
+                    onReset={function (): void {
+                        setLineDefaultColor(GENERAL_PLOT_SETTINGS.connectionLineDefaultColor);
+                    }}
+                ></ResettableColorPicker>
+            </div>
+        </div>
+    );
+};
+
+function mapStateToProps(state: State): PropsFromState {
+    return {
+        lineAverageWindow: getLineMovingAverageWindow(state),
+        lineWidth: getLineWidth(state),
+        lineDefaultColor: getLineDefaultColor(state),
+    };
+}
+
+const dispatchToPropsMap: DispatchProps = {
+    handleSetLineAverageWindow: setConnectLineAverageWindow,
+    handleSetLineDefaultColor: setConnectLineDefaultColor,
+    handleSetLineWidth: setConnectLineWidth,
+};
+export default connect<PropsFromState, DispatchProps, unknown, State>(
+    mapStateToProps,
+    dispatchToPropsMap
+)(PlotLineSettings);
diff --git a/src/components/PlotSettings/index.tsx b/src/components/PlotSettings/index.tsx
index c57579c2..29131070 100644
--- a/src/components/PlotSettings/index.tsx
+++ b/src/components/PlotSettings/index.tsx
@@ -7,6 +7,7 @@ import { SetPointOpacityAction, SetPointRadiusAction } from "../../state/selecti
 import { State } from "../../state/types";
 import { useDebouncedSetter } from "../../hooks";
 import LabeledSlider from "../LabeledSlider";
+import PlotLineSettings from "../PlotLineSettings";
 
 type PropsFromState = {
     pointOpacity: number;
@@ -19,7 +20,8 @@ type DispatchProps = {
 };
 
 type PlotSettingsProps = PropsFromState & DispatchProps;
-const SETTINGS_LABEL_WIDTH = "110px";
+const SETTINGS_WIDTH = "280px";
+const SETTINGS_LABEL_WIDTH = "135px";
 
 const PlotSettings = (props: PlotSettingsProps): ReactElement => {
     const { pointOpacity, pointRadius, handleSetPointOpacity, handleSetPointRadius } = props;
@@ -28,7 +30,7 @@ const PlotSettings = (props: PlotSettingsProps): ReactElement => {
     const [radius, setRadius] = useDebouncedSetter(pointRadius, handleSetPointRadius);
 
     return (
-        <div style={{ display: "flex", flexDirection: "column", width: "250px" }}>
+        <div style={{ display: "flex", flexDirection: "column", width: SETTINGS_WIDTH }}>
             <LabeledSlider
                 label="Opacity"
                 labelWidth={SETTINGS_LABEL_WIDTH}
@@ -58,6 +60,7 @@ const PlotSettings = (props: PlotSettingsProps): ReactElement => {
                 inputMin={0}
                 inputMax={100}
             ></LabeledSlider>
+            <PlotLineSettings labelWidth={SETTINGS_LABEL_WIDTH} />
         </div>
     );
 };
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 857dc2e4..a07f9311 100755
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -64,7 +64,8 @@ export const GENERAL_PLOT_SETTINGS = {
     cellName: CELL_ID_KEY,
     chartParent: "ace-scatter-chart",
     circleRadius: 4,
-    connectionLineWidth: 1,
+    connectionLineWidth: 1.5,
+    connectionLineDefaultColor: BASE_PALETTE_COLORS.mediumDarkGray as string,
     histogramColor: BASE_PALETTE_COLORS.lightGray,
     legend: {
         font: {
diff --git a/src/containers/MainPlotContainer/selectors.ts b/src/containers/MainPlotContainer/selectors.ts
index 265daca3..6f11dcf3 100644
--- a/src/containers/MainPlotContainer/selectors.ts
+++ b/src/containers/MainPlotContainer/selectors.ts
@@ -43,6 +43,7 @@ import {
     getFilteredConnectByFeatureValues,
     getShowConnectLines,
     getFilteredConnectByCategoryValues,
+    getLineMovingAverageWindow,
 } from "../../state/selection/selectors";
 import { MainPlotSettings, SelectedPointData, TickConversion } from "../../state/selection/types";
 import {
@@ -56,6 +57,7 @@ import {
 import { findFeature } from "../../state/util";
 import { getGroupByTitle } from "../ColorByMenu/selectors";
 import { PlotlyAnnotation } from "../../components/MainPlot";
+import { getMovingAverage } from "../../util/math";
 
 export const handleNullValues = (
     inputXValues: (number | null)[],
@@ -179,6 +181,7 @@ export const getLinePlotData = createSelector(
         getFilteredConnectByCategoryValues,
         getFilteredConnectByFeatureValues,
         getShowConnectLines,
+        getLineMovingAverageWindow,
     ],
     calculateLinePlotData
 );
@@ -188,7 +191,8 @@ export function calculateLinePlotData(
     yValues: (number | null)[],
     connectByCategoryValues: (number | null)[],
     connectByFeatureValues: (number | null)[],
-    showConnectingLines: boolean
+    showConnectingLines: boolean,
+    movingAverageWindow: number
 ): LinePlotData[] | null {
     if (!showConnectingLines) {
         return null;
@@ -228,6 +232,14 @@ export function calculateLinePlotData(
         lineData.push({ x: x, y: y });
     }
 
+    // Apply moving average to each line
+    if (movingAverageWindow > 1) {
+        for (const line of lineData) {
+            line.y = getMovingAverage(line.y, movingAverageWindow, true);
+            line.x = getMovingAverage(line.x, movingAverageWindow, true);
+        }
+    }
+
     return lineData;
 }
 
@@ -381,7 +393,7 @@ function makeScatterPlotData(
 }
 
 // TODO: Add the ability to adjust the line settings via an additional selector
-function makeLinePlotTrace(data: LinePlotData): Partial<PlotData> {
+function makeLinePlotTrace(data: LinePlotData, settings: MainPlotSettings): Partial<PlotData> {
     return {
         type: "scattergl",
         mode: "lines",
@@ -390,8 +402,8 @@ function makeLinePlotTrace(data: LinePlotData): Partial<PlotData> {
         y: data.y,
         showlegend: false,
         line: {
-            width: GENERAL_PLOT_SETTINGS.connectionLineWidth,
-            color: PALETTE.mediumDarkGray,
+            width: settings.connectionLineWidth,
+            color: settings.connectionLineDefaultColor,
         },
     };
 }
@@ -472,19 +484,22 @@ export const getScatterPlotDataArray = createSelector(
     [composePlotlyData, getMainPlotSettings],
     (allPlotData, mainPlotSettings): Partial<PlotData>[] => {
         const { mainPlotData, selectedGroupPlotData } = allPlotData;
-        let data = [
+        let traces = [
             makeHistogramPlotX(mainPlotData.x),
             makeHistogramPlotY(mainPlotData.y),
             makeScatterPlotData(mainPlotData, mainPlotSettings),
         ];
         if (selectedGroupPlotData) {
-            data.push(makeScatterPlotData(selectedGroupPlotData, mainPlotSettings));
+            traces.push(makeScatterPlotData(selectedGroupPlotData, mainPlotSettings));
         }
         if (allPlotData.linePlotData) {
-            data = [...allPlotData.linePlotData.map(makeLinePlotTrace), ...data];
+            const lineTraces = allPlotData.linePlotData.map((line) =>
+                makeLinePlotTrace(line, mainPlotSettings)
+            );
+            traces = [...lineTraces, ...traces];
         }
 
-        return data;
+        return traces;
     }
 );
 
diff --git a/src/containers/MainPlotContainer/test/selectors.test.ts b/src/containers/MainPlotContainer/test/selectors.test.ts
index 88daa8e8..ec45ab18 100644
--- a/src/containers/MainPlotContainer/test/selectors.test.ts
+++ b/src/containers/MainPlotContainer/test/selectors.test.ts
@@ -316,12 +316,12 @@ describe("MainPlotContainer selectors", () => {
 
     describe("calculateLinePlotData", () => {
         it("handles empty data", () => {
-            const result = calculateLinePlotData([], [], [], [], true);
+            const result = calculateLinePlotData([], [], [], [], true, 1);
             expect(result).to.deep.equal([]);
         });
 
         it("returns null when connecting lines are disabled", () => {
-            const result = calculateLinePlotData([1, 2], [3, 4], [1, 1], [5, 6], false);
+            const result = calculateLinePlotData([1, 2], [3, 4], [1, 1], [5, 6], false, 1);
             expect(result).to.equal(null);
         });
 
@@ -335,7 +335,8 @@ describe("MainPlotContainer selectors", () => {
                 yValues,
                 connectByCategoryValues,
                 connectByFeatureValues,
-                true
+                true,
+                1
             );
             expect(result).to.deep.equal([
                 { x: [1, 2], y: [6, 7] },
@@ -354,9 +355,26 @@ describe("MainPlotContainer selectors", () => {
                 yValues,
                 connectByCategoryValues,
                 connectByFeatureValues,
-                true
+                true,
+                1
             );
             expect(result).to.deep.equal([{ x: [5, 4, 3, 2, 1], y: [5, 4, 3, 2, 1] }]);
         });
+
+        it("applies moving average to x and y values", () => {
+            const xValues = [10, 20, 30, 40, 50];
+            const yValues = [10, 20, 30, 40, 50];
+            const connectByCategoryValues = [1, 1, 1, 1, 1];
+            const connectByFeatureValues = [1, 2, 3, 4, 5];
+            const result = calculateLinePlotData(
+                xValues,
+                yValues,
+                connectByCategoryValues,
+                connectByFeatureValues,
+                true,
+                3
+            );
+            expect(result).to.deep.equal([{ x: [15, 20, 30, 40, 45], y: [15, 20, 30, 40, 45] }]);
+        });
     });
 });
diff --git a/src/state/selection/actions.ts b/src/state/selection/actions.ts
index 004ef964..7ffcc726 100755
--- a/src/state/selection/actions.ts
+++ b/src/state/selection/actions.ts
@@ -33,6 +33,9 @@ import {
     CHANGE_CONNECT_BY_CATEGORY,
     CHANGE_CONNECT_BY_FEATURE,
     SET_SHOW_CONNECT_LINES,
+    SET_CONNECT_LINE_MOVING_AVERAGE_WINDOW,
+    SET_CONNECT_LINE_WIDTH,
+    SET_CONNECT_LINE_DEFAULT_COLOR,
 } from "./constants";
 import {
     BoolToggleAction,
@@ -58,6 +61,9 @@ import {
     SetColorOverrideAction,
     SetColorOverridesAction,
     SetCsvUrlAction,
+    SetLineAverageWindowAction,
+    SetLineDefaultColorAction,
+    SetLineWidthAction,
     SetPointOpacityAction,
     SetPointRadiusAction,
     SyncStateWithURLAction,
@@ -99,6 +105,27 @@ export function setShowConnectLines(payload: boolean): BoolToggleAction {
     };
 }
 
+export function setConnectLineAverageWindow(payload: number): SetLineAverageWindowAction {
+    return {
+        payload,
+        type: SET_CONNECT_LINE_MOVING_AVERAGE_WINDOW,
+    };
+}
+
+export function setConnectLineWidth(payload: number): SetLineWidthAction {
+    return {
+        payload,
+        type: SET_CONNECT_LINE_WIDTH,
+    };
+}
+
+export function setConnectLineDefaultColor(payload: string): SetLineDefaultColorAction {
+    return {
+        payload,
+        type: SET_CONNECT_LINE_DEFAULT_COLOR,
+    };
+}
+
 export function lassoOrBoxSelectGroup(
     key: string | number,
     payload: LassoOrBoxSelectPointData[]
diff --git a/src/state/selection/constants.ts b/src/state/selection/constants.ts
index b1688a5f..89716d36 100755
--- a/src/state/selection/constants.ts
+++ b/src/state/selection/constants.ts
@@ -9,6 +9,13 @@ export const CHANGE_GROUP_BY_CATEGORY = makeSelectionConstant("change-group-by-c
 export const CHANGE_CONNECT_BY_CATEGORY = makeSelectionConstant("change-connect-by-category");
 export const CHANGE_CONNECT_BY_FEATURE = makeSelectionConstant("change-connect-by-feature");
 export const SET_SHOW_CONNECT_LINES = makeSelectionConstant("set-show-connect-lines");
+export const SET_CONNECT_LINE_MOVING_AVERAGE_WINDOW = makeSelectionConstant(
+    "set-connect-line-moving-average-window"
+);
+export const SET_CONNECT_LINE_WIDTH = makeSelectionConstant("set-connect-line-width");
+export const SET_CONNECT_LINE_DEFAULT_COLOR = makeSelectionConstant(
+    "set-connect-line-default-color"
+);
 export const SELECT_GROUP_VIA_PLOT = makeSelectionConstant("select_group");
 export const DESELECT_POINT = makeSelectionConstant("deselect-point");
 export const SELECT_POINT = makeSelectionConstant("select-point");
diff --git a/src/state/selection/reducer.ts b/src/state/selection/reducer.ts
index a5cb36ef..cc0a58f8 100755
--- a/src/state/selection/reducer.ts
+++ b/src/state/selection/reducer.ts
@@ -2,7 +2,7 @@ import { filter, pickBy, uniqBy } from "lodash";
 import type { Action } from "redux";
 import type { SelectedGroups } from "..";
 
-import { CELL_ID_KEY } from "../../constants";
+import { CELL_ID_KEY, GENERAL_PLOT_SETTINGS } from "../../constants";
 import type { FileInfo } from "../metadata/types";
 import type { TypeToDescriptionMap } from "../types";
 import { makeReducer } from "../util";
@@ -40,6 +40,9 @@ import {
     CHANGE_CONNECT_BY_CATEGORY,
     CHANGE_CONNECT_BY_FEATURE,
     SET_SHOW_CONNECT_LINES,
+    SET_CONNECT_LINE_MOVING_AVERAGE_WINDOW,
+    SET_CONNECT_LINE_WIDTH,
+    SET_CONNECT_LINE_DEFAULT_COLOR,
 } from "./constants";
 import {
     BoolToggleAction,
@@ -65,6 +68,9 @@ import {
     SetColorOverrideAction,
     SetColorOverridesAction,
     SetCsvUrlAction,
+    SetLineAverageWindowAction,
+    SetLineDefaultColorAction,
+    SetLineWidthAction,
     SetPointOpacityAction,
     SetPointRadiusAction,
     SetShowConnectLines,
@@ -100,6 +106,9 @@ export const initialState: SelectionStateBranch = {
     pointRadius: 4,
     /** Opacity of points in the plot, in the [0, 1] range. */
     pointOpacity: 0.5,
+    connectLineMovingAverageWindow: 1,
+    connectLineWidth: GENERAL_PLOT_SETTINGS.connectionLineWidth,
+    connectLineDefaultColor: GENERAL_PLOT_SETTINGS.connectionLineDefaultColor,
     selectedAlbum: INITIAL_SELECTED_ALBUM_ID,
     selectedAlbumFileInfo: [] as FileInfo[],
     selectedGroupColors: {},
@@ -183,6 +192,48 @@ const actionToConfigMap: TypeToDescriptionMap = {
             showConnectLines: action.payload,
         }),
     },
+    [SET_CONNECT_LINE_MOVING_AVERAGE_WINDOW]: {
+        accepts: (action: Action): action is SetLineAverageWindowAction =>
+            action.type === SET_CONNECT_LINE_MOVING_AVERAGE_WINDOW,
+        perform: (
+            state: SelectionStateBranch,
+            action: SetLineAverageWindowAction
+        ): SelectionStateBranch => {
+            let windowSize = action.payload;
+            if (!Number.isFinite(windowSize) || windowSize < 1) {
+                return state;
+            }
+            // Round to next odd integer
+            windowSize = Math.round(windowSize);
+            const nextOddInteger = Math.floor(windowSize / 2) * 2 + 1;
+            return { ...state, connectLineMovingAverageWindow: nextOddInteger };
+        },
+    },
+    [SET_CONNECT_LINE_WIDTH]: {
+        accepts: (action: Action): action is SetLineWidthAction =>
+            action.type === SET_CONNECT_LINE_WIDTH,
+        perform: (
+            state: SelectionStateBranch,
+            action: SetLineWidthAction
+        ): SelectionStateBranch => {
+            const lineWidth = action.payload;
+            if (!Number.isFinite(lineWidth) || lineWidth < 0) {
+                return state;
+            }
+            return { ...state, connectLineWidth: lineWidth };
+        },
+    },
+    [SET_CONNECT_LINE_DEFAULT_COLOR]: {
+        accepts: (action: Action): action is SetLineDefaultColorAction =>
+            action.type === SET_CONNECT_LINE_DEFAULT_COLOR,
+        perform: (
+            state: SelectionStateBranch,
+            action: SetLineDefaultColorAction
+        ): SelectionStateBranch => ({
+            ...state,
+            connectLineDefaultColor: action.payload,
+        }),
+    },
     [OPEN_CELL_IN_3D]: {
         accepts: (action: Action): action is SelectPointAction => action.type === OPEN_CELL_IN_3D,
         perform: (state: SelectionStateBranch, action: SelectPointAction) => ({
diff --git a/src/state/selection/selectors.ts b/src/state/selection/selectors.ts
index 120dc51f..a7bae2e1 100755
--- a/src/state/selection/selectors.ts
+++ b/src/state/selection/selectors.ts
@@ -44,6 +44,11 @@ export const getGroupByCategory = (state: State): string => state.selection.grou
 export const getConnectByCategory = (state: State): string => state.selection.connectByCategory;
 export const getConnectByFeature = (state: State): string => state.selection.connectByFeature;
 export const getShowConnectLines = (state: State): boolean => state.selection.showConnectLines;
+export const getLineMovingAverageWindow = (state: State): number =>
+    state.selection.connectLineMovingAverageWindow;
+export const getLineWidth = (state: State): number => state.selection.connectLineWidth;
+export const getLineDefaultColor = (state: State): string =>
+    state.selection.connectLineDefaultColor;
 export const getClickedCellsFileInfo = (state: State): FileInfo[] => state.selection.selectedPoints;
 export const getSelectedGroups = (state: State): SelectedGroups => state.selection.selectedGroups;
 export const getColorBySelection = (state: State): keyof MappingOfMeasuredValuesArrays =>
@@ -256,12 +261,19 @@ export const getGroupingCategoryNamesAsArray = createSelector(
 );
 
 export const getMainPlotSettings = createSelector(
-    [getPointOpacity, getPointRadius],
-    (pointOpacity: number, pointRadius: number): MainPlotSettings => {
+    [getPointOpacity, getPointRadius, getLineDefaultColor, getLineWidth],
+    (
+        pointOpacity: number,
+        pointRadius: number,
+        lineDefaultColor: string,
+        lineWidth: number
+    ): MainPlotSettings => {
         return {
             ...GENERAL_PLOT_SETTINGS,
             circleRadius: pointRadius,
             unselectedCircleOpacity: pointOpacity,
+            connectionLineDefaultColor: lineDefaultColor,
+            connectionLineWidth: lineWidth,
         };
     }
 );
diff --git a/src/state/selection/types.ts b/src/state/selection/types.ts
index eaeb455c..23d97224 100755
--- a/src/state/selection/types.ts
+++ b/src/state/selection/types.ts
@@ -22,6 +22,9 @@ export interface SelectionStateBranch {
     connectByCategory: string;
     connectByFeature: string;
     showConnectLines: boolean;
+    connectLineMovingAverageWindow: number;
+    connectLineWidth: number;
+    connectLineDefaultColor: string;
     defaultColors: string[];
     colorOverrides: (string | undefined)[];
     pointRadius: number;
@@ -220,6 +223,21 @@ export interface SetColorOverridesAction {
     type: string;
 }
 
+export interface SetLineAverageWindowAction {
+    payload: number;
+    type: string;
+}
+
+export interface SetLineWidthAction {
+    payload: number;
+    type: string;
+}
+
+export interface SetLineDefaultColorAction {
+    payload: string;
+    type: string;
+}
+
 export interface SetPointRadiusAction {
     payload: number;
     type: string;
diff --git a/src/util/UrlState.ts b/src/util/UrlState.ts
index 28278de3..15b9060d 100644
--- a/src/util/UrlState.ts
+++ b/src/util/UrlState.ts
@@ -32,6 +32,9 @@ import {
     selectCellFor3DViewer,
     selectPoint,
     setColorOverrides,
+    setConnectLineDefaultColor,
+    setConnectLineAverageWindow,
+    setConnectLineWidth,
     setCsvUrl,
     setPointOpacity,
     setPointRadius,
@@ -51,6 +54,9 @@ export enum URLSearchParam {
     connectBy = "connectBy",
     connectByCategory = "connectByCategory",
     connectByFeature = "connectByFeature",
+    connectLineMovingAverageWindow = "lineWindow",
+    connectLineWidth = "lineWidth",
+    connectLineDefaultColor = "lineColor",
     selectedPoint = "selectedPoint",
     selectedAlbum = "selectedAlbum",
     galleryCollapsed = "galleryCollapsed",
@@ -205,6 +211,11 @@ export default class UrlState {
             changeConnectByCategory(String(connectByCategory)),
         [URLSearchParam.connectByFeature]: (connectByFeature) =>
             changeConnectByFeature(String(connectByFeature)),
+        [URLSearchParam.connectLineMovingAverageWindow]: (window) =>
+            setConnectLineAverageWindow(Number(window)),
+        [URLSearchParam.connectLineWidth]: (width) => setConnectLineWidth(Number(width)),
+        [URLSearchParam.connectLineDefaultColor]: (color) =>
+            setConnectLineDefaultColor(String(color)),
         [URLSearchParam.selectedAlbum]: (album) => selectAlbum(Number(album)),
         [URLSearchParam.selectedPoint]: (selection) => {
             if (Array.isArray(selection)) {
@@ -250,6 +261,21 @@ export default class UrlState {
         [URLSearchParam.connectByFeature]: (key) => ({
             connectByFeature: String(key),
         }),
+        [URLSearchParam.connectLineMovingAverageWindow]: (window) => {
+            if (!isFinite(Number(window))) {
+                return {};
+            }
+            return { connectLineMovingAverageWindow: Number(window) };
+        },
+        [URLSearchParam.connectLineWidth]: (width) => {
+            if (!isFinite(Number(width))) {
+                return {};
+            }
+            return { connectLineWidth: Number(width) };
+        },
+        [URLSearchParam.connectLineDefaultColor]: (color) => ({
+            connectLineDefaultColor: String(color),
+        }),
         [URLSearchParam.selectedAlbum]: (album) => ({ selectedAlbum: Number(album) }),
         [URLSearchParam.selectedPoint]: (selection) => ({
             initSelectedPoints: map(castArray(selection), String),
@@ -282,6 +308,15 @@ export default class UrlState {
         showConnectLines: (value) => ({ [URLSearchParam.connectBy]: String(value) }),
         connectByCategory: (value) => ({ [URLSearchParam.connectByCategory]: String(value) }),
         connectByFeature: (value) => ({ [URLSearchParam.connectByFeature]: String(value) }),
+        connectLineMovingAverageWindow: (value) => ({
+            [URLSearchParam.connectLineMovingAverageWindow]: String(value),
+        }),
+        connectLineWidth: (value) => ({
+            [URLSearchParam.connectLineWidth]: String(value),
+        }),
+        connectLineDefaultColor: (value) => ({
+            [URLSearchParam.connectLineDefaultColor]: String(value),
+        }),
         colorOverrides: (value: (string | undefined)[]) => ({
             [URLSearchParam.colorOverrides]: UrlState.serializeColorOverridesParam(value),
         }),
diff --git a/src/util/math.ts b/src/util/math.ts
new file mode 100644
index 00000000..f91d3d81
--- /dev/null
+++ b/src/util/math.ts
@@ -0,0 +1,45 @@
+/**
+ * Returns the moving average for a list of values, using a specified window
+ * size.
+ * @param values A list of numeric values. Non-finite or null values will be
+ * ignored in the average calculation.
+ * @param windowSize The window size for the moving average. Rounds up to the
+ * nearest positive, odd integer.
+ * @param includeEnds Whether to calculate the average for values at the end of
+ * the list that do not have enough neighbors to fill the window size. If false,
+ * the returned list will have `Math.floor(windowSize / 2)` fewer values at the
+ * beginning and end.
+ */
+export function getMovingAverage(
+    values: (number | null)[] | Uint32Array | Float32Array,
+    windowSize: number,
+    includeEnds = false
+): number[] {
+    // Number of values forward and backwards to include in the average.
+    // For a window size of 7, the window offset will be 3.
+    const windowOffset = Math.max(0, Math.floor(windowSize / 2));
+    const ret: number[] = [];
+
+    const clampBounds = (value: number): number => Math.max(0, Math.min(value, values.length - 1));
+
+    const start = includeEnds ? 0 : windowOffset;
+    const end = includeEnds ? values.length : values.length - windowOffset;
+    for (let i = start; i < end; i++) {
+        let sum = 0;
+        let count = 0;
+        for (let j = clampBounds(i - windowOffset); j <= clampBounds(i + windowOffset); j++) {
+            const value = values[j];
+            if (value === null || !Number.isFinite(value)) {
+                continue;
+            }
+            sum += value;
+            count++;
+        }
+        if (count === 0) {
+            ret.push(NaN);
+        } else {
+            ret.push(sum / count);
+        }
+    }
+    return ret;
+}
diff --git a/src/util/test/UrlState.test.ts b/src/util/test/UrlState.test.ts
index bb361024..8b92e663 100644
--- a/src/util/test/UrlState.test.ts
+++ b/src/util/test/UrlState.test.ts
@@ -8,6 +8,9 @@ import {
     selectCellFor3DViewer,
     selectPoint,
     setColorOverrides,
+    setConnectLineDefaultColor,
+    setConnectLineAverageWindow,
+    setConnectLineWidth,
     setShowConnectLines,
 } from "../../state/selection/actions";
 
@@ -29,6 +32,9 @@ describe("UrlState utility class", () => {
                     [URLSearchParam.connectBy]: "false",
                     [URLSearchParam.connectByCategory]: "feature_a",
                     [URLSearchParam.connectByFeature]: "feature_b",
+                    [URLSearchParam.connectLineDefaultColor]: "#ff0000",
+                    [URLSearchParam.connectLineMovingAverageWindow]: "3",
+                    [URLSearchParam.connectLineWidth]: "2",
                 })
             ).to.deep.equal({
                 cellSelectedFor3D: "2",
@@ -40,6 +46,9 @@ describe("UrlState utility class", () => {
                 showConnectLines: false,
                 connectByCategory: "feature_a",
                 connectByFeature: "feature_b",
+                connectLineDefaultColor: "#ff0000",
+                connectLineMovingAverageWindow: 3,
+                connectLineWidth: 2,
             });
         });
 
@@ -131,10 +140,13 @@ describe("UrlState utility class", () => {
                     [URLSearchParam.connectBy]: "true",
                     [URLSearchParam.connectByCategory]: "feature_a",
                     [URLSearchParam.connectByFeature]: "feature_b",
+                    [URLSearchParam.connectLineDefaultColor]: "#ff00ff",
+                    [URLSearchParam.connectLineMovingAverageWindow]: "5",
+                    [URLSearchParam.connectLineWidth]: "1.5",
                 })
             )
                 .to.be.an("array")
-                .of.length(13)
+                .of.length(16)
                 .and.to.have.deep.members([
                     selectCellFor3DViewer({ id: "2" }),
                     changeAxis(X_AXIS_ID, "feature_x"),
@@ -149,6 +161,9 @@ describe("UrlState utility class", () => {
                     setShowConnectLines(true),
                     changeConnectByCategory("feature_a"),
                     changeConnectByFeature("feature_b"),
+                    setConnectLineDefaultColor("#ff00ff"),
+                    setConnectLineAverageWindow(5),
+                    setConnectLineWidth(1.5),
                 ]);
         });
 
@@ -181,6 +196,9 @@ describe("UrlState utility class", () => {
                 connectByCategory: "feature_a",
                 connectByFeature: "feature_b",
                 showConnectLines: true,
+                connectLineMovingAverageWindow: 3,
+                connectLineWidth: 2,
+                connectLineDefaultColor: "#ff00ff",
             };
             expect(UrlState.toUrlSearchParameterMap(selections)).to.deep.equal({
                 [URLSearchParam.cellSelectedFor3D]: "10",
@@ -192,6 +210,9 @@ describe("UrlState utility class", () => {
                 [URLSearchParam.connectBy]: "true",
                 [URLSearchParam.connectByCategory]: "feature_a",
                 [URLSearchParam.connectByFeature]: "feature_b",
+                [URLSearchParam.connectLineMovingAverageWindow]: "3",
+                [URLSearchParam.connectLineWidth]: "2",
+                [URLSearchParam.connectLineDefaultColor]: "#ff00ff",
             });
         });
 
diff --git a/src/util/test/math.test.ts b/src/util/test/math.test.ts
new file mode 100644
index 00000000..00166a4a
--- /dev/null
+++ b/src/util/test/math.test.ts
@@ -0,0 +1,82 @@
+import { describe, it, expect } from "vitest";
+
+import { getMovingAverage } from "../math";
+
+describe("getMovingAverage", () => {
+    it("handles window size of 0", () => {
+        const values = [1, 2, 3, 4, 5];
+        // Will round up to window size of 1
+        const result = getMovingAverage(values, 0, true);
+        expect(result).to.deep.equal([1, 2, 3, 4, 5]);
+    });
+
+    it("handles empty array", () => {
+        const values: number[] = [];
+        const result = getMovingAverage(values, 3, true);
+        expect(result).to.deep.equal([]);
+    });
+
+    it("handles window size of 1", () => {
+        const values = [1, 2, 3, 4, 5];
+        const result = getMovingAverage(values, 1, true);
+        expect(result).to.deep.equal([1, 2, 3, 4, 5]);
+    });
+
+    it("includes ends when window size is 1", () => {
+        const values = [1, 2, 3, 4, 5];
+        const result = getMovingAverage(values, 1, false);
+        expect(result).to.deep.equal([1, 2, 3, 4, 5]);
+    });
+
+    it("returns a rolling average for window size of 3", () => {
+        const values = [10, 20, 30, 40, 50];
+        const result = getMovingAverage(values, 3, false);
+        expect(result).to.deep.equal([20, 30, 40]);
+
+        const resultWithEnds = getMovingAverage(values, 3, true);
+        expect(resultWithEnds).to.deep.equal([15, 20, 30, 40, 45]);
+    });
+
+    it("returns a rolling average for window size of 5", () => {
+        const values = [10, 20, 30, 40, 50];
+        const result = getMovingAverage(values, 5, false);
+        expect(result).to.deep.equal([30]);
+
+        const resultWithEnds = getMovingAverage(values, 5, true);
+        expect(resultWithEnds).to.deep.equal([20, 25, 30, 35, 40]);
+    });
+
+    function approximatelyEqual(arr1: number[], arr2: number[], epsilon: number): boolean {
+        if (arr1.length !== arr2.length) {
+            return false;
+        }
+        return arr1.every((value, index) => Math.abs(value - arr2[index]) < epsilon);
+    }
+
+    it("handles float values", () => {
+        const values = [1.1, 2.2, 3.3, 4.4, 5.5];
+        const result = getMovingAverage(values, 3, false);
+        expect(approximatelyEqual(result, [2.2, 3.3, 4.4], 0.0001)).to.be.true;
+
+        const resultWithEnds = getMovingAverage(values, 3, true);
+        expect(approximatelyEqual(resultWithEnds, [1.65, 2.2, 3.3, 4.4, 4.95], 0.0001)).to.be.true;
+    });
+
+    it("skips NaN values", () => {
+        const values = [10, 20, NaN, 40, 50];
+        const result = getMovingAverage(values, 3, false);
+        expect(result).to.deep.equal([15, 30, 45]);
+    });
+
+    it("skips infinite values", () => {
+        const values = [10, 20, Infinity, 40, 50];
+        const result = getMovingAverage(values, 3, false);
+        expect(result).to.deep.equal([15, 30, 45]);
+    });
+
+    it("returns NaN when only non-finite values are within window", () => {
+        const values = [10, 20, NaN, NaN, NaN, Infinity];
+        const result = getMovingAverage(values, 3, true);
+        expect(result).to.deep.equal([15, 15, 20, NaN, NaN, NaN]);
+    });
+});