Skip to main content
SimilarExport ZIP
100%

Calcium vs. Potassium

✓ Published0🌍 Public
CCurran Kelleher
Last edited Dec 30, 2020
Created on Dec 30, 2020

This scatterplot displays the relationship between Calcium and Potassium content (as % Daily Value) for various foods. Each food item is labeled directly with its name and serving description using a text mark, rather than being represented by a point. The visualization is built with Vega-Lite and D3, reading nutrition data from a CSV file. The text marks are rendered with a size of 14 and opacity of 0.4, with axes scaled to exclude zero.

AI-generated description

This is a shallow fork of original work by Aliaksandr that uses text as the mark.

I made this change because I found myself just hovering over all the dots in the original, to see what they all are. I figured, better just put the text on the viz!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot shows the relationship between potassium and calcium content in various foods, with circle size encoding protein amount. The visualization loads CSV data from a GitHub-hosted NutritionFacts dataset using d3.csv, then renders the chart through the Vega-Lite API's vl.markCircle and vl.encode methods. Opacity and size settings improve readability, while config.js customizes axis styling and tooltip formatting. The page integrates Vega, Vega-Lite, and vega-tooltip libraries to display the interactive SVG output.

AAliaksandr
69% match
Loading thumbnail…

Visualization

This interactive scatterplot visualizes nutritional data for 77 breakfast cereals from a CSV file, plotting calories against potassium while encoding protein in the dot area and manufacturer with color. Users can zoom and pan through the d3.behavior.zoom interface, and a button click switches the x-axis to carbohydrates with a transition. Hovering reveals tooltips via d3-tip. The SVG rendering uses d3.scale.linear for axes and circle elements with dynamic radius calculations based on protein values.

AAndresAnayaIsaza
62% match
Loading thumbnail…

Bubble chart

This bubble chart displays the correlation between average potassium, sodium, and carbohydrate levels across different breakfast cereals. Each circle represents a cereal brand, with its position determined by potassium and sodium values, while its radius encodes carbohydrate content and color maps to the cereal name. The visualization includes interactive tooltips that appear on hover, as well as legends for both circle size and color. Implemented with D3 v7, the chart loads data from a CSV file, uses SVG for rendering, and employs d3.scaleLinear, d3.scaleOrdinal, and d3.interpolateTurbo for visual encoding.

Ppjdhungana@gmail.com
62% match
Loading thumbnail…

3D Scatter Plot

A 3D scatter plot visualizes nutrient data for various vegetables, mapping calcium, vitamin, and protein content along the three axes. The chart uses blue circular markers with green outlines and an opacity setting, rendered within a styled layout that includes axis titles and no margin. It loads a CSV dataset from a GitHub gist using D3's `d3.csv` function, then constructs the plot with Plotly's JavaScript API, specifically the `Plotly.newPlot` method and `scatter3d` trace type.

Nnikhilagopi
61% match
Loading thumbnail…

3D Scatter Plot Saranya

This 3D scatter plot visualizes the calcium, vitamin, and protein content of vegetables as three-dimensional points. Each blue marker represents a vegetable, positioned according to its nutrient values from a CSV file loaded via `d3.csv`. The code uses Plotly’s `Plotly.newPlot` with a `scatter3d` trace, while `d3.csv` handles data parsing with the `unpack` function to extract columns. The layout defines styled axis titles for the three nutrient dimensions.

MMalempatiSaranya
60% 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
60% match
Loading thumbnail…

3D Scatter Plot

This interactive 3D scatter plot visualizes nutrient data for fruits, plotting Vitamins, Calcium, and Protein along the x, y, and z axes. It loads a CSV from a GitHub gist using D3’s `d3.csv` function, then passes the parsed rows to Plotly’s `Plotly.newPlot` method. The visualization uses a `scatter3d` trace with blue circular markers and green outlines, styled with custom axis titles and colors. The chart is embedded in an HTML page with a heading and is rendered inside a designated `div` element.

PPavaniMangugari
58% match
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
58% match