Fork of ICE-5-Prathima-coffee

100%

Fork of ICE-5-Prathima-coffee

✓ Published0🌍 Public

Ppilliprathimarani@my.unt.edu

Last edited Mar 7, 2024

Created on Mar 7, 2024

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.

AI-generated description

I gave details of Coffee shop

which contains different varieties of coffees available in a cafe and also some bakery items and their prices added styles also.

once the project is executed it will show a option to enter some input in that if we give the word "Menu" as input and click on execute it will display all the dataset content.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-5-Prathima

This interactive data visualization presents a coffee shop menu as an SVG-based webpage. It shows a table of coffee and bakery items with their prices, which appears after a user types "Menu" into an input field. The page displays decorative coffee cup and star SVG graphics alongside the data. Using D3.js v7, the code loads a CSV file from a GitHub gist, then dynamically generates an HTML table from the parsed data. The visualization also provides a summary message indicating the dataset's row and column counts, rendered through D3's asynchronous data loading and DOM manipulation methods.

Ppilliprathimarani@my.unt.edu

94% match

Loading thumbnail…

Fork of ICE-6-Prathima -coffee

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`.

Kkotlavamsireddy@gmail.com

82% match

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

78% match

Loading thumbnail…

Fork of Fork of Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This interactive visualization demonstrates parsing and rendering CSV data within a React application using D3.js. It displays an image and a data message in a styled HTML container. The SVG output is generated using D3’s v7 library, incorporating drawing primitives like paths, circles, and ellipses. The code defines SVG patterns and scales an embedded base64-encoded JPEG image, which is referenced within the SVG’s `<defs>` section, while the webgl rendering is present in the metadata but not directly visible in the source.

PPujitha14challagulla

74% match

Loading thumbnail…

Fork of Data Visualization ICE5

This example displays a web page titled “ICE 5” with a large heading, a summary message about a CSV dataset, and two static SVG images (a house and a human) positioned side-by-side. It loads a CSV file from a GitHub gist using D3 v7’s `d3.csv` method, then calculates and displays the dataset’s size in kilobytes, row count, and column count in a styled `<pre>` element. The page layout is built with custom CSS, including flexbox for the image row and colored backgrounds for text elements. React is listed as the framework, though the visible code uses plain HTML and JavaScript with D3.

RRevanthGrreddy

74% match

Loading thumbnail…

Fork of ICE 5

This example displays a tabular view of car data fetched from a GitHub Gist, showing a preview of rows and column names within a styled HTML page. It first renders a decorative SVG image, then uses D3.js `d3.csv` to load the external CSV, computes the file size in kilobytes, and appends a table to the DOM using `d3.select` and `append`. Styling is applied via CSS for the table, borders, and background, providing a clear, albeit basic, data exploration interface.

Mmaheganesh

74% match

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data from a remote URL using D3.js v7. The page displays a summary of the dataset, including its size in kilobytes, row count, and column count, within a styled `<pre>` element. The code uses `d3.csv` to fetch and parse the data, then `d3.csvFormat` to calculate the data size, and writes the results to the DOM via `document.getElementById`. The visualization also embeds a static SVG image as a decorative element.

Ggayathri

72% match

Loading thumbnail…

Fork of Fork of Vikas Fork of Fork of Fork of Fork of HTML Starter

This example visualizes scientific data about ICE-5, displaying a summary of a CSV dataset alongside a set of SVG color swatches with labels such as Han Purple and Harvest Gold. It uses D3 v7 to fetch and parse the remote CSV via `d3.csv`, then calculates the file size, row count, and column count to display in a pre-formatted text block. The rendering is done entirely in SVG, with static circles and text elements embedded directly in the HTML. The page also includes an external SVG image, though its content is not programmatically processed.

Ppanduvik99@gmail.com

72% match