Skip to main content
SimilarExport ZIP
100%

Bubble chart

✓ Published0🌍 Public
Aaniteshterala2000
Last edited Jul 22, 2023
Created on Jul 22, 2023
Forked from Hello VizHub

This bubble chart displays the correlation between smartphone specifications and price for 15 brands. The x-axis represents screen size in inches, the y-axis shows RAM in gigabytes, while the bubble radius encodes price, and color distinguishes brands. Hovering over a bubble reveals a tooltip with detailed specifications. The visualization is built with D3 v7 and renders SVG and animations through custom JavaScript, using d3.scaleLinear for axes and bubble size, d3.scaleOrdinal for colors, and d3.interpolateTurbo for the color gradient.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 2_Task 4

This bubble chart shows the correlation between a car's make cost, selling price, and profit percentage across fourteen brands. Each circle’s position maps cost and selling price, while its radius encodes profit percentage and its color identifies the brand. Built with D3 v7, the visualization loads data from a CSV file, uses `d3.scaleLinear` for axes and bubble sizing, and renders as an SVG with an interactive tooltip that displays the brand name. A legend decodes both the color categories and bubble size scale.

KKeerthiAnnem
73% match
Loading thumbnail…

Assignment 2_Bubble chart

This bubble chart visualizes the correlation between make cost, selling price, and profit percentage for various car brands. The data, sourced from `profits.csv`, is rendered as an interactive SVG using D3 v7, where bubble size encodes profit percentage and color distinguishes car brands. Implemented with `d3.csv`, `d3.scaleLinear`, and `d3.scaleOrdinal`, the chart displays axes for selling price and cost, with a legend for profit percentage and brand colors. Hovering over a bubble triggers a tooltip showing the brand name, supported by custom `showTooltip`, `moveTooltip`, and `hideTooltip` functions on `mouseover`, `mousemove`, and `mouseleave` events.

Cchsaisriharsha@gmail.com
73% match
Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed radar chart compares smartphone attributes—battery life, brand, contract cost, design, connectivity, screen size, price, and "smartphone" status—across three phone models using normalized values up to 0.5. The visualization employs D3.js to render seven concentric grid levels, radiating axes, and smoothed, glowing polygon areas with colored dots for each data series, plus animated transitions. Built with React and SVG, it uses D3’s `scale.ordinal` for color coding and `d3.scale.linear` for radius mapping, and includes a blur filter for the glow effect.

RRoy Kuijper
73% match
Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart compares three smartphone brands—iPhone, Samsung, and Nokia—across eight attributes like battery life, brand, and price. The code builds an SVG radar chart with circular grid levels, radial axes, and glow-filtered data polygons using D3 v3, with rounded strokes for a smooth appearance. A legend and tooltip are included, and the chart uses ordinal color scaling to differentiate each brand.

Ooptimizeresume
73% match
Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed radar chart compares the attributes of three smartphone brands—iPhone, Samsung, and Nokia—across eight dimensions such as battery life, brand, and price. Each brand is represented as a colored, closed polygon, with axes radiating from the center and concentric grid circles indicating value levels. The visualization uses D3.js version 3 to render SVG elements, including paths for the data blobs, circles for the grid, and text labels, with an applied glow filter for visual enhancement. Numerical values are displayed as percentages, and the chart is drawn using the `RadarChart` function originally designed by Nadieh Bremer.

Ooptimizeresume
73% match
Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart compares smartphone attributes—such as battery life, brand, and contract cost—across three phone models (iPhone, Samsung, Nokia). The visualization uses circular grid levels with percentage labels, radiating axes, and filled, semi-transparent polygons with rounded strokes to represent each product’s profile. Built with D3 v4, the code leverages `d3.scaleOrdinal` for color, `d3.scaleLinear` for the radial scale, and SVG elements like circles and paths to render the chart, complete with a glow filter and interactive hover tooltips.

XXuân Vinh
73% match
Loading thumbnail…

Smoothed D3.js Radar Chart

This example presents a smoothed radar chart comparing three smartphone brands—iPhone, Samsung, and Nokia Smartphone—across eight attributes like Battery Life and Price of Device. The visualization loads nested JSON data via `d3.json`, then converts it to an array of `values` arrays. Rendered using SVG with animated, rounded strokes, it employs `d3.scale.ordinal` for categorical colors and a linear radius scale for value mapping.

BBartekDu
72% match
Loading thumbnail…

Smoothed D3.js Radar Chart

A smoothed radar chart compares three smartphone brands across eight attributes such as battery life, brand, and price. The chart overlays semi-transparent, rounded polygons, with a low-opacity fill and stroke, over a circular grid with labeled percentage levels. Built with D3.js (v3.5.6), the visualization uses an ordinal color scale, linear radius scaling, and an SVG glow filter, with interactive hover tooltips. The data is embedded directly in the page, and the rendering is animated.

SStefan Apostol
72% match