Skip to main content
SimilarExport ZIP
100%

Task 8_Tutorial4_Q

✓ Published0🌍 Public
SSushmaNamidi@my.unt.edu
Last edited Apr 15, 2024
Created on Apr 15, 2024
Forked from Task 8_Tutorial4

This D3.js v7 bubble chart visualizes the correlation between average price, average quantity, and sales for various electronic items. Each circle's x-position represents price, y-position represents quantity, its radius encodes sales volume, and its color distinguishes item categories. The visualization includes interactive tooltips displayed on mouseover, revealing specific item names. Implementation uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for categorical coloring, and SVG rendering with animation for tooltip transitions. Data is loaded from a CSV file containing item attributes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

activity 6_task4_Q9

This interactive bubble chart compares products by price on the x-axis and sales volume on the y-axis, with bubble size encoding each product’s rating. Built with D3.js v7, it renders as SVG and uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble radii, and `d3.scaleOrdinal` with `d3.schemeCategory10` to color-code product categories. Hovering a bubble triggers a tooltip showing detailed product attributes, while a legend identifies each category. Data is loaded from a local CSV file.

Cchandrikachowdary867@gmail.com
82% match
Loading thumbnail…

Activity6_Task4

This interactive bubble chart visualizes the correlation between average price, weight, and capacity across 15 consumer electronics products. Each circle’s x-position maps price, y-position maps weight, and radius encodes capacity, while color distinguishes product type via a categorical scale using `d3.interpolateTurbo`. The D3 v7 SVG implementation includes axes, a capacity legend with reference circles, and a tooltip that appears on mouseover using `d3.pointer` events. Data is loaded from a CSV file with `d3.csv`, and hover interactions adjust opacity through CSS transitions.

HHari Kiran
82% match
Loading thumbnail…

Task 8 Tutorial 4 question

This example demonstrates a packed bubble chart using D3 v4, visualizing a dataset of food items with their associated counts. The chart renders circles of varying sizes on a 600-pixel square SVG canvas, with each bubble representing an item and its area proportional to the count value. The implementation uses D3’s `d3.pack` layout, `d3.hierarchy` for tree building, and `d3.scaleOrdinal` with the `schemeCategory20` color palette to assign distinct colors. Each bubble includes a white label showing the item name and count, rendered with `d3.select` and SVG attributes.

YYeshwanth963@gmail.com
78% match
Loading thumbnail…

Activity6_Question4

This visualization displays a bubble chart showing the correlation between quantity sold, price per unit, and revenue for a dataset of fruits loaded from a CSV file. Each circle’s x-position encodes quantity sold (pounds), y-position encodes price per unit (USD), and radius encodes revenue, with color mapping to fruit type via a scaleOrdinal and d3.interpolateTurbo. The SVG is built using d3.v7 with axisBottom and axisLeft scales, and includes interactive tooltips on mouseover, plus legends for revenue size and fruit categories.

UUday Vandanapu
77% match
Loading thumbnail…

fork of activity_6_question_4

This bubble chart visualizes product data, mapping price to the x-axis, sales volume to the y-axis, and rating to bubble radius, with categories distinguished by color. The D3 v7 code uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for circle sizes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. The SVG rendering includes a legend, axis labels, and interactive tooltips that display product details on mouseover. Data is loaded from a CSV file using `d3.csv`.

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

Activity6_Question4

This bubble chart visualizes product data from a CSV file, plotting price on the x-axis against quantity sold on the y-axis. Each circle’s radius represents profit margin using `d3.scaleSqrt`, while color encodes the product category through `d3.scaleOrdinal` with `d3.schemeTableau10`. The SVG rendering uses `d3.axisBottom`, `d3.axisLeft`, and the `d3.select` and `.enter()` APIs to draw circles, with a custom HTML legend positioned in the upper right corner.

SSai Praveen Lokavarapu
77% match
Loading thumbnail…

Activity6_Question4.9

This bubble chart visualizes the relationship between sales volume, pricing, and revenue for 20 vegetables using a CSV dataset. The x-axis maps quantity sold in pounds, the y-axis maps price per unit in USD, and bubble size represents revenue while color distinguishes vegetable types. Interactive tooltips appear on mouseover. The visualization uses d3.csv to load data, d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal with interpolateTurbo for coloring, and SVG circles with event listeners for tooltip interactions. A legend indicates revenue bubble sizes, with all elements rendered as animated SVG.

UUday Vandanapu
77% match
Loading thumbnail…

Activity6_Task4

This interactive bubble chart visualizes sales data across employees, plotting sales cost on the x-axis, profit on the y-axis, and quantity as bubble size, with color encoding employee names. The visualization includes a tooltip that appears on mouseover, revealing the employee name. Built with D3 v7, the chart uses SVG rendering and animation, loading data from a CSV file. It also includes a legend for bubble size and color categories, with the tooltip handling implemented via D3 event listeners.

Bbudalavijay2001@gmail.com
77% match