AbhiramPudi@my.unt.edu

@PudiAbhiramReddy·14 public vizzes

ICE-8 Visualizing tree

This example visualizes a hierarchical file system as an interactive tree diagram, with nodes colored by type: orange for the root drive, blue for folders, and green for files. The flat dataset is converted into a hierarchy using `d3.stratify()`, then laid out with the `d3.tree()` layout. SVG paths draw curved links between parent and child nodes, while circle and text elements label each entry. The layout positions nodes horizontally by depth, with collapsible behavior implied through cursor styling.

Nov 9, 2025

Loading thumbnail…

ICE-8 Simple World Map

This example displays a simple world map using a Natural Earth projection, with countries rendered as green-filled SVG paths with white borders over a light blue ocean background. It also shows latitude and longitude lines as a graticule overlay. The visualization loads TopoJSON country boundaries from the `world-atlas` package via `d3.json`, converts them to GeoJSON with `topojson.feature`, and draws them using `d3.geoPath` with the projection scaled by `fitSize`. The code uses the D3 v7 and d3-geo-projection libraries, with hover tooltips showing country names from the data properties.

Nov 9, 2025

Loading thumbnail…

ICE-8 Network

This interactive network visualization maps relationships among Greek mythological figures, using node size to represent power and color to distinguish character types such as Titans, Olympians, and Gods. The example builds the graph with d3.forceSimulation, applying forceLink, forceManyBody, and forceCenter to position nodes, and renders nodes and links as SVG elements. Draggable nodes and hover effects provide interaction, while the dataset is defined inline within the page.

Nov 9, 2025

Loading thumbnail…

ICE-8 - Choropleth map - GDP per capita

This choropleth map visualizes global GDP per capita using a logarithmic color scale, with countries colored from dark to light based on economic output. Hovering over any country reveals a tooltip showing its name and exact GDP value. The visualization uses D3 v7 with `d3.geoNaturalEarth1` projection and `d3.geoPath` to render world geography from TopoJSON data, while `d3.scaleSequentialLog` with the Plasma interpolator handles color encoding. A graticule layer and interactive legend complete the SVG-based rendering.

Nov 8, 2025

Loading thumbnail…

ICE_8_maps

This example presents a basic world map rendered as an SVG using D3.js version 7 and the TopoJSON client library. The visualization displays country borders as geographic paths, created with the `d3.geoPath` projection from TopoJSON data loaded via `topojson-client`. The interface shows a single titled view inside a chart container, highlighting a straightforward representation of global landmasses without additional interaction or data layers. The code relies on D3’s map projection utilities to translate geographical coordinates into the 960×520 viewBox.

Nov 8, 2025

Loading thumbnail…

ICE_7_Area_chart

This area chart shows the trend of total global video game sales per year from 1980 onward, with a filled steelblue shape that highlights the growth over time. Built with D3, the code uses `rollup` and `sum` to aggregate the sample CSV data by year, then `scaleLinear` for both axes. The `area` generator creates the SVG path, while `axisBottom` and `axisLeft` render the axes. Data is sourced from a gist URL.

Oct 27, 2025

Loading thumbnail…

ICE_7_Line_chart

This D3.js line chart visualizes the trend of total global video game sales (in millions) per year, aggregating a CSV dataset by summing sales for each year after 1980. The chart uses `d3.select`, `d3.csv`, `d3.rollup`, and `d3.sum` for data loading and aggregation, then `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.line` to generate the SVG path. The rendered SVG includes styled axis labels, a title, and a steelblue line.

Oct 27, 2025

Loading thumbnail…

ICE_7_piechart

A pie chart displays the proportion of global video game sales by genre from a CSV file, with sales aggregated via the D3 `rollup` and `sum` functions. The chart uses `d3.pie` to generate slice angles and `d3.arc` to create SVG paths, while `d3.scaleOrdinal` with `schemeCategory10` assigns colors. The visualization includes genre labels inside slices and a legend showing each genre with its total sales in millions.

Oct 27, 2025

Loading thumbnail…

ICE_7 Scatter Plot

This animated scatter plot uses D3.js to visualize relationships among numeric car attributes, cycling through pairs of columns like horsepower, price, curb weight, city mpg, engine size, and highway mpg every 3.5 seconds. Circles are colored by drive wheel type via a categorical scale, with axes, labels, and a title updating smoothly through D3 transitions. The data comes from a remote CSV file, and the visualization fills the browser window, using D3 scales, axes, and ordinal color encoding to render the SVG animation.

Oct 27, 2025

Loading thumbnail…

3.Combined chart ICE-6

This combined chart displays the average car price as teal bars and average horsepower as a magenta line and dots, grouped by cylinder count, with labels for the bar values. The visualization uses React hooks to load and aggregate CSV data with d3.csv and d3.rollup, then renders an SVG via D3 v6 scales, axes, and a line generator. Grid lines, a dual y-axis, and hover effects on bars and dots are included in the dark-themed layout.

Oct 18, 2025

Loading thumbnail…

2. scatter plot ICE -6

This scatter plot visualizes the relationship between age and exercise-induced ST depression (oldpeak) from the UCI heart disease dataset, with green and red points distinguishing patients without and with disease. The React app loads CSV data via d3.csv, maps values using d3.scaleLinear, and applies d3.scaleOrdinal for categorical coloring. Axes are rendered with d3.axisLeft and d3.axisBottom, while the SVG rendering includes hover tooltips and a legend.

Oct 18, 2025

Loading thumbnail…

1. Bar Plot ICE -6

This visualization displays the top 15 best-selling video games by global sales, shown as horizontal bars with length encoding sales volume and sequential blue color encoding relative magnitude. It uses React with D3 v5 scales (scaleBand, scaleLinear, scaleSequential) and loads CSV data from a Gist URL. Each bar includes hover effects, a tooltip showing sales in millions, and value labels, with a title, axis label, and grid lines rendered as SVG elements.

Oct 18, 2025

Loading thumbnail…

Abhiram_SDV_ICE_5

This interactive dashboard visualizes the relationship between horsepower and manufacturer's suggested retail price (MSRP) for popular car models. A scatter plot displays each vehicle as a dot, with the price on the x-axis and horsepower on the y-axis, alongside a summary panel showing dataset statistics such as total models and average values. Built with D3 v7, the visualization uses `d3.csv` to load data, `d3.scaleLinear` and `d3.extent` for scaling, and renders SVG circles with hover effects. The layout is structured with HTML and CSS flexbox.

Oct 6, 2025

Loading thumbnail…

Fork of HTML Starter

This interactive HTML starter demonstrates a simple web page with a large animated greeting message. The display shows the text "Hello HTML!" centered on a blank background, featuring a fade-in animation and interactive feedback. Built with vanilla HTML, CSS, and JavaScript, the implementation uses event listeners for click and hover actions, toggling the message color between dark blue and red while applying a CSS scale transform on mouse hover. The styling includes custom CSS keyframe animations and text-shadow properties.

Oct 6, 2025