Try-out scatterplot

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

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.

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.

82% match

Scatter Plot

This scatter plot visualizes the start times of various module codes, showing the distribution of class schedules across the day. It uses D3 v5 to load CSV data and render SVG circles, with linear scales mapping time and module code to x and y positions. The axes are generated with `axisBottom` and `axisLeft`, and the data comes from a local `proj.csv` file.

AAziz Jaffrey

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables from a CSV dataset, plotting each point with x and y coordinates. It uses D3 version 6 with an SVG rendering approach, employing `d3.scaleLinear` to map the data domains to pixel ranges and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded asynchronously via `d3.csv`, and circles are appended and joined to the data using `.join('circle')`. The plot is styled with a teal fill and includes axis labels for "Numbers" and "Amount."

Bbugfree55

Cchandanamahesh0215@gmail.com

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.

Scatter Plot

A scatter plot displays individual data points positioned by two numeric variables, with each point rendered as a small circle. The visualization uses D3.js v6 and is built with a simple SVG container. The code applies the `d3.scaleLinear` function to map x- and y-values to pixel coordinates, then appends `circle` elements to the chart area. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from an external CSV file using `d3.csv`, and the plot updates dynamically once the data is parsed.

JJames Huang