Try-out scatterplot (with hover-over)

100%

Try-out scatterplot (with hover-over)

✓ Published1🌍 Public

Last edited Aug 25, 2026

Created on Aug 24, 2026

A dot plot visualizes the lifecycle of traffic fine cases, with each circle representing an event plotted along a time axis (x) and grouped by case identifier (y), while color encodes the activity type. Hovering over a circle displays a tooltip with the case name, activity, timestamp, and total case duration in days. The visualization uses D3 v5 with `scaleTime`, `scaleBand`, `scaleOrdinal`, and `schemeCategory10`, rendering events as SVG circles from CSV data.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Try-out scatterplot (with hover-over + sorting option)

This scatterplot visualizes event data from a fine-issuance process, with each circle’s vertical position mapping to a specific case and its horizontal position to the event’s timestamp. Users can sort cases by start time or duration via a dropdown menu. The D3 v5 code uses `scaleBand` for the y-axis, `scaleTime` for the x-axis, and `scaleOrdinal` with `schemeCategory10` for activity colors. Hovering over a circle reveals a tooltip with case details, and a sorting option reorders the y-axis.

Ffemke.pieters@uhasselt.be

88% match

Loading thumbnail…

Fork of Try-out scatterplot (with hover-over + sorting option + activity selection)

This dot plot visualizes the duration and timing of fine-related processes, with each case plotted on the y-axis and events shown as colored circles along a time-based x-axis. The D3.js visualization uses `d3.csv` to load data, `d3.scaleTime` and `d3.scaleBand` for axes, and `d3.scaleOrdinal` for activity-based coloring, while `d3.axisBottom` and `d3.axisLeft` render the scales. Interactive features allow sorting cases by start time or duration via a dropdown and highlighting specific activities, with mouse hover revealing details through a positioned tooltip. The rendered SVG includes animation support and is built with D3 v5.

Ffemke.pieters@uhasselt.be

84% match

Loading thumbnail…

Try-out scatterplot

This scatterplot visualizes fine-management event sequences over time. Each circle shows an event, positioned by its timestamp on the x-axis and its case identifier on the y-axis, while color encodes the activity type. The visualization uses D3 v5 to parse the CSV data, map timestamps with `scaleTime`, and ordinal categories with `scaleBand` and `scaleOrdinal`. Axis ticks are formatted with `timeFormat` and rendered as SVG elements within a defined margin.

Ffemke.pieters@uhasselt.be

82% match

Loading thumbnail…

Big dataset try-out scatterplot (with multiple functionalities)

This scatterplot visualizes the event timelines of multiple cases from a CSV dataset, mapping each event’s timestamp on the x-axis and its corresponding case on the y-axis. The visualization supports sorting cases by start time or duration via a dropdown menu, and users can highlight a specific activity, which changes the color of the event circles. Built with D3 v5, the code uses `d3.scaleTime`, `d3.scaleBand`, `d3.scaleOrdinal`, and `d3.axisBottom` to render the SVG, with hover tooltips and an animated color update for selected activities.

Ffemke.pieters@uhasselt.be

80% match

Loading thumbnail…

Traffic Data Scatter Plot

This scatter plot visualizes traffic data, showing the number of vehicles against the hour of day, with each point’s radius and color encoding the percentage of heavy vehicles. It loads CSV data from GitHub and renders circles in an SVG using D3 v6, employing `scaleLinear` for axes, `scaleSqrt` for circle sizing, and `scaleOrdinal` with `schemeCategory10` for color mapping. Axes are added via `axisLeft` and `axisBottom`.

JJayanthKumarkoni

72% match

Loading thumbnail…

SCATTER-PLOT

This example visualizes listening time versus songs played from a Spotify habits dataset, plotting each week as a circle where size reflects artists discovered and color indicates mood score. It uses D3.js’s `scaleLinear`, `scaleSequential`, `interpolateTurbo`, `axisLeft`, and `axisBottom` to construct the scatter plot. The data loads from a GitHub Gist CSV file, and the reusable `scatterPlot` module renders SVG circles with hover tooltips.

Cchandanamahesh0215@gmail.com

72% match

Loading thumbnail…

Reusable scatter plot with different symbols

A scatter plot visualizes the relationship between income and time spent surfing, with each circle representing a data point. Hovering over a dot reveals a tooltip displaying exact values. The visualization uses D3.js v7 to load CSV data, create linear scales, and render SVG circles with axes. Mouseover transitions adjust the tooltip's opacity and display the relevant income and time-spent figures for each point.

BBhanuGadde@my.unt.edu

72% match

Loading thumbnail…

Scatter Plot with Clickable Circles

A scatter plot displays car model data with circles plotted according to continuous axes. The visualization uses D3 v7 with a unidirectional data flow pattern, where clicking any circle highlights it by changing its fill to white and adding a black stroke, while resetting all other circles to black fills without strokes. The rendering pipeline uses D3 selectors with `.join` operations to manage SVG circles, and the interaction is implemented through mouse click event listeners that update the selected state and trigger a re-render.

BBismark Kofi Owusu Sarfo

71% match