ice 7 scatter

100%

✓ Published1🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

This scatter plot visualizes global video game sales across years, with each circle representing a game and colored by genre. Hovering over a point reveals the game’s name via a tooltip. Built with Vega-Lite’s API (vl.markCircle), it encodes year and global sales on the x- and y-axes. The code uses vega-tooltip for interactivity, d3.csv to load the game sales dataset, and custom styling from a config file to adjust font sizes and axis colors.

AI-generated description

Using the vegalite API to create a scatter plot on global sales of video games with tool tips to display the name of the video game when hovered upon

MIT Licensed

Similar vizzes

Loading thumbnail…

ice 7 scatter

This scatter plot visualizes video game sales data, displaying each game as a circle positioned by sales volume and unit price, with color encoding the item category and a tooltip revealing the exact sale amount on hover. The visualization is built with the Vega-Lite API, using its `markCircle` and `encode` methods to map fields from the Iris dataset, and renders interactive tooltips through the vega-tooltip `Handler` class.

SSaiSree0122

93% match

Loading thumbnail…

ice 7 scatter

The visualization plots video game sales data from a CSV file, showing the relationship between sales figures and release year as animated scatter points. It cycles through different sales metrics—Global, NA, and EU—every two seconds using `setInterval`, updating the x-axis mapping via `scatterPlot()` from D3.js. The chart uses `scaleLinear` and `extent` for scales, with `axisLeft` and `axisBottom` for axes, rendered in SVG. Animated transitions between metrics reveal shifting sales distributions over time.

TTejamod

87% match

Loading thumbnail…

ice 7

This example visualizes video game sales data from a CSV file, showing a scatter plot where each circle represents a game’s release year against its platform. The visualization cycles through different dimensions—marks, year, and global sales—every five seconds, updating the x-axis mapping dynamically. Built with D3.js, it uses `scaleLinear` for axes and `axisLeft`/`axisBottom` for rendering. The reusable `scatterPlot` module follows the Towards Reusable Charts pattern, with SVG circles for marks and animated transitions driven by `setInterval`.

TTejamod

87% match

Loading thumbnail…

ICE-6 Scatter Plot 11554625

This scatter plot visualizes video game sales data from a CSV file, plotting North American sales on the x-axis against release year on the y-axis. Each circle represents a game, colored by genre using a custom `marker` function that maps genre names to specific colors (blue, yellow, or red). The visualization uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for rendering scales. The SVG rendering fills the full browser window with a heading and styled tick labels.

MManohar Kowthavarapu

83% match

Loading thumbnail…

ICE7- Scatter plot

This interactive scatter plot visualizes global sales data for PlayStation 4 games, with each circle representing a game positioned by release year and worldwide sales. The visualization uses vega-lite-api to build the chart and d3.csv to load data from a Gist-hosted CSV file derived from the UCI Machine Learning Repository’s Auto MPG dataset. Publishers are distinguished by color, and hovering reveals the game title via vega-tooltip. The chart encodes quantitative fields for year and global sales, with a custom color encoding for the categorical publisher field.

Aanushaanumula

82% match

Loading thumbnail…

Bonus ice scatter

This 3D scatter plot visualizes video game sales data, showing Global Sales on the x-axis, Year on the y-axis, and Regional Sales on the z-axis. Two traces distinguish North American and European sales as separate scatter point sets. The visualization uses Plotly’s `scatter3d` type within `Plotly.newPlot`, with data loaded via D3’s `d3.csv` from a GitHub-hosted CSV file. Axis titles and fonts are configured through the layout’s scene object, and marker styling includes adjustable sizes, colors, and opacity levels.

TTejamod

81% match

Loading thumbnail…

ice 7 Pie Chart

This example presents a pie chart of global video game sales, visualizing the market share of ten games as percentages of total sales. The chart uses SVG rendering with D3.js v5, fetching data from a CSV file via the `csv` function. It leverages `d3.pie` and `d3.arc` to generate segments, `scaleOrdinal` for color mapping, and custom text labels for percentages. A legend, added manually, lists game names alongside their sales figures in millions, with all values formatted using `d3.format`.

TTejamod

81% match

Loading thumbnail…

Video Game Sales

This visualization displays global video game sales from 1980 to the present, with each colored circle representing an individual game. The x-axis maps the release year while the y-axis shows global sales figures, and the color encodes the game's genre. The code uses the Vega-Lite API with a custom configuration to adjust axis labels and styling. The dataset is loaded from a CSV file hosted on GitHub using D3's `csv` method, and the visualization renders as an SVG using the `view.renderer` setting.

Ggeorgeeeee

80% match