Bar chart with a Sequential color scale in D3

100%

Bar chart with a Sequential color scale in D3

✓ Published0🌍 Public

Last edited Mar 1, 2024

Created on Feb 29, 2024

This bar chart displays the average fiber content across six cereal manufacturers, using a sequential color scale where darker green bars represent higher fiber values. The visualization relies on D3 v7 to load a cleaned cereal dataset from a CSV, scale the categorical x-axis with `d3.scaleBand` and the continuous y-axis with `d3.scaleLinear`, and render SVG rectangles for each bar. Colors are assigned via `d3.scaleSequential` with an interpolator, while a legend generated by the d3-legend library explains the color encoding. The chart includes labeled axes, a title, and a subtitle, with all data drawn from the provided cereal_fiber.csv file.

AI-generated description

Cereal dataset from 'https://domo-support.domo.com/s/article/360043931814?language=en_US' The dataset provides nutritional data on 80 different breakfast cereals, and cleaning to be only 2 columns: manufacturer and avg_fiber.

The bar graph displays and compares the average fiber across 6 different cereal manufacturers.

The color and legend reference to 'https://d3-legend.susielu.com/'.

MIT Licensed

Similar vizzes

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

79% match

Loading thumbnail…

Bar Chart With Dropdown

A dropdown menu displays nutritional data for a selected cereal from a CSV file. The bar chart visualizes nine nutrition fields, such as calories, protein, and fat, for each cereal. Users choose a cereal from the dropdown, and the bars update with a smooth transition. The visualization uses D3 v3, with `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and SVG rectangles for the bars, which animate via `transition().duration(250)`.

Llimenzi

77% match

Loading thumbnail…

d3 Updating Bar Chart With Dropdown

This interactive bar chart displays nutritional values for various cereals from a CSV dataset, with a dropdown menu to switch between cereals. The visualization uses d3.v3 to render SVG bars and axes, updating the y-axis scale and animating bar heights via `transition()` when the selection changes. Each cereal shows nine nutrition fields, with bar lengths reflecting the selected nutrient amounts.

Nnifemi-sys

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

76% match

Loading thumbnail…

Scientific Data Visualization ICE-6: Marks and Channels

This bar chart displays the calorie counts of the first 20 cereal products from a CSV dataset, using horizontal rectangles to encode values. The visualization employs React for structure and the d3 library's `scaleBand` and `scaleLinear` for axis mapping, with SVG for rendering. The code loads data via `d3.csv` from a gist URL, and the chart includes custom tick labels for both axes.

Ppravalika.thogaru10@gmail.com

76% match

Loading thumbnail…

ICE-6 Bar chart SDV

This bar chart displays the distribution of calories across different cereal brands, with each bar representing a specific cereal’s calorie count. The visualization uses D3.js v7 to load CSV data from a GitHub gist, parse the numeric calorie values, and render the chart as SVG. The code employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with axes formatted via `d3.axisBottom` and `d3.axisLeft`. Cereal names on the x-axis are rotated for readability, while bar heights encode the calorie values directly. The chart’s layout and margins are defined programmatically, and error handling logs any data-loading issues.

Ssreeramyamini@gmail.com

76% match

Loading thumbnail…

Fork of d3 Updating Bar Chart With Dropdown

This interactive bar chart visualizes the nutritional content of breakfast cereals. A dropdown menu selects a cereal, and the corresponding values for categories like calories, protein, and fat are displayed as animated bars. The chart uses d3.v3 to render SVG and transitions, with a scale.ordinal for the x-axis and scale.linear for the y-axis. Data is loaded from the cereals.csv file and mapped for each cereal, and the `d3.extent` function updates the y-axis domain on selection.

AAntwanHak

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

75% match