VamshiIce5

100%

✓ Published0🌍 Public

Last edited Mar 7, 2024

Created on Mar 7, 2024

This interactive webpage displays a fruit dataset in a searchable table, styled with a purple background and colorful CSS. It features a navigation bar containing repeated SVG icons of apples and mangoes, which serve as decorative elements. The page is built using HTML and CSS, with the table styled for readability, including hover effects and alternating row colors. The SVG fruit icons change color on hover, and the page includes a search input for filtering the dataset. The design emphasizes a playful, colorful aesthetic while maintaining functional data presentation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example presents an interactive fruit bowl visualization rendered as SVG. It displays a light blue bowl containing an apple, an orange, and four grapes, with each fruit labeled on mouseover using d3.select and append operations. The code uses d3.v5 to bind mouseover and mouseout events, adding text elements dynamically to show fruit names. Styling is handled through external CSS, setting the page font color to orange.

MMenno1989

74% match

Loading thumbnail…

fruit

This example visualizes a collection of fruits grown in a particular season, displaying them as simple SVG shapes—a red apple with a brown stem and green leaf, a green watermelon, and an orange mango—inside a fixed 400×200 pixel canvas. It first loads a CSV dataset from a GitHub gist, then reports the file size, row count, and column count in a text container. The visualization uses D3.js v7 to append the fruit shapes and to parse the CSV data, while CSS styles the page with a bisque background and crimson headings. The fruits are drawn with basic geometric primitives like circles, ellipses, and paths, without any data-driven encoding.

VVarun Gadde

73% match

Loading thumbnail…

14.c - fruit bowl - hover & click select - dataviz 2018

Five apples sit in a bowl, selectable by click and hover, with each fruit’s outline changing color to indicate state. The code uses D3 v7’s data join and transition methods to animate fruit radius, position, and label opacity as items are removed or change type. The `renderFruitBowl` function handles enter, update, and exit selections, while `scaleOrdinal` maps fruit types to colors and radii. Apple and lemon labels appear via SVG text elements.

Zzach b.

71% match

Loading thumbnail…

14.b - fruit bowl - hover to select - dataviz 2018

A fruit bowl shows five apples arranged in a shallow dish, and hovering over any fruit highlights it with a black stroke. The visualization uses D3 v7's selection and transition APIs to animate new fruits entering, exiting, and changing type, such as when an apple transforms into a lemon. The code demonstrates enter, update, and exit states using `selectAll`, `merge`, and `transition().duration()`, with interactions driven by `mouseover` and `mouseout` events. All rendering is done in SVG.

Zzach b.

71% match

Loading thumbnail…

HTML Starter

This example demonstrates a basic interactive SVG fruit bowl in a web page. It uses D3.js to add a hover interaction: when the user mouses over the orange circle, D3 appends a text label saying “Orange” to the SVG; on mouse-out, the label is removed. The visualization is built with static SVG elements—a purple translucent background circle, an orange, a yellow, and a green circle—stylized via CSS and rendered using D3’s selection and event handling methods (`.on`, `.append`, `.remove`). The code uses HTML, CSS, and D3 v5 loaded from a CDN.

Ddanielstaal

71% match

Loading thumbnail…

click to select!

A fruit bowl animation shows a row of apples that dynamically change through data updates, with click-to-select behavior implied by the title. The SVG visualization uses d3 v5 and a modular fruitBowl function with scaleOrdinal mappings for fruit color and radius. Timeout-driven state changes remove fruits, replace one apple with a lemon, and filter out another, while enter, update, and exit selections handle the transitions using selectAll and data joins.

Eemntd

71% match

Loading thumbnail…

Click to select

Five fruits, rendered as colored circles in a bowl, respond to clicks by acquiring a black outline to indicate selection. The SVG visualization demonstrates dynamic updates using D3.js v5 within a React framework, where the `fruitBowl` function handles enter, update, and exit transitions. Animated with `transition().duration(1000)`, fruits shrink on removal and change color when swapped. The example shows D3’s `scaleOrdinal` for color and radius mappings and `select` for DOM manipulation, illustrating core data-binding and lifecycle management.

Ggorfoula

70% match

Loading thumbnail…

My Webpage

This personal webpage presents a survey of scientific data visualization through custom HTML, CSS, and JavaScript, featuring an embedded SVG illustration and a data table. The page displays a CSV dataset rendered as an HTML table, with JavaScript calculating and displaying column sums, averages, and overall summary statistics. The interface includes a header, navigation menu, and footer, styled through an external stylesheet. The SVG logo and data summary demonstrate basic web technologies for presenting structured information, using native JavaScript functions for parsing and computation rather than external libraries.

Ssaikrishnabussa

70% match