Fork of Script Test

100%

Fork of Script Test

✓ Published0🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

This example displays a scatter plot of Amazon book data, plotting user ratings against review counts for a random subset of 50 books. The visualization uses D3 v7 to draw circles on an SVG, with axes labeled and scaled linearly. The code defines a reusable `scatterPlot` function that generates the chart, and it loads data from a remote CSV file before randomly sampling the dataset. The chart uses D3's axis generators and scale linear functions to map the data values to pixel coordinates.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

86% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot of study hours versus test scores, with seven data points plotted on a fixed 500×400 SVG canvas. The code uses D3 v7 to create linear scales for both axes, append circles with steelblue fill, and render axis ticks via `d3.axisBottom` and `d3.axisLeft`. It also adds text labels for both axes. The visualization is implemented as a plain JavaScript function called `scatterPlot(container, data)`, which appends the SVG dynamically, while the included React starter demonstrates D3 selection in a `useEffect` hook. The dataset is hardcoded inline.

SSanjayRamaSwamyAdla@my.unt.edu

80% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris dataset, cycling through different x-axis variables every two seconds. It uses a reusable chart module built with D3 v7, employing `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes and data points as SVG circles. The code also includes a D3 pie chart visualization of Amazon Books sales by author, using `d3.pie` and `d3.arc` with a `title` element for hover details. Both charts draw from external CSV data sources.

BBALAJI MANDAVA

79% match

Loading thumbnail…

Fork of Fork of Fork of Fork of React & D3 Starter

This example shows a reusable scatter plot of study hours versus exam scores, using a compact D3 v7 script embedded in an HTML page. It displays seven data points as steelblue circles on an SVG canvas, with linear scales mapping hours to x-positions and scores to y-positions, plus labeled axes. The code defines a `scatterPlot` function that appends an SVG, computes scales via `d3.scaleLinear`, draws axes with `d3.axisBottom` and `d3.axisLeft`, and binds data using `selectAll().data().enter()`. The repository also includes a separate React component (index.jsx) that uses `useRef` and `useEffect` to integrate D3 selections, though the plot itself runs standalone.

SSanjayRamaSwamyAdla@my.unt.edu

79% match

Loading thumbnail…

Fork of Reusable Scatter Plot

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.

Ppriyankachary1701@gmail.com

79% match

Loading thumbnail…

Fork of React & D3 Starter

This example shows a reusable scatter plot of monthly sales versus profit from a small CSV dataset. The chart renders as SVG circles on linear x- and y-axes, with labeled axes and a title. The code defines a `scatterPlot` function that takes data and scales as props, using `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` to draw the axes. Color is fixed to steelblue, and the plot is built within a React JSX file.

Ppvvaishnavi93@gmail.com

79% match

Loading thumbnail…

Fork of Fork of Fork of CS416 Project_2

This visualization displays Amazon Top 50 Bestselling Books data from 2009 to 2019, showing average user ratings and book prices as bar charts that can be filtered by year using buttons. A scatterplot maps book reviews, user ratings, and prices, with tooltips revealing book titles and authors on hover. The D3.js v6 code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for the bar charts, while circles are positioned with `d3.scaleLog` for reviews and styled with `d3.scaleLinear` color scales. Data loads from CSV files hosted on GitHub, and interactions include animated tooltips styled with CSS.

Mmz4987

79% match

Loading thumbnail…

Fork of Fork of Fork of CS416 Project_2

This example visualizes Amazon’s top 50 bestselling books from 2009–2019, offering two linked views: bar charts of average user ratings and book prices by year, plus a scatterplot for a selected year plotting reviews versus ratings with circle size encoding price. Users select a year via buttons, triggering an animated scatterplot update. The visualization uses D3.js v6 with SVG rendering, employing `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleLog` for axes, and a tooltip for interactive details. Data comes from a CSV hosted on GitHub.

Mmz4987

79% match