Skip to main content
SimilarExport ZIP
100%

Activity6_Task4_Question

✓ Published0🌍 Public
VVarshith Peddineni
Last edited Oct 23, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

This example shows a bubble chart of badminton tournaments, plotting total prize money on the x-axis against the number of players on the y-axis, with bubble size encoding tournament popularity and color encoding location. It renders as an SVG using d3.csv to load the tournament data and d3.scaleLinear, d3.scaleSqrt, and d3.scaleOrdinal to create the axes, bubble radii, and color mapping. The chart includes rotated x-axis labels, axis titles, and a custom legend listing each tournament with its corresponding location and color.

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…

Activity6Task-4

A bubble chart displays three quantitative variables from a CSV dataset, mapping x and y coordinates to axes and a third size column to circle radius. The D3.js v7 code creates an SVG container with linear scales for position and size, then renders semi-transparent circles using data-bound enter selections. Axes are added via d3.axisBottom and d3.axisLeft, with labels for the X and Y axes, producing a straightforward scatterplot-style visualization with bubble sizing.

HHanuReddy
79% match
Loading thumbnail…

Activity-6 Q.4.1

This bubble chart visualizes the relationship between sports' popularity, participation, and revenue, where each circle represents a sport, with its x-position mapped to participation and y-position to popularity, while the circle radius encodes revenue. The color distinguishes each sport. Built with D3 v6, the visualization uses `d3.scaleLinear` for axis and radius scaling, `d3.scaleOrdinal` with `schemeCategory10` for colors, and SVG circles. Interactive tooltips appear on mouseover, displaying the sport's values. Axes, labels, and bottom/left axis ticks are generated via `d3.axisBottom` and `d3.axisLeft`.

Mmalampatiramya03@gmail.com
78% match
Loading thumbnail…

Activity 6 Task 4

This example shows a bubble chart that visualizes spatial data by mapping x and y coordinates to a scatterplot and a third size value to the radius of each circle. The chart loads CSV data from a GitHub repository using D3 v5’s `d3.csv` method, then renders the bubbles as SVG circles with a skyblue fill and semi-transparent opacity. It uses `d3.scaleLinear` for the x, y, and radius scales, and displays axes via `d3.axisBottom` and `d3.axisLeft`, with explicit axis labels. The SVG canvas is fixed at 800 by 600 pixels with defined margins.

Mmaheshchowdaryponnaganti@my.unt.edu
78% match
Loading thumbnail…

Activity6_ Question4

A bubble chart visualizes sales and profit by country, with bubble size encoding market share and color distinguishing each region. The SVG renders circles positioned by linear scales for the x and y axes, while a sqrt scale maps market share to radius. Data loads from a CSV file via `d3.csv`, with D3 v7 handling scales, axes, and the `d3.schemeCategory10` color scale. Labels display country names at each bubble's center, with axis titles for sales and profit.

Ggroup118sai@gmail.com
77% match
Loading thumbnail…

Activity6_Task4

This bubble chart example visualizes data from a CSV file, encoding two quantitative variables as plot positions and point sizes. The implementation uses the D3.js library’s scale functions and SVG circle elements. The code reads `bubblechart.csv` to load the underlying dataset, then maps rows to circles whose x/y coordinates and radii reflect measured values. The rendering relies on standard SVG coordinate attributes and D3’s data-binding methods. The interactive viewport is set up with a fixed width and height.

Kkeerthanachinthalapally@gmail.com
77% match
Loading thumbnail…

Q4

This bubble chart visualizes the relationship between sports participation, popularity, and revenue. Each sport from the loaded CSV file is represented as a circle, positioned by participation on the x-axis and popularity on the y-axis, with circle size reflecting revenue and color distinguishing sports. Built with D3.js v6, it uses `d3.scaleLinear` for axes and radius, `d3.scaleOrdinal` for colors, and `d3.axisBottom` and `d3.axisLeft` for axes. Hovering reveals a tooltip with the sport's exact values, rendered as SVG with animated transitions.

HHarshithakodakandla@my.unt.edu
77% match
Loading thumbnail…

Activity6_Question4

This animated bubble chart visualizes the relationship between runs scored, lifespan, and medals won for ten named players. Each circle’s x-position corresponds to runs, y-position to lifespan, while its radius encodes medals won and its color identifies the player. Built with D3 v7, the chart reads from a local CSV and renders as SVG, featuring interactive tooltips on hover that display the player’s exact stats. A categorical color legend maps each player to a distinct hue, and all axes are labeled with linear scales.

Rrishithagovini99@gmail.com
76% match
Loading thumbnail…

Task6_Q4

This interactive bubble chart visualizes the relationship between an athlete's age, points scored, and the number of gold medals they have won. Each circle's position on the x- and y-axes corresponds to points and age, while its radius encodes medal count, and its color identifies the individual athlete. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble size, and `d3.scaleOrdinal` with the `schemeCategory10` palette for coloring. Hovering over a bubble triggers a tooltip showing detailed data for that athlete, and a legend maps colors to names. The data is loaded from a local CSV file.

Ssaiteja.cse.rymec@gmail.com
76% match