Skip to main content
SimilarExport ZIP
100%

Assignment 2 Question 4

✓ Published0🌍 Public
MMichael Biancardi
Last edited Jul 21, 2023
Created on Jul 21, 2023
Forked from Activity 7 Task 5

A bubble chart maps video game genres by their average user and critic scores, with bubble size representing global sales in millions. Genres are color-coded via a scale inferred from the data, and hovering reveals a tooltip with the genre name. A legend shows reference sales values and a color key for genre identification. The visualization uses D3 v7 with SVG and CSS styling, employing scales like `d3.scaleLinear` and `d3.scaleOrdinal` with `d3.interpolateTurbo`, and includes animation through CSS transitions on opacity and stroke width.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 2 Question 2

This example displays a stacked bar chart comparing average user and critic video game ratings across twelve genres, based on data from a Kaggle dataset. It uses D3 v7 with an SVG rendering approach, leveraging `d3.stack()` to compose the two rating series per genre and `d3.scaleOrdinal` for color assignment. A custom tooltip, implemented with D3 event handlers, reveals exact scores on mouseover, while the chart includes labeled axes, a legend, and gridlines created via `d3.axisBottom`.

MMichael Biancardi
82% match
Loading thumbnail…

Activity6_Question4

This visualization uses a bubble chart to compare the proportions of movie ratings across different genres. A grid of circles, colored by genre using `d3.schemeSet2`, shows the share of titles in five rating categories (from "below 5.0" to "above 8.5"), with bubble size scaled by `d3.scaleLinear` to encode proportion values. Built with D3 v7, the SVG chart includes labeled axes, an ordinal color scale, and interactive tooltips that display the exact percentage when hovering over each circle. The data is structured as static arrays in JavaScript, rendered with animated transitions on hover.

JJayanth Reddy Sripathi
80% match
Loading thumbnail…

Activity6_Question4

This interactive bubble chart visualizes the relationship between video game review scores, average hours played, and copies sold. Each circle represents a game, positioned along the x-axis by review score and y-axis by play time, with circle size encoding sales volume. Color distinguishes game genre, and hovering reveals a tooltip with exact details. Built with D3.js, the visualization uses `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` for encoding, while `join('circle')` renders the animated bubbles. Data is loaded from a GitHub Gist CSV file, and the SVG output includes legends for size and genre.

Mmaneeshraja47@gmail.com
80% match
Loading thumbnail…

Q4

This bubble chart maps 12 best-selling video games by critic score on the x-axis and user score on the y-axis, with bubble area scaled to global sales (in millions) using d3.scaleSqrt. Each point is colored by genre. The chart uses d3.v7’s selection, scale, and append methods to build an SVG, with axis labels, a legend, and a hover tooltip for details. Data is a small custom set of well-known games.

Rragasrikakarla27@gmail.com
80% match
Loading thumbnail…

Activity6_Task4(Question 4)

This bubble chart visualizes the distribution of IMDb-style ratings across six movie genres, showing the proportion of titles in each rating range from "below 5.0" to "above 8.5". Each circle's size corresponds to the percentage value, with genres spaced along the x-axis and rating proportions on the y-axis. The visualization uses D3 v7 to load CSV data, apply square-root scaling via `d3.scaleSqrt`, and render SVG circles with interactive tooltips on mouseover. Animated transitions on tooltip opacity enhance user feedback when exploring the genre-rating relationships.

Gguruabhay294@gmail.com
79% match
Loading thumbnail…

Activity6_Question4

This visualization compares rating distributions across movie genres through a bubble chart, showing the percentage of films falling into five rating bands from "below 5.0" to "above 8.5" for categories like Documentary, Drama, and Action. Each genre's mid-range rating share (6.5-7.5) is mapped to both the vertical position and bubble radius, while color distinguishes genres. Built with d3.v7, the chart uses d3.scaleBand and d3.scaleLinear for axes, d3.scaleOrdinal for colors, and features CSS-driven hover effects with a custom tooltip displaying complete rating breakdowns for each genre. Data comes from a CSV file containing proportional ratings per genre.

Nneerajreddyaluka@gmail.com
79% match
Loading thumbnail…

Activity6_Question4

This visualization compares rating distributions across movie genres through a bubble chart, showing the percentage of films falling into five rating bands from "below 5.0" to "above 8.5" for categories like Documentary, Drama, and Action. Each genre's mid-range rating share (6.5-7.5) is mapped to both the vertical position and bubble radius, while color distinguishes genres. Built with d3.v7, the chart uses d3.scaleBand and d3.scaleLinear for axes, d3.scaleOrdinal for colors, and features CSS-driven hover effects with a custom tooltip displaying complete rating breakdowns for each genre. Data comes from a CSV file containing proportional ratings per genre.

Nneerajreddyaluka@gmail.com
79% match
Loading thumbnail…

Activity6_Task4_Question4

This bubble chart visualizes the relationship between two numeric values across ten movie genres, with each genre positioned by its value1 (x-axis) and value2 (y-axis) coordinates. Circular markers use a radius scale based on the larger of the two values, creating proportional bubble sizes. The visualization is rendered as an SVG using D3 v7, with the `d3.scaleLinear` API handling axis and radius mappings, and `d3.axisBottom` and `d3.axisLeft` generating the positional axes. Sample data is hardcoded within the JavaScript module.

SShasankreddyganta@my.unt.edu
79% match