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

100%

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

✓ Published1🌍 Public

Last edited Aug 25, 2026

Created on Aug 25, 2026

Forked from Try-out scatterplot (with hover-over)

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

88% 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

86% 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

86% match

Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

This example combines a scatter plot with a circular packing layout to visualize a hierarchical dataset of sound files, where each parent node represents a sound category and its children are individual audio layers. The visualization uses D3 v5 to render an SVG, with circles positioned according to normalized x/y coordinates from the data. Hovering highlights circles in red with reduced opacity, while a set of timer controls and a sound selection dropdown provide interactive utility features. The code leverages D3’s scales for coordinate mapping and jQuery for DOM manipulation.

Oocean1225

74% match

Loading thumbnail…

IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot visualizes a sample of 200 defensive asylum cases, plotting wait times in days against the date cases entered the system. A dropdown menu filters data by year, and hovering over the color legend highlights points by decision code. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and coloring. The SVG visualization includes custom React components for axes, marks, and an interactive color legend that adjusts opacity on hover.

Nnouralkhoury

74% match

Loading thumbnail…

D3: Scatterplot!

This interactive scatterplot displays 50 random data points on Cartesian axes, with each circle colored blue or red depending on whether its x-coordinate falls in the left or right half of the plot. Clicking the “Randomize” button generates a fresh dataset and smoothly animates the points, axes, and color updates over two seconds. The visualization is built with D3 3.5.5, using the `d3.scale.linear`, `d3.svg.axis`, and `transition().duration(2000)` APIs, and renders entirely as SVG. The code derives from Scott Murray’s examples, forked from earlier gists by anonymous and jalapic.

MMissHanJ

73% match

Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

This example visualizes a hierarchical dataset of sound files as an animated scatterplot and circle packing diagram using D3 v5. Root nodes represent audio categories positioned by their `scatX` and `scatY` coordinates, while child nodes appear as packed circles sized by their `value`. The layout is rendered as an SVG, with interactive hover effects that change circle colors. Additionally, the visualization includes a timer, audio playback controls, and a file selector, demonstrating integration of multiple JavaScript libraries alongside D3's selection and scale APIs.

Oocean1225

73% match