Skip to main content
SimilarExport ZIP
100%

Assignment 2.3

✓ Published0🌍 Public
Ppjdhungana@gmail.com
Last edited Jul 21, 2023
Created on Jul 15, 2023
Forked from Hello VizHub

This interactive scatter plot visualizes cereal data filtered to 100 calories, comparing sodium and sugar content. Each circle represents a cereal, with markers colored by rating value: red for ratings below 40, orange for 40–60, and green for ratings above 60. The visualization loads CSV data via `d3.csv` from a GitHub gist, uses `scaleLinear` for both axes, and renders circles as SVG elements with `d3.select` and `join`. Axis labels are positioned with SVG transforms, and the D3 v6 API is loaded directly from UNPKG.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot Cereals

A scatter plot displays the relationship between sugar and sodium content for a random selection of 35 cereals, with points colored by their overall rating. Ratings from 18-39 appear red, 40-59 orange, 60-100 green, and all others blue. The visualization loads CSV data from a GitHub gist using `d3.csv`, scales axes with `d3.scaleLinear`, and renders circles as SVG elements with `select` and `join`. Axis labels and a legend explain the color coding, while tick text is styled at 20 pixels for readability.

Ppjdhungana@gmail.com
88% match
Loading thumbnail…

Assignment 2.5:Reusable Scatter plot

This example demonstrates a reusable scatter plot that visualizes the nutritional properties of cereals, with the x-axis cycling through cups, sugars, sodium, and carbohydrates over time. The plot encodes three variables simultaneously using both the position of the circles and their horizontal and vertical radii, while color indicates the cereal's rating (red for low, orange for average, green for good). The visualization leverages D3 v6.7.0 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll().join()` for rendering, and it smoothly animates between different x-axis variables using `setInterval`. The code loads data from a CSV file and renders the interactive chart as SVG within a full-window canvas.

Ppjdhungana@gmail.com
85% match
Loading thumbnail…

Scatter Plot

This scatter plot shows the relationship between the ratings and sugar content of various cereals. Each circle represents a cereal, positioned along the y-axis by its sugar level and the x-axis by its rating score. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for the axes, and d3.axisLeft and d3.axisBottom to render them in an SVG. A title and axis label are included, though the data source URL points to a cereal dataset from GitHub.

Vvpruden1
85% 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
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
83% match
Loading thumbnail…

Reusable Scatter plot Presentation

This example demonstrates a reusable scatter plot visualization that animates through different cereal data attributes on the x-axis, including cups, sugars, sodium, and fat. The visualization loads data from a CSV file using D3's `csv` function and employs a custom ES6 module (`scatterPlot.js`) that uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The scatter plot displays circles colored by rating values (red, orange, green) to indicate low, average, and good ratings, with an animated `setInterval` updating the x-axis attribute every few seconds. The SVG rendering includes custom legends, axis labels, and a title styled with Google Fonts.

Ppjdhungana@gmail.com
82% match
Loading thumbnail…

Week 4 Iteration

This scatter plot visualizes the relationship between calories and average rating for 80 different cereals. Each point's color encodes sodium content using d3.interpolateLab, transitioning from green (low sodium) to red (high sodium), revealing that high-sodium cereals tend to cluster around average calorie values rather than showing a linear trend. Users can hover over individual points to see the cereal's name through a tooltip div. The visualization uses D3.js with a linear scale for both axes and data from a CSV file.

IIan Coolidge
82% match
Loading thumbnail…

Cereals Scatter Plot

This scatter plot displays the relationship between sugar content and consumer ratings for 77 different cereals, using a dataset from Telecom ParisTech. Each circle represents a cereal, positioned along the x-axis for sugar and the y-axis for rating, with all data points shown in red. The visualization uses D3 v5's `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and SVG circles for rendering. It also includes a legend that attempts to map cereal names to colors via `scaleOrdinal`, though the legend is not fully functional. The plot reveals a general trend where cereals with higher sugar content tend to receive lower ratings.

Ssrrajendran
82% match