Skip to main content
SimilarExport ZIP
100%

ICE-6 Multi-Series Chart – Fruits Weight & Price

✓ Published0🌍 Public
HHarshithmullapudi@my.unt.edu
Last edited Oct 19, 2025
Created on Oct 19, 2025

This multi-series chart compares the average weight and average price of ten fruits. The visualization encodes weight as steelblue vertical bars plotted against the left y-axis, while price is shown as a crimson line connected by points scaled to the right y-axis. The chart uses D3.js v7 with SVG rendering, employing `scaleBand` for the categorical x-axis, dual `scaleLinear` axes for the y-axes, and the `d3.line` function for the price series. The data is hardcoded in the script, and hover effects are applied to the bars.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Bar Chart – Fruits Average Weight

This bar chart displays the average weight of different fruits, using a dataset loaded from a CSV file hosted on GitHub. Each fruit is represented by a steel-blue rectangle that turns orange on hover, with rotated labels on the x-axis for readability. The visualization is built with D3 v7, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.axisBottom` and `d3.axisLeft` to render the axes. The chart is rendered as an SVG element with margins and labeled axes showing fruit names and weight in grams.

HHarshithmullapudi@my.unt.edu
87% match
Loading thumbnail…

ICE-6 Scatter Plot – Fruits Average Weight

This scatter plot visualizes the average weight of various fruits, with each fruit positioned along the y-axis and its weight plotted on the x-axis using a linear scale. Circles are colored by fruit color via d3.scaleOrdinal and d3.schemeCategory10, with hover tooltips implemented through SVG title elements. The visualization loads data from a remote CSV file using d3.csv, and employs d3.axisBottom and d3.axisLeft to render axes with fruit names as y-axis tick labels.

HHarshithmullapudi@my.unt.edu
83% match
Loading thumbnail…

ICE-7 for Fruit and Veggies Price dataset

This visualization presents a three-part exploration of fruit and vegetable prices using a pie chart, a line chart, and an area chart. The pie chart shows the farm sell price distribution for products on 2019-05-19, with a legend generated using D3’s `scaleOrdinal` for color mapping. The line chart tracks strawberry farm prices over time, while the area chart displays farm price trends, both created using D3’s time-series and SVG path APIs. The data is loaded asynchronously from a CSV file via `fetch` and parsed manually.

Ffreyatran124@gmail.com
77% match
Loading thumbnail…

ICE-7 line chart

This line chart displays the relationship between Weight (kg) and Price (USD) from a Bitcoin dataset, with weight on the x-axis and price on the y-axis. The visualization uses D3.js v7 to load the CSV data, then applies linear scales (`d3.scaleLinear`) and axis generators (`d3.axisBottom`, `d3.axisLeft`). A line generator (`d3.line`) creates the steelblue path connecting sorted data points. The SVG rendering includes labeled axes and a fixed 800x500 pixel canvas with margins.

UUday Kiran
75% match
Loading thumbnail…

Bubble chart

A bubble chart visualizes the correlation between average weight, sugar content, and price for ten fruits. Each fruit is represented by a circle whose x-axis position maps weight, y-axis position maps grams of sugar, and radius encodes price in dollars. The chart uses D3.js v7 with SVG for rendering, employing `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with a turbo color interpolation for fruit categories, and a custom tooltip on mouseover for identifying each fruit.

Vvineelaramulapalli32
75% match
Loading thumbnail…

Line Chart for ICE-7

This line chart visualizes the relationship between weight (kg) and price (USD) for items in the ICE-7 dataset, sourced from a CSV file. The code uses D3.js v7 to load and parse the data, then sorts it by weight before plotting a continuous line with `d3.line()`. Linear scales `d3.scaleLinear` map weight to the x-axis and price to the y-axis, with axis labels added via SVG text elements. The chart renders as an SVG element with steel blue strokes, displaying how price changes across the sorted weight range.

NNagasharan Sai Nandyala
75% match
Loading thumbnail…

ICE-7 line chart

This line chart displays the price (USD) of grocery items from an ICE-6 CSV dataset, using D3.js v7 with SVG rendering. It maps item names on the x-axis and price values on the y-axis, scaling the linear y-axis with `d3.scaleLinear` and `d3.max` for the domain. A categorical band scale (`d3.scaleBand`) positions items, and x-axis labels appear at the band centers. The chart is created by loading external CSV data via `d3.csv`, parsing numeric columns, and generating a path with `d3.line` while adding axes and labels through `d3.axisBottom`, `d3.axisLeft`, and SVG text elements.

UUday Kiran
74% match
Loading thumbnail…

Area Chart for ICE-7

This area chart visualizes the relationship between weight (kg) and price (USD) for items in the ICE-7 dataset, with weight on the x-axis and price on the y-axis. The chart uses a steelblue, semi-transparent filled area to show price variation across the sorted weight range. Built with D3.js v7, it loads CSV data from a GitHub gist, applies linear scales via `d3.scaleLinear`, and draws the area using the `d3.area()` generator along with `d3.axisBottom` and `d3.axisLeft` for axes.

NNagasharan Sai Nandyala
72% match