Skip to main content
SimilarExport ZIP
100%

ICE5 Lakshmi Vandana Nunna

✓ Published0🌍 Public
LLakshmiVandanaNunna
Last edited Feb 24, 2022
Created on Feb 24, 2022
Forked from Hello VizHub

This interactive data visualization presents a flower composed of a sunflower spiral, overlaid with an almond cocoa pattern and animated statistics about the cocoa trade. The visualization uses a Vue.js framework with D3.js v7 to generate SVG elements, displaying a table with key production and consumption figures. The dynamic spiral rotates via CSS animations, while data-driven updates are handled through Vue's reactive data binding. The piece combines a hand-crafted cocoa background image with computed SVG paths to create a visually engaging infographic on the cocoa industry.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-5 · Flowers Dataset Summary

This dark-themed dashboard summarizes the Flowers Dataset using D3.js v7 and an inline SVG flower badge. It displays key-value statistics, a styled table of the first ten CSV rows, and color-coded chips for categorical attributes. The layout uses HTML/CSS grids and cards, with D3 handling data binding and rendering the SVG summary graphic.

Cchengalvasharanya@gmail.com
69% match
Loading thumbnail…

ICE-5 Dhanusree Kodali

This web page presents an interactive online order system interface. It displays a title, welcome message, and a home appliance SVG image, all styled with custom CSS for colors and layout. The visualization leverages an embedded SVG with a base64-encoded JPEG image pattern, while the system uses D3.v5 for potential data manipulation, with the page structure built using React.

DDhanusree Kodali
69% match
Loading thumbnail…

ICE-6

This bar chart displays the cocoa percentage for various chocolate companies, ordered along the y-axis with horizontal bars extending to represent each value. The visualization uses D3 v7 with an SVG rendering approach, employing `scaleLinear` and `scaleBand` to map the data from the CSV file. Interactive tooltips appear on mouseover, and the bars are colored brown with a darkening effect on hover. The chart includes axis labels and a title, all rendered within a 960×500 SVG canvas.

117761A04F1
68% match
Loading thumbnail…

ICE 5 Q3 assignment sharanya

This example displays the first five rows of a flowers dataset in a styled HTML table, with categorical values rendered as color-coded tag pills and a miniature bar chart indicating fragrance levels. D3 v7 loads the CSV from a public Gist using `d3.csv` and populates the table headers and body dynamically. The dark-themed interface applies custom CSS classes to encode season, sunlight, and water requirements, while the caption notes that the data comes from an external source.

Cchengalvasharanya@gmail.com
67% match
Loading thumbnail…

ICE 5

This visualization presents a blank SVG canvas with a light gray background, overlaid with an image pattern defined in the SVG defs. The main interactive element is a text display showing metadata about a dataset loaded from a CSV file, including its size, row count, and column count. The code uses D3 v5 to fetch and parse the CSV data from a GitHub gist URL, then formats and displays this information in a styled `<pre>` element. The rendering approach combines static SVG markup with dynamic data-driven text output.

TTekmal-Bhavana
67% match
Loading thumbnail…

ICE 5

This example visualizes the spatial layout of an ice sheet using a satellite-style base image embedded within an SVG. The image is applied as a pattern and rendered over a light gray background, creating a static map-like view. The implementation uses D3 v5 to load the data and Vue to manage the application structure, with the final output drawn as SVG elements. No interactive or animated behaviors are present; the visualization simply displays the geospatial pattern as a fixed image.

Kkottenikhil
67% match
Loading thumbnail…

ICE 5

This example displays a hand-drawn SVG snowflake in the center of the page, along with a title, author name, and a message about the loaded data. The page uses D3 v7 to fetch a CSV file containing a houses dataset, then formats the data to display its size in kilobytes, row count, and column count. The SVG is rendered as a static image, while the data summary appears in a styled `<pre>` element, demonstrating D3’s `d3.csv` and `d3.csvFormat` functions for data loading and inspection.

Vvegurusaiprathyusha
67% match
Loading thumbnail…

ICE 5 NIKHIL

This visualization presents a simple data summary for a cereal dataset, displaying the dataset's size in kilobytes, row count, and column count in large, centered text. The page loads a CSV file from a GitHub gist using D3's `d3.csv` method, then calculates and formats the summary with `d3.csvFormat`. The interface also includes a static SVG panda image, styled with custom CSS for a colorful coral background and purple header, showcasing a basic data-loading example within a React framework.

NNikhilMakkena
67% match