Skip to main content
SimilarExport ZIP
100%

Fork of ICE-7 Line Chart

✓ Published0🌍 Public
Mmanthenasirisha06@gmail.com
Last edited Mar 27, 2024
Created on Mar 27, 2024
Forked from ICE-7 Line Chart

This example visualizes nutritional component comparisons across ten McDonald’s menu items, plotting three lines for total fat, protein, and carbohydrates on a shared band scale. It uses D3 v7 with SVG rendering, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` with `curveMonotoneX` for smooth paths. Data is loaded from a CSV via `d3.csv`, and `d3.schemeCategory10` colors the lines. The chart includes rotated x-axis labels and a legend, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the nutritional values of ten popular McDonald's menu items, comparing carbohydrates, protein, and total fat. The data is loaded from a CSV file and rendered using D3.js v7. The chart uses a band scale for the x-axis and a linear scale for the y-axis, with each item positioned along the bottom. Three distinct symbol types—diamond, cross, and circle—represent the different nutrients, plotted using `d3.symbol` and colored red, blue, and green respectively. The visualization includes labeled axes, a titled chart, and rotated x-axis labels for readability.

Mmanthenasirisha06@gmail.com
85% match
Loading thumbnail…

Fork of Fork of ICE-6 Marks and Channels

This scatter plot shows the relationship between calories and protein content for 146 fast food items, with each point representing a menu item from restaurants like McDonald’s, Taco Bell, and Subway. The visualization uses d3.scaleLinear for both axes and d3.axisBottom and d3.axisLeft to render the scales, while d3.csv loads the data from a CSV file. Circles are drawn with SVG attributes. The chart title and axis labels are added using SVG text elements.

Ppvvaishnavi93@gmail.com
83% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

The scatter plot visualizes nutritional values—carbohydrates, protein, and total fat—for McDonald's top ten selling menu items, using a red, blue, and green circle for each nutrient per item. It loads CSV data via `d3.csv` and renders SVG circles positioned with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with rotated labels, while `d3.select` and `append` build the chart.

Mmanthenasirisha06@gmail.com
83% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This example visualizes the calorie counts of McDonald's top 10 best-selling menu items in a pie chart, with a legend listing each item and its calorie value. It uses D3.js v7 to load CSV data, compute the pie layout with `d3.pie()`, and render the arcs using `d3.arc()`. The chart is drawn as an SVG, with a color scale (`d3.scaleOrdinal`) mapping each item to a distinct color. The data comes from a remote CSV file containing nutritional information, and the visualization emphasizes the relative caloric contribution of each item.

Mmanthenasirisha06@gmail.com
82% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between Total Fat and Protein content for a curated selection of McDonald’s menu items, with circle size encoding the Carbohydrate level. The chart uses D3.js (v7) to build linear scales and axes, drawing circles for each food item. A reusable scatter plot module, configured with accessor functions for the x, y, and z values, renders the data from a CSV file loaded via D3’s `csv` function. The visualization highlights nutritional comparisons among popular items, using axis labels and gridlines to clarify the quantitative values.

Mmanthenasirisha06@gmail.com
81% match
Loading thumbnail…

Fork of Fork of ICE-6 Marks and Channels

This scatter plot visualizes the relationship between calories and protein content across fast food menu items from a CSV dataset. Each orange circle represents a menu item, positioned by its calorie and protein values. The chart includes labeled axes and a title, rendered as an SVG. The visualization uses D3 v7 in a React framework, employing `d3.csv` for data loading, `d3.scaleLinear` for coordinates, `d3.axisBottom` and `d3.axisLeft` for axes, and D3 selections to append and style the circles.

Ppvvaishnavi93@gmail.com
81% match
Loading thumbnail…

Fork of Line Chart ICE 7

This visualization shows a line chart of calorie counts for campus snack items, with each point labeled by snack name and a hover tooltip displaying the exact calorie value. The chart uses D3 v7 with SVG rendering, employing `d3.csv` to load data, `d3.scalePoint` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the orange line connecting red data points. Grid lines and a rotated x-axis label enhance readability, while mouseover events trigger the tooltip transitions.

118121a1545
80% match
Loading thumbnail…

Fork of ICE-7 Line Chart

This visualization shows the relationship between Glucose and BMI across a dataset of countries, plotting each as a single connected line graph on an SVG canvas. The code uses D3 v5 to load the CSV data and apply the `d3.line` generator, with `d3.scaleLinear` for both axes and `d3.axisLeft` and `d3.axisBottom` for tick marks. A red path traces the ordered points, while axis labels and a title are appended as SVG text elements. The line plot is rendered within a centered SVG with explicit margins and tick sizing.

Aav.dj.2000@gmail.com
79% match