Skip to main content
SimilarExport ZIP
100%

Activity6_Question4

✓ Published0🌍 Public
Aaparnachalumuri@gmail.com
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from HTML Starter

This interactive bubble chart visualizes the relationship between smartphone price, battery capacity, and average rating using data from a CSV file. The visualization uses D3 v7 to render SVG circles positioned by price and battery on x and y axes, with bubble size representing rating and color distinguishing phone models via an ordinal scale with interpolateTurbo. Hover interactions trigger tooltips displaying model details. A legend on the right maps bubble sizes to star ratings, while CSS styles enhance hover opacity for improved readability.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6 Q 4.9

This bubble chart compares smartphone brands across battery life (hours), screen size (inches), and charging speed (watts). Each circle’s x-position encodes battery life, y-position encodes screen size, and its area encodes charging speed, with colors distinguishing brands. The D3.js v7 code uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. Data comes from a hardcoded CSV-like array. A hover tooltip displays exact values for each smartphone model.

RRukmini Devi Y
85% match
Loading thumbnail…

Question4

This bubble chart visualizes smartphone performance by mapping battery life on the x-axis, RAM on the y-axis, and screen size to bubble radius, with colors distinguishing brands. Hovering over a circle reveals a tooltip showing brand, battery life, and RAM. The visualization uses d3.csv to load data, d3.scaleLinear for positioning and sizing, d3.scaleOrdinal with d3.schemeCategory10 for colors, and d3.axisBottom and d3.axisLeft for axes. Data is rendered as SVG circles with mouseover, mousemove, and mouseleave event handlers managing tooltip transitions.

Aaschowdary.shashi@gmail.com
85% match
Loading thumbnail…

Activity6_Question4

This example visualizes the correlation between battery life, processing power, and camera quality across smartphone makes. The chart uses a bubble plot with processing power on the x-axis, camera quality on the y-axis, and bubble size representing battery life, alongside a color scale for phone brands. It includes interactive tooltips on hover and a legend for both bubble size and brand colors. The code uses d3.csv to load data, d3.scaleLinear for axes and bubble radius, and d3.scaleOrdinal with d3.interpolateTurbo for color mapping.

Gganeshseeram5decem@gmail.com
84% match
Loading thumbnail…

Activity6_question4

This bubble chart visualizes mobile phone specifications, plotting processor speed on the x-axis, battery life on the y-axis, and RAM size as the bubble radius. It uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color mapping, and includes interactive tooltips for detailed data. The chart features an animated legend for RAM values and reads data from a local CSV file.

SShiva Sai Reddy
84% match
Loading thumbnail…

Activity-6-Question-4

This bubble chart visualizes the relationship between average battery life, RAM, and camera megapixels for various smartphone brands. Each circle represents a phone make, with its x-position mapped to horsepower and y-position to torque, while the circle’s radius encodes highway fuel efficiency. The code uses D3 v7 to load CSV data, create linear scales, and render SVG elements. Interactive tooltips display the brand name on mouseover, and a color scale distinguishes each manufacturer.

Nnaveen.dodda4321@gmail.com
84% match
Loading thumbnail…

Activity6_task4_question1

This bubble chart displays the relationship between performance score and user experience score for seven smartphone brands, with circle size encoding battery capacity. The visualization uses D3 v7 with SVG rendering, employing d3.scaleLinear for both axes, d3.scaleSqrt for bubble sizing, and d3.scaleOrdinal with d3.schemeTableau10 for color coding. Each brand is labeled directly on its corresponding bubble.

Vvemurisuchitha@gmail.com
84% match
Loading thumbnail…

activity6_Task-4

This interactive bubble chart, built with D3.js v7 and SVG animation, visualizes the correlation between processor speed (x-axis), battery capacity (y-axis), and camera resolution (bubble size) across 32 smartphone brands from a CSV file. Each bubble is color-coded by brand using `d3.scaleOrdinal` and `d3.interpolateTurbo`, with a tooltip revealing brand names on hover via mouse events. The chart includes labeled axes, a circle-based legend for camera megapixels, and uses `d3.axisBottom` and `d3.axisLeft` for scales. The semi-transparent bubbles enhance visibility, while hover effects increase opacity.

Ggolisanthoshi2000@gmail.com
84% match
Loading thumbnail…

Activity6_Task4 Question 4

This bubble chart visualizes smartphone specifications by mapping screen size to the x-axis, camera resolution to the y-axis, and price to bubble radius, with color encoding brand identity. The visualization uses d3.csv to load the smartphone dataset, then employs d3.scaleLinear for axes and sizing, d3.scaleOrdinal with d3.schemeSet3 for categorical colors, and d3.axisBottom and d3.axisLeft to render axes. SVG circles are appended and positioned using the scaled values, with opacity and stroke applied for readability.

Gguttavenkata745@gmail.com
83% match