Skip to main content
SimilarExport ZIP
100%

jayasaiReusable D3 Scatter Plot

✓ Published0🌍 Public
JJayaSaiReddySantimalla@my.unt.edu
Last edited Mar 28, 2024
Created on Mar 28, 2024

This reusable scatter plot displays Sales versus Rating for a small videogame dataset, with points colored by game category using a categorical color scale. The chart is built as a configurable D3 module following the “Towards Reusable Charts” pattern, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeCategory10` for colors, and `d3.axisBottom`/`d3.axisLeft`. Data loads from a CSV file with `d3.csv`, and the plot applies margins, a fixed radius, and SVG circles within an HTML page.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Jayasai Scatter Plot

This example visualizes the relationship between video game sales and ratings, with each point colored by game category. It shows how different categories, such as Action and RPG, compare across the two metrics. The visualization is built using D3 v7 with SVG and animation, rendering circles positioned by linear scales for sales and rating. Hovering over a circle reveals a tooltip displaying the game's category, sales, and rating. The data comes from the videoGamesStats.csv file, and the scatter plot uses D3's `scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks, with interactive mouseover effects.

JJayaSaiReddySantimalla@my.unt.edu
86% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot maps video game sales across regions against critic ratings, with each point's shape and color encoding genre. The visualization cycles through different x-axis metrics—North American, European, and Japanese sales, then rating—every two seconds, dynamically updating the scales and axes. Built with D3 6.7.0, it leverages `scaleLinear`, `axisLeft`, and `axisBottom` for axes, while custom SVG paths create genre-based shapes for data points. The code loads CSV data from a remote URL and uses the `select` API to manage SVG rendering.

Ssatishnarne99@gmail.com
83% match
Loading thumbnail…

D3 Scatter Plot: vgsales.csv

This scatter plot visualizes video game sales data from the vgsales.csv dataset, plotting each game’s release year on the x-axis against its global sales on the y-axis. Rendered as an SVG using D3 v6, the code applies `d3.scaleLinear` for both axes and draws semi-transparent circles with a radius of 4. The data is loaded via `d3.csv`, and axes are generated with `d3.axisLeft` and `d3.axisBottom`, with tick formatting modified to prevent commas in the year labels.

DDaniel Ribaudo
79% match
Loading thumbnail…

jayasai area chart

This example visualizes video game sales across categories using an area chart, with sales figures plotted on the y-axis and categorical labels on the x-axis. The chart uses D3 v7 to create a smooth area path, with the area filled in steelblue to emphasize the distribution of sales values. The code demonstrates D3’s scaleLinear for both axes, an area generator to define the shape, and axis generators (axisBottom, axisLeft) with rotated tick labels for category readability. Sales data is embedded directly in the script, and the rendering is done in SVG, with margins and labels for clarity.

JJayaSaiReddySantimalla@my.unt.edu
79% match
Loading thumbnail…

D3 Scatter plot

This scatter plot visualizes the global sales of top-rated video games from 2016, with each game represented as a circular point. The data, loaded from a local CSV file, maps game names along the x-axis and their sales figures in millions along the y-axis. The visualization is built with D3 v6, using functions like `d3.scaleBand` and `d3.scaleLinear` to manage the axes, while `d3.select`, `d3.append`, and `d3.axisBottom` handle the SVG element creation and axis rendering. Each dot is positioned using the computed scales, and steelblue fill distinguishes the data points.

KKwasi Acquaye
78% match
Loading thumbnail…

D3 reusable scatter plot

This interactive scatter plot visualizes car sales data loaded from a CSV file, letting users select which columns drive the x and y positions, point size, and color. The reusable chart component, built with D3 v7, exposes getter-setters for its scales, axes, and tooltip formatter. It applies d3.scaleLinear, d3.scaleSqrt, and either d3.scaleSequential or d3.scaleOrdinal for encoding, while cleaning numeric values to handle currency, percentages, and parentheses. Rendering is SVG-based, with interactive hover tooltips.

Mmaddineni2112@gmail.com
78% match
Loading thumbnail…

Fork of Fork of scatter-plot

This visualization displays a scatter plot of game sales data, mapping North American sales on the x-axis and European sales on the y-axis. Each point’s color represents a different game publisher, and the circles are drawn with variable width and height properties derived from Japanese and global sales figures. The code loads CSV data via `d3.csv`, scales with `d3.scaleLinear`, and renders axes using `d3.axisLeft` and `d3.axisBottom`. The SVG is created with React and D3 v6, using a custom color mapping function for publisher categories.

Aajaysonu
77% match
Loading thumbnail…

Fork of scatter-plot

This scatter plot visualizes global video game sales data, comparing North American and European sales on the x- and y-axes while mapping Japanese and global sales to point radius dimensions. The visualization uses D3 v6’s `csv` loader, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` functions, rendering circles as SVG elements. Point colors are determined by the game’s publisher, with a custom `marker()` function that assigns distinct colors to specific developers like Ubisoft Montreal and Rockstar North, while defaulting to brown for others. The chart includes axis labels and a title, with styling applied via CSS.

Aajaysonu
77% match