Interactive Color Legend for game publishers

100%

Interactive Color Legend for game publishers

✓ Published1🌍 Public

Last edited Nov 8, 2020

Created on Oct 14, 2020

A scatter plot maps global video game sales against release year, with each point colored by publisher. An interactive color legend on the right highlights a selected publisher by dimming all other points, while the legend itself fades in sync. Built with React and D3 v5, it uses SVG circles for marks, `scaleOrdinal` for color mapping, and a custom `ColorLegend` component with mouse events to toggle the hover state. Data comes from a CSV of videogame sales loaded via `d3.csv`.

AI-generated description

A scatter plot of Videogames sales dataset. Here, the global sale is plotted against the year sold with an interactive legend showing which publisher the game belongs to. We can observe some interesting trends.

MIT Licensed

Similar vizzes

Loading thumbnail…

A Scatter Plot

This scatter plot visualizes video game sales across regions, showing each game’s release year on the x-axis and its sales figures on the y-axis, with points colored by genre. A dropdown menu lets viewers switch between regional and global sales attributes. The visualization uses React with D3 v6 scales (`scaleTime`, `scaleLinear`, `scaleOrdinal`) and SVG rendering. Hovering over the color legend filters the displayed points by genre, while a native SVG `<title>` element provides tooltips on each circle. Data comes from a Kaggle dataset of video game sales.

RRED98310

82% 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

80% 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

80% match

Loading thumbnail…

A6 Seqeuntial Color Scale

This dot plot visualizes metric sales of video game publishers from 2003–2010 using a sequential color scale. The chart encodes each publisher’s total sales with bar height and a color gradient from light to dark via `d3.scaleSequential` and `interpolateRdPu`. Built with D3 v7, it renders SVG bars, axes with `d3.axisBottom` and `d3.axisLeft`, and includes a legend using the d3-legend library. The data, sourced from the CORGIS video games dataset, is loaded from `games.csv` with numeric sales values processed before scaling.

AAllen Jake Polintan

79% match

Loading thumbnail…

scatter-plot

This scatter plot visualizes video game sales, comparing NA_Sales on the x-axis against EU_Sales on the y-axis, with each circle’s color representing a different game publisher or developer. The visualization uses d3.csv to load the dataset, d3.scaleLinear to map data values to pixel coordinates, and d3.axisLeft and d3.axisBottom to render the axes. Circles are drawn as SVG elements within a React framework, with their fill color determined by a switch statement that assigns distinct colors to known studios and a default brown for others. The chart also includes axis labels for the variables plotted.

SSheela2930

79% 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

78% match

Loading thumbnail…

All of the Video Games

A force-directed bubble chart maps every video game publisher to a circle scaled by its number of titles, with each bubble colored by publisher and labeled by name. Clicking a publisher zoomes into its timeline, revealing individual game titles as small rectangles arranged by release year and platform. The visualization is built with React, D3’s `d3.layout.pack` and `d3.behavior.zoom`, and renders SVG with animated transitions. Data comes from a JSON file listing games, publishers, platforms, and years.

663anp3ca

78% match

Loading thumbnail…

SPAC Interactive Color Legend

This interactive scatterplot displays CSS named colors as a radial burst, with a color legend that highlights matching data points on hover. The visualization uses D3 utilities for data loading and scales (scaleLinear, scaleOrdinal, extent, max), while React components render the SVG marks, axes, and interactive legend. Users can select different attributes from dropdown menus to change the x and y axes, and hovering over a legend item fades non-matching points to 30% opacity. The data comes from a CSV file loaded asynchronously via D3’s csv function.

Ppnlinyz

77% match