Skip to main content
SimilarExport ZIP
100%

D3 Bubble Chart

✓ Published7🌍 Public
Mmariahdiaz
Last edited Nov 3, 2022
Created on Sep 27, 2022
Forked from Hello VizHub

This bubble chart compares cereal manufacturers by plotting the relationship between cereal rating (x-axis) and sodium levels (y-axis), with bubble size representing calorie content. The visualization uses circles colored by manufacturer via `d3.scaleOrdinal` with `d3.schemeSet1`, positioned using `d3.scaleLinear` for both axes. The data comes from `data.csv`, which contains manufacturer, rating, calories, and sodium values for 77 cereals. Circle sizes are scaled with a linear scale mapping calories to radius, and the chart includes legends for both bubble size and color, using D3 v7's `d3.select`, `d3.csv`, and `d3.axisBottom`/`d3.axisLeft` APIs to build the SVG graphic.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bubble Chart

This bubble chart compares cereal manufacturers by plotting each product’s sodium level on the x-axis, its rating on the y-axis, and its calorie count as the bubble radius. Manufacturers are distinguished by color using `d3.scaleOrdinal` with the `d3.schemeSet1` palette. The code loads data from a CSV file, builds the visualization with SVG, and includes legends for both bubble size and color. All axes, scales, and labels are created using standard D3 v7 methods such as `d3.scaleLinear` and `d3.axisBottom`.

LLakshmanRangisetti
95% match
Loading thumbnail…

assign3-4

This bubble chart compares cereal manufacturers by plotting their products' ratings against sodium levels. Each bubble's position encodes the rating (x-axis) and sodium content (y-axis), while its radius represents calorie count through a linear scale, and its color indicates the manufacturer using a categorical ordinal scale with the `schemeSet1` palette. The visualization, built with D3 v7, uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG, with legends for both bubble size and manufacturer colors. Data comes from a local CSV file loaded via `d3.csv`.

Ppardha1411
94% match
Loading thumbnail…

Bubble Chart

This bubble chart compares cereal manufacturers by plotting each cereal’s rating on the x-axis against its sodium level on the y-axis. Bubble diameter encodes calorie count, while color distinguishes the seven manufacturers, with legends for both size and color. The visualization loads data from a CSV file and renders as SVG using D3 v7, employing `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.schemeSet1` for colors, and `d3.axisBottom` and `d3.axisLeft` for the axes.

Rrushithareddyy
94% match
Loading thumbnail…

Bubble Chart

This bubble chart compares cereal products by manufacturer, plotting sodium levels on the x-axis and cereal rating on the y-axis, with bubble size encoding calorie content and color distinguishing manufacturers via a d3.scaleOrdinal and the d3.schemeSet1 color palette. The visualization renders as an SVG using D3 v7, loading data from a CSV file and including custom legends for both bubble size and manufacturer color. Axes are generated with d3.axisBottom and d3.axisLeft, and the chart includes labeled titles for clarity.

Aanith462@gmail.com
94% match
Loading thumbnail…

Bubble Chart

This bubble chart compares cereal manufacturers by plotting each product’s sodium level on the x-axis, rating on the y-axis, and calories as the bubble radius. The color of each bubble encodes the manufacturer. The visualization includes legends for both color and bubble size. It uses D3.js v7 with SVG rendering, reading data from a local CSV file. Key APIs include `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, `d3.schemeSet1`, and the `join` method for data binding.

Ssuryavamsi00024
94% match
Loading thumbnail…

Bubble Chart

This bubble chart compares cereal manufacturers by plotting each product’s rating along the x-axis and sodium level along the y-axis, with circle size encoding calories and color distinguishing manufacturers. The data.csv file is loaded via `d3.csv`, and scales including `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeSet1` position and style the marks. The SVG rendering includes axes via `d3.axisBottom` and `d3.axisLeft`, plus custom legends for bubble size and manufacturer color.

SSharankumar02
93% match
Loading thumbnail…

Bubble Chart

This bubble chart compares 77 cereals by sodium level and rating, with bubble size representing calorie count and color indicating the manufacturer (from data.csv). The visualization renders as an SVG via D3 v7, using d3.csv to load the data, d3.scaleLinear for x/y position and bubble radius, and d3.scaleOrdinal with d3.schemeSet1 for color encoding. It also includes a custom calorie-size legend and a manufacturer color legend built with circle and text elements.

Ssrikkanth05
92% match
Loading thumbnail…

Cereal Bubble Chart in D3

This bubble chart compares breakfast cereals by plotting calories on the x-axis, weight on the y-axis, and using bubble radius to represent ratings. Color encodes the manufacturer, with a legend showing both color categories and rating sizes. The visualization loads CSV data via `d3.csv`, renders SVG circles using `d3.scaleLinear` for axes and bubble size, and applies `d3.scaleOrdinal` with `d3.schemeTableau10` for manufacturer colors. The dataset contains nutritional information for 80 cereals from seven manufacturers.

EEunice Tu
91% match