Week 4 Iteration

100%

Week 4 Iteration

✓ Published1🌍 Public

Last edited Feb 8, 2024

Created on Feb 8, 2024

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.

AI-generated description

A simple scatter plot with D3 showing the 80 Cereals dataset.

This iterates on the previous version of the visualization in two ways.

First, a color channel is introduced, interpolated between green and red. Greener data points have less sodium, while redder points had more. I was expecting to see a more linear correlation between calories and sodium, however oddly it seemed that the highest concentration of high-sodium cereals had an "average" calorie value.

Second, the user is now able to mouse over individual points on the graph to see the name of the cereal in question.

MIT Licensed

Similar vizzes

Loading thumbnail…

Week 5 Responsive Axes

This scatter plot visualizes the 80 Cereals dataset, plotting calories per serving against average rating. Each point is colored on a green-to-red interpolated scale based on sodium content, with greener points indicating less sodium and redder points indicating more. Hovering over any point reveals the cereal’s name in a tooltip. The chart uses D3 scales and axes to map the data, with responsive sizing handled through a ResizeObserver.

IIan Coolidge

89% 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

84% match

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

82% match

Loading thumbnail…

Assignment 2.3

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.

Ppjdhungana@gmail.com

82% match

Loading thumbnail…

Week 5 Interactivity

This bar chart shows the top 10 cereals with the highest sodium content from the 80 Cereals dataset, sorted in descending order and using a fixed y-axis range of 0 to 320. The visualization encodes each cereal name on the x-axis and sodium per serving in milligrams on the y-axis, with light gray highlighting on hover. The code uses D3’s `scaleBand`, `scaleLinear`, `axisLeft`, and the `viz` function from `@curran/axis-labels` to render axes and labels. The chart is implemented with D3’s `selectAll` and `.join()` for SVG element creation, and mouseover events change bar fill colors.

IIan Coolidge

82% 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

80% 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

80% match

Loading thumbnail…

D3 Color Scatterplot

This scatterplot compares cereal manufacturers by plotting each product's rating against its calorie count. The visualization encodes the manufacturer as color, with Kellogg's points in red and Nabisco points in blue, and includes a categorical legend to distinguish the two brands. The chart is rendered as an SVG using D3 v7, with linear scales for both axes and a sequential color legend built with the d3-legend library. The underlying data is loaded from a CSV file containing manufacturer, rating, and calorie fields.

Mmariahdiaz

79% match