Skip to main content
SimilarExport ZIP
100%

Fork of ICE-6-Prathima -coffee

✓ Published0🌍 Public
Kkotlavamsireddy@gmail.com
Last edited Mar 20, 2024
Created on Mar 20, 2024

This bar chart visualizes sales volumes for different coffee menu items, displaying each beverage name along the x-axis and its corresponding sales quantity on the y-axis. The visualization uses D3 v7’s `d3.csv` to load data from a GitHub gist, then applies `d3.scaleBand` and `d3.scaleLinear` to map categories and values. Bars are rendered as SVG rectangles with a steelblue fill, and axes include rotated labels using `d3.axisBottom` and `d3.axisLeft`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6-Prathima -coffee-Bar chart

This bar chart visualizes the sales volume of different coffee shop menu items, with each bar representing a specific coffee type. The data is loaded from a remote CSV file via `d3.csv` and parsed to convert sales figures into numbers. Using D3.js v7, the chart applies `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, rendering bars as SVG rectangles. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and the chart includes a title and axis labels. The x-axis labels are rotated for readability, and bars change color on hover.

Ppilliprathimarani@my.unt.edu
91% match
Loading thumbnail…

Fork by ICE 6 Pran

This bar chart visualizes weekly sales data from a CSV file, with each bar representing an ID and its corresponding sales figure, and includes interactive tooltips that display the sales value on hover. The visualization uses D3 v7 and is built with an SVG canvas. It employs `d3.csv` to load the data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to render the axes. Bars change color on mouseover via a custom tooltip implemented with D3 selections.

PPran6728
82% match
Loading thumbnail…

Fork of ICE-5-Prathima-coffee

This interactive visualization displays a coffee shop menu with item details, initially hidden until a user types “Menu” into a text input and clicks Execute. Using D3 v7, the page fetches CSV data from a GitHub gist via `d3.csv`, then dynamically renders an SVG table populated with the dataset’s columns and rows. The interface also shows data summary information (file size, row and column counts) and features decorative inline SVG graphics, including coffee cups and stars, alongside styled HTML elements. The visualization combines DOM manipulation with pure D3 data loading to create a simple, command-driven table display.

Ppilliprathimarani@my.unt.edu
82% match
Loading thumbnail…

Fork of ICE-6

This is a bar chart of supermarket sales data, showing the unit price for the first ten product lines from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and renders SVG rectangles for each bar. Data is loaded asynchronously via `d3.csv` and limited to ten entries before being displayed. The chart includes custom axes with gridlines and labels, all rendered as SVG elements within a React component.

SsreepavanKothapalli
79% match
Loading thumbnail…

Fork of ICE-6

This visualization presents a horizontal bar chart displaying the "Unitprice" for the top 10 records from a Supermarket Sales CSV dataset. Each bar represents a product line, with its length proportional to the unit price. The chart is built using React and D3 v5, leveraging `d3.csv` for data loading, `d3.scaleBand` for the y-axis categories, and `d3.scaleLinear` for the x-axis price scale. The SVG rendering includes grid lines and axis labels, with blue bars drawn using SVG rectangles within a transformed group.

LLakshmiManjushaReddyYarreddu
79% match
Loading thumbnail…

Fork of ICE 6

A bar chart displays automobile prices across car makes, sourced from a CSV dataset. The visualization uses D3 v5 to load data via `d3.csv` and render SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with rotated x-axis labels. The chart includes titles and axis labels, with bars colored steelblue.

Iindushashi.g@gmail.com
79% match
Loading thumbnail…

Fork of ICE-6 Bar charts: Done with the help of D3

This visualization displays information about book sales, presenting a horizontal bar chart that compares the population values for different book categories. The chart uses React with a functional component and the `useState` and `useEffect` hooks to load and process data from a CSV file. D3 v5 functions such as `csv`, `scaleBand`, `scaleLinear`, and `max` are used to parse the data, create the scales, and render the SVG elements, with rectangle widths encoding the data values.

TTulluripallavi
78% match
Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA
78% match