Skip to main content
100%

Brush & Zoom : ITS Learning Behavior

✓ Published0🌍 Public
ZZoeLeBlanc
Last edited Aug 16, 2018
Created on Jul 19, 2018

This interactive line chart visualizes student learning behavior from an intelligent tutoring system, plotting five metrics—MCAS scores, correctness, average time, attempts, and hints—against count bins of student activity. Built with D3 v4, it renders five color-coded SVG lines with a focus+context design: a main chart supports brush-and-zoom navigation, while a smaller reference chart below shows the full dataset. Users can scroll within the main graph to zoom, and a reference line tracks the visible region. The chart animates transitions during brushing and zooming, with hover tooltips for data inspection.

AI-generated description

The Visualization

This work is an exploration of the Brush and Zoom Feature using data from students solving math problems. Scroll within in the main graph to zoom in and out. You can keep track of your place within the graph by looking at the reference line below.

The Data Set

This data set that shows a summary of student behavior during mathematical problem solving within an intelligent tutoring system (ITS). The system records behavior such as time to solve each problem, number of attempts, number of hints shown, and correctness. This data set also has corresponding MCAS scores for each student (MCAS is a state-wide standardized mathematics test for students in Massachusetts).

Data Sources

To access original data from Feng, Heffernan, and Koedinger (2009) see here.

Code Sources

For brushing techniques, forked from <a href='http://bl.ocks.org/EfratVil/'>EfratVil</a>'s block: <a href='http://bl.ocks.org/EfratVil/92f894ac0ba265192411e73f633a3e2f'>Brush & Zoom line chart</a>

Original line graph inspired by <a href='http://bl.ocks.org/adry34160/'>adry34160</a>'s block: <a href='http://bl.ocks.org/adry34160/9f3c9a9ba4815ab202c7e555d92d7071'>2 - Multiple line graphs with labels</a>

forked from <a href='http://bl.ocks.org/thulse/'>thulse</a>'s block: <a href='http://bl.ocks.org/thulse/d8fcee859da6df728bfb887c373440cb'>Brush & Zoom : ITS Learning Behavior</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Brush & Zoom II

This example demonstrates brushing and zooming on a scatterplot of 900 points distributed in three clusters. Users can drag a rectangle to zoom into a region, and double-click to reset the view. The visualization uses D3 v4 with `d3.brush` for selection and `d3.scaleLinear` for coordinate mapping, while axis tick marks are generated via `d3.axisTop` and `d3.axisRight`. Transitions animate the zoom effect using SVG circles and axis updates.

ZZoeLeBlanc
76% match
Loading thumbnail…

D3: Unit Bar Chart with Brush and Zoom

This example demonstrates a unit bar chart of message counts over time, implemented with D3 v4 and rendered as SVG. The visualization includes two synchronized views: a main chart area displaying individual messages as circles positioned by date and daily message count, and a smaller context chart below. Users can brush on the context chart to select a time range, or scroll/zoom directly on the main chart to explore the data in detail. The data, loaded from a CSV file, shows message activity from 2013, with each circle representing a message and its vertical position indicating the number of messages sent that day. The chart also includes summary statistics that update based on the current brush/zoom selection. The axis labels and styling (orange circles with opacity) follow a clean, minimalist design. The example demonstrates linked brushing and zooming techniques in D3 v4, allowing for interactive exploration of temporal data.

EEdinDev
75% match
Loading thumbnail…

The Brush

A line chart displays randomly generated data points, with a transparent red brush overlay that highlights a selected data point and its corresponding value label. Dragging the brush across the chart triggers the highlighting, which animates smoothly. Built with D3 v3, the visualization uses SVG rendering, `d3.svg.brush()` for selection, and `d3.svg.axis()` for gridlines and ticks, with all data generated randomly in the browser.

11Cr18Ni9
74% match
Loading thumbnail…

ZoomInteractiveLineChart

This interactive line chart visualizes calcium measurement values over time for a single patient, using a smooth curve to connect data points from a CSV file. Users can zoom into the timeline using a brush gesture, which updates the x-axis domain and redisplays the data at the new scale. The chart includes a tooltip that appears on mouseover, showing the date and value at the cursor position, indicated by a red circle on the line. The visualization is built with D3 v5, using SVG rendering, scales for time and linear axes, a line generator with curve basis, and a brush for zoom interactions.

Ppplomith
74% match
Loading thumbnail…

Brush & Zoom line chart

This brush & zoom line chart visualizes hourly environmental data from CIMIS Station 125, plotting multiple meteorological variables such as air temperature, wind speed, and soil temperature over time. The main chart displays the selected time range as a series of colored lines, while a smaller context view beneath it shows the full time series. Users can brush over the context chart to define a focus window, and the main chart responds with a smooth zoom transition, allowing for detailed inspection of specific periods. The visualization, built with D3 v4 and rendered in SVG, uses a shared x-scale for both views, enabling intuitive linking between the overview and detail.

EEfratVil
74% match
Loading thumbnail…

Brushing

This example demonstrates brushing on a scatterplot of borehole data, plotting depth against time. Users drag a horizontal brush across the chart to zoom the x-axis into a selected date range, with circles and the axis smoothly transitioning over one second. The visualization uses D3 v4 APIs including `d3.brushX`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.transition` to update the view, while the data is loaded as CSV from an external URL. SVG rendering animates the filtered result.

SShane Carey
74% match
Loading thumbnail…

Bar Chart with Brushing

This interactive bar chart demonstrates how brushing can reconcile the trade-off between a zero baseline and emphasizing small differences. The visualization displays two horizontal bars comparing scores across groups, rendered as SVG rectangles using React components. A linked brushing interface, implemented with d3.brushX, allows users to select a region on the top chart, which then dynamically updates the bottom chart’s x-scale domain via d3.scaleLinear. The data originates from a CSV file loaded with d3.csv, and React’s useState hook manages the brush extent state for responsive zooming.

WWaseem Medhat
73% match
Loading thumbnail…

Brushing

This example demonstrates interactive brushing on a small scatter plot of weight and height data from a CSV file. Users drag a rectangular brush region to highlight data points, turning selected circles red and unselected ones blue. The visualization uses D3 v6 with an SVG rendering, a linear scale for both axes, and d3.brush to manage the selection. Points are positioned using transitions and axes are rendered with d3.axisLeft and d3.axisBottom.

DDasbach.EJ
73% match