Skip to main content
SimilarExport ZIP
100%

ICE9 Multi page website

✓ Published1🌍 Public
Ssrujana reddy
Last edited Nov 15, 2025
Created on Nov 15, 2025
Forked from D3 Starter

This multi-page visualization site presents a series of charts that explore encoding techniques and temporal trends in shipment data. The pages demonstrate how color and size encode categorical variables, how grouped and stacked bar charts analyze shipment weights, and how stacked area and line charts reveal delivery time variations. Built with static HTML and CSS, the site uses image files for each chart, such as `Chart4.png`, `Chart5.png`, and `Chart6.png`. The interface provides navigation cards for exploring the different visualization types, and the charts display data from shipment records by origin city and shipping method.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 5_Assignment

This example analyzes a shipping dataset from a Gist CSV and presents a multi-view dashboard. It displays a table of the first ten records, a text summary of key statistics, a bar chart of shipments by shipping method, and a scatter plot of weight versus delivery time. The visualizations are built with D3.js v7, using `d3.csv` for data loading and the `scaleBand`, `scaleLinear`, and axis APIs to generate SVGs. A decorative SVG cargo ship illustration is also included, with the page styled using custom CSS.

Ssrujana reddy
78% match
Loading thumbnail…

ICE9 Visualization - Manisha Konudula

This visualization gallery demonstrates a progression of chart types, starting with a first chart that uses color and size encodings to represent data dimensions. It then presents a grouped bar chart and a stacked bar chart to compare categorical data and part-to-whole relationships. The collection concludes with a stacked area chart and a multi-line chart for showing trends over time. The example is built with simple HTML pages that link to static PNG images, relying on standard web technologies rather than a JavaScript visualization library.

Kkonudulamanisha@gmail.com
77% match
Loading thumbnail…

ICE 6

A dark-themed dual-axis chart combines monthly visitor counts as cyan bars with conversion rates as a coral line, both plotted across twelve months from a CSV file. React manages state and lifecycle, while D3 v7 scales (`scaleBand`, `scaleLinear`) map the data; a `line` generator with `curveMonotoneX` smooths the conversion trend. The visualization includes value labels, gridlines, and separate left/right axes with formatted tick labels, all rendered as SVG elements.

Aaravindsg99@gmail.com
72% match
Loading thumbnail…

ICE-5

The visualization presents a static summary of sales data, displaying four colored bars that compare revenue figures against a white baseline. The page includes a gradient background with a data overview section showing total records, total revenue, total units sold, and the list of regions. The code fetches a CSV file from a GitHub gist using `d3.csv`, then computes aggregate values with `d3.sum` before rendering both the SVG bar chart and the summary text dynamically via JavaScript.

Sshreshnaanugu@gmail.com
70% match
Loading thumbnail…

Ice7Q2

This example presents a pie chart that visualizes the distribution of total shipping weight by shipping method. The chart is rendered using scalable vector graphics and includes an interactive tooltip that appears on hover, displaying the method and its aggregated weight. The data is loaded from a CSV file and aggregated using `d3.nest()` and `d3.sum()`. The visualization uses `d3.layout.pie()` for the pie layout, `d3.svg.arc()` for the slices, and `d3.scale.category10()` for coloring. A legend is generated from the aggregated data, and all elements are drawn within an SVG container.

Ssrujana reddy
70% match
Loading thumbnail…

ICE 7

A monthly area chart displays website visit counts from a CSV file across the year 2024. The visualization uses D3 v7's `d3.area`, `d3.scaleTime`, and `d3.scaleLinear` to render a smooth blue-filled region with data points and value labels. The SVG rendering includes axes with month and visit labels, leveraging `d3.axisBottom` and `d3.axisLeft` with custom time formatting.

Aankitgoudpoodhari07@gmail.com
70% match
Loading thumbnail…

ICE Assignment 5

This visualization displays a loading summary for a color hex dataset, showing the file size in kilobytes, the number of rows, and the number of columns. It uses D3 v7's `d3.csv` and `d3.csvFormat` to fetch and measure the data before rendering the results in an HTML `<pre>` element. The page features large aqua and blue heading styles to present the ICE assignment title and computed statistics.

VVenkata Rajashekar Reddy Chinthala
69% match
Loading thumbnail…

ICE

This animated scatter plot visualizes simulated traffic accident data, showing the relationship between the number of vehicles and two alternating x-axes: speed limit and driver experience. The reusable chart, built with D3 v7, uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.symbol` to render colored shapes representing weather and road type. Every three seconds, a `setInterval` callback switches the x-axis accessor, updating the title and re-rendering the SVG with smooth transitions. The data loads from a GitHub-hosted CSV file with numeric fields parsed for quantitative scaling.

Ppragnyalipsa96@gmail.com
69% match