Fork of Reusable Scatter Plot

100%

Fork of Reusable Scatter Plot

✓ Published0🌍 Public

Last edited Oct 26, 2025

Created on Oct 26, 2025

This interactive scatter plot visualizes library book data, showing relationships between numeric attributes like borrow count, rating, pages, and year, with points colored by genre. Users can dynamically switch the X and Y axes via dropdown menus and adjust point radius with a slider control. The visualization is built using a reusable D3.js module with a closure-based API for configuring scales, axes, and accessors. It employs D3's `d3.csvParse` for data loading, `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeTableau10` for color encoding, and SVG rendering with hover tooltips.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable Scatter Plot

This scatter plot visualizes library books by pages and borrow count, with point size encoding rating and color encoding genre. The visualization is built using D3 v7, employing the reusable scatter-plot factory pattern similar to Bostock's approach. It uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for sizing, `d3.scaleOrdinal` with `d3.schemeTableau10` for colors, and `d3.axisBottom`/`d3.axisLeft` for ticks. Tooltips display title, pages, borrows, rating, and genre, while a legend maps genre colors. Data comes from `Library_book.csv`, loaded via a Gist URL.

Ppriyankachary1701@gmail.com

93% match

Loading thumbnail…

Fork of Reusable Scatter Plot

A reusable scatter plot displays library book data from a CSV file, plotting pages on the x-axis against borrow count on the y-axis, with circle size encoding rating and color encoding genre. The chart is built using a Bostock-style factory function that employs D3 v7 APIs including `d3.scaleLinear`, `d3.scaleSqrt`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.symbol`. A tooltip appears on mouseenter, showing the book title and all encoded values. SVG rendering includes an interactive legend for the genre categories.

Ppriyankachary1701@gmail.com

93% match

Loading thumbnail…

SCATTER PLOT

This scatter plot visualizes the relationship between a book's borrow count and its rating, with each point colored by genre. It displays the distribution of library books across these two quantitative variables. The visualization is built with D3 v7, using `d3.csv` to load data from a remote gist, `scaleLinear` for both axes, and `scaleOrdinal` with the Tableau10 scheme for genre colors. Points are rendered as SVG circles with tooltips, and a separate HTML legend is constructed by iterating over the unique genres.

Ppriyankachary1701@gmail.com

85% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable D3.js scatter plot that visualizes Amazon book data, plotting petal width against average rating. It uses the d3.csv function to load and parse the dataset, then employs d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render the axes and circles for each data point. The plot updates its x-axis and circle positions every two seconds by cycling through different numeric columns, driven by setInterval and the scatterPlot function’s configurable accessor methods. The visualization relies on D3 v7 (and v6 in package.json) with SVG rendering and animation.

BBALAJI MANDAVA

83% match

Loading thumbnail…

Fork of Reusable Scatter PLot

This interactive scatter plot visualizes JavaScript libraries by their GitHub stars and minified file size, with circle radius and color encoding additional data dimensions. Built with React and D3 v7, it uses `scaleSqrt` for proportional radii, `scaleSequential` with `interpolateCool` for color mapping, and renders SVG circles with tooltips. Data loads from a CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`, with margins configured for layout.

Sserebryanaya.n@gmail.com

83% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes daily metrics from a CSV file, letting users map any numeric column to the X, Y, and size channels and a categorical column to color. Built with D3 v7, the visualization uses `d3.zoom` for pan-and-zoom with scale extent bounds, `d3.scaleLinear` and `d3.scaleSqrt` for axes and point sizing, and `d3.scaleOrdinal` with the `schemeSet2` palette for coloring. Hovering a point triggers a tooltip with the row’s values, while the axis labels update dynamically based on selected column names. The chart resets to its original view when the user clicks the "Reset Zoom" button.

Mmaddulanagasanjana@gmail.com

83% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This gallery example demonstrates a reusable scatter plot showing the relationship between study hours and test scores across five data points. The visualization uses d3.scaleLinear to map data domains to pixel coordinates, with axisBottom and axisLeft generating the labeled x- and y-axes. Data points render as black circles via SVG path elements appended through the join pattern. The code separates the chart logic into a scatterPlot.js module, exposing chainable setter methods such as .width and .xValue for configuration. The index.js file initializes the visualization by importing necessary D3 functions and calling the plot on an SVG container with fixed dimensions.

Ggayathrisaxena23@gmail.com

82% match

Loading thumbnail…

Fork of Interactive Book Dataset

This visualization presents a dual-chart view of a GoodReads book dataset. The left panel is a scatterplot of average rating versus page count, with each book as a point. The right panel is a horizontal bar chart displaying the top 10 most popular publishers, with bars sorted by the number of books published and positioned along the average rating axis. Hovering over any data point or bar highlights all books sharing that publisher’s identity across both charts, while a dropdown menu adjusts circle opacity. The implementation uses D3.js v6, including scales for linear and band layouts, SVG circle and rect elements, and mouse event listeners.

FFremont

82% match