Big dataset try-out scatterplot (with multiple functionalities)

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.

86% match

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.

85% match

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.

82% match

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.

80% match

Multi Plots_FirstStep

This scatterplot visualizes 200 sampled asylum cases, plotting wait time in days against the date each case entered the system. A dropdown menu filters the data by year, while a color legend categorizes points by decision code; hovering over legend items highlights the corresponding cases and fades others. The visualization uses React with D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `extent` to render SVG axes, circles, and interactive elements. Data comes from a CSV file loaded via `d3.csv`, and filtering is handled through custom year-grouped attributes.

GGeri D.

scatter

This example presents an animated scatterplot comparing two datasets loaded from separate JavaScript files. Green and red circles represent positive and negative y-values, transitioning between the datasets every three seconds. Built with D3 v4, the visualization uses `d3.scaleLinear` for axes and `d3.transition` to animate circle positions and radii. An SVG line marks the zero baseline, with axis updates handled by `d3.axisTop` and `d3.axisLeft`.

EEranM6

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

reusable scatter plot

This example demonstrates an automated, reusable scatter plot built with D3.js (v6.7.0) that loads a CSV from a GitHub gist and dynamically selects the first two numeric columns for the x- and y-axes. It uses `csv()`, `scaleLinear()`, `axisBottom()`, and `axisLeft()` to render axes, and `scaleOrdinal()` with `schemeCategory10` to color points by the first categorical column. The visualization includes symbols from D3’s `symbol()` API, a simple hover tooltip, and automatically rotates through additional numeric x-columns every three seconds using `setInterval()`, re-rendering the SVG and scaling.

Llohitsai62@gmail.com