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

100%

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

✓ Published1🌍 Public

Last edited Aug 25, 2026

Created on Aug 25, 2026

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

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.

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…

Try-out scatterplot (with hover-over)

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.

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

82% match

Loading thumbnail…

Fork of D3 Starter

This example displays a scatter plot comparing programming language performance on Project Euler problems, with user-selectable axes, filter options, and animated transitions. It loads CSV timing data and color mappings from GitHub repositories, then visualizes results as colored circles that animate to new positions when the dataset changes. The visualization uses a custom surrounding-layout system that automatically positions titles, subtitles, axes, and legends within an SVG canvas. Built with D3 v7, the code leverages `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleTime`, `d3.axisBottom`, `d3.axisLeft`, `d3.transition`, and dynamic menu-driven data selection through reusable chart components.

GGavin Sykes

77% match

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot uses D3 v6 to visualize the Iris Dataset, shifting points between axes selected from dropdown menus. Built with a reusable `scatterPlot` component, it employs `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` with a 1000-millisecond duration, plus a 10-millisecond stagger delay, to animate both circle positions and axis updates. Selections trigger D3's `dispatch` events, while `join` handles entering, updating, and exiting SVG `circle` elements.

TThaverman

76% match

Loading thumbnail…

Fork of IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot visualizes asylum case wait times versus case entry dates, colored by decision code, with a dropdown menu filtering by year. Built with React and D3 v5, it uses scaleTime and scaleLinear axes, scaleOrdinal for color encoding, and React state to manage selections. The visualization reads CSV data from a GitHub gist, implements hover interactions via the ColorLegend component, and dynamically adjusts the x-axis tick format between years and months based on the selected filter.

Eeourm20

75% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying study time and marks with animated transitions that cycle through different axes every five seconds. Users see the correlation between marks, study time, and number of courses as points reposition smoothly. Built with D3 v6, it uses scaleLinear, axisLeft, axisBottom, and a reusable chart factory pattern. SVG circles animate between states using JavaScript's setInterval, while the code imports utilities like csv and select for data loading and DOM manipulation.

NNaimisha-M

75% match