Fork of Simple Scatter Plot

100%

Fork of Simple Scatter Plot

✓ Published0🌍 Public

Last edited Sep 27, 2024

Created on Sep 18, 2024

This scatter plot visualizes the relationship between calories per cup and consumer ratings for 80 breakfast cereals from the Cereal Dataset. The chart uses D3 scales and axes to map each cereal as a semi-transparent circle, with mouse-free static rendering. The visualization is built with D3.js (v7) through the `select` API, using `scaleLinear` for the y-axis and `scaleOrdinal` for the x-axis, while axis labels come from the `@curran/axis-labels` helper library.

AI-generated description

A simple scatter plot with D3 showing the Cereal Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

ScatterPlot Forked

This scatterplot visualizes the relationship between calories and protein content for 77 breakfast cereals, with each point colored by manufacturer. Built with D3.js v3, it renders the chart as an SVG with axis labels, a legend, and interactive tooltips that display the cereal name and coordinates on hover. The code uses D3 scales, axes, and transitions, reading data from a local CSV file to map the quantitative variables.

MMohamedZaki

86% match

Loading thumbnail…

Fork of cereals D3 Scatter Plot

This example visualizes the distribution of calories across different cereal brands using a vertical bar chart. The chart displays each cereal name on the x-axis with calorie values mapped to the y-axis, making it easy to compare relative calorie counts. The visualization is built with D3 v7 and renders as SVG, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded from a CSV file via `d3.csv`, with each bar's height proportional to the cereal's calorie value.

Ssreeramyamini@gmail.com

86% match

Loading thumbnail…

ScatterPlot

This scatterplot visualizes the relationship between calories and protein content for 77 breakfast cereals from the `cereal.csv` dataset. Each dot represents a cereal, positioned by its calorie and protein values, with its name and exact coordinates shown in an interactive tooltip on mouseover. Built with d3.v4, the visualization uses `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG circles for the data points. The tooltip is implemented with a D3 transition that fades the element in and out.

MMohamedZaki

85% match

Loading thumbnail…

D3 Scatterplot Example

This example visualizes the relationship between calories and protein content for various breakfast cereals using a scatterplot. Each dot represents a cereal, with its horizontal position mapped to calorie count, vertical position to protein grams, and color indicating the manufacturer. The chart includes labeled axes, a categorical color legend, and interactive tooltips that display the cereal name and exact values on hover. Built with D3.js v3, the code uses the `d3.scale.linear` API for axis scaling, `d3.svg.axis` for rendering, and SVG circles for the data points. The dataset is loaded from a local CSV file and processed with `d3.csv`.

BBTKY

84% match

Loading thumbnail…

Cereals Scatter Plot

This scatter plot visualizes the relationship between sugar content and consumer ratings for various breakfast cereals. Each red circle represents a cereal, positioned by its sugar level on the x-axis and its rating on the y-axis. Hovering over a point enlarges the circle and displays its exact coordinates. The visualization uses D3.js (v5) with SVG rendering, employing `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and an ordinal color scale for the legend. Data comes from a local CSV file containing nutritional information.

Ssrrajendran

84% match

Loading thumbnail…

Cereals Scatter Plot

A scatter plot maps cereal sugar content on the x-axis against consumer ratings on the y-axis, using red, semi-transparent circles to reveal the negative correlation between sweetness and approval. Built with D3 v5, the visualization uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and `scaleOrdinal` with `schemeCategory10` for a legend identifying each cereal by name. Data comes from a CSV file, rendered as SVG elements.

Ssrrajendran

83% match

Loading thumbnail…

Scatterplot Tutorial

This scatterplot shows the relationship between calories and protein content for 77 breakfast cereals, with each point colored by manufacturer and a tooltip revealing the cereal name and exact values on hover. Built with D3.js v3, it loads data from a CSV file and uses linear scales, SVG circles for the dots, and axes with labeled ticks. A categorical color scale assigns manufacturer colors, and a legend identifies each brand.

CCodyWeisbach

83% match

Loading thumbnail…

Week 3 First Visual

A scatter plot visualizes the relationship between calories per serving and average consumer rating for 80 cereals. The plot reveals a general trend where lower-calorie cereals receive higher ratings, with All-Bran with Extra Fiber (50 calories) rated highest. Built with D3, the visualization uses `scaleLinear` for both axes, `axisLeft`, and `xAxis`/`yAxis` from `@curran/axis-labels` to render scales and labels. Circles are drawn with D3’s data join, using `selectAll('circle')` and attributes for positioning, radius, and opacity.

IIan Coolidge

83% match