H

Harshithmullapudi@my.unt.edu

@Harshithmullapudi2025·16 public vizzes

Loading thumbnail…

map ice 8

This example visualizes the unemployment rate across Indian states by displaying a map of India generated from the World Atlas TopoJSON dataset and projecting it with `d3.geoMercator`’s `center` and `scale` settings. Colored circles, sized with a square-root scale, mark each state’s capital, with a tooltip showing the precise rate on hover. The map itself is drawn with `d3.geoPath` and SVG, while a legend explains the circle-size encoding. The data is a hard-coded 2025 sample in the source.

Loading thumbnail…

ICE-8 Tree Visualization

This visualization presents an animal classification hierarchy as a vertical tree structure using D3 v7 and SVG. The tree displays three main groups—mammals, birds, and reptiles—with subcategories and individual species examples beneath each branch. The code builds the hierarchy with d3.stratify and positions nodes using d3.tree, with d3.linkVertical generating curved paths to connect parent and child nodes. Node circles are color-coded by depth, and the data comes from an embedded array of parent-child relationships.

Loading thumbnail…

ICE-8 India Map

This example displays a static map of Mexico’s states, rendered as light blue polygons with dark navy borders on a white background. It uses D3 v7 and TopoJSON to load and convert the `MEX_adm1` states dataset, then applies a geoMercator projection and `d3.geoPath` to draw the SVG paths. A text label below the map identifies the projection and libraries used, while the styling and layout are defined through inline HTML and CSS.

Loading thumbnail…

v

This visualization presents two choropleth-style map examples: a world map using the Natural Earth projection and a United States map using the Albers USA projection, both rendered as SVG with D3 v7 and TopoJSON. The world map displays countries from the `world-atlas@2` dataset with a graticule overlay, while the US map shows states from `us-atlas@3`. The code uses `d3.geoNaturalEarth1`, `d3.geoAlbersUsa`, `d3.geoPath`, and `topojson.feature` to project and draw geographic features from remote TopoJSON files.

Loading thumbnail…

ice 8 india country

This visualization shows a map of India where each state is rendered as a 3D extruded column, with the column height representing a data value from the v3 dataset. The code uses Three.js to construct the 3D geometry and applies a color gradient to each state based on its value. The geographic boundaries are derived from GeoJSON data, and the scene is rendered with a rotating camera to provide a dynamic view of the spatial distribution across the country.

Loading thumbnail…

ICE-8 World Map

This visualization displays a world map using a Natural Earth projection, rendering each country as a distinct SVG path colored in a muted green with thin gray borders. It loads world country boundaries in TopoJSON format from the world-atlas package, converts them to GeoJSON using the topojson library, and draws them with d3.geoPath. The map is centered and scaled within a 960-by-500-pixel SVG canvas.

Loading thumbnail…

icea 7 Harshith Mullapudi

This area chart displays global population growth from 1950 to 2020, using a shaded blue region to emphasize the upward trend. Built with D3.js v7, the code creates an SVG and uses `d3.area` to generate the area path, with `d3.scaleLinear` for the x and y axes. Axis ticks are added via `d3.axisBottom` and `d3.axisLeft`, while the data is plotted in millions, sourced from a hardcoded array of eight data points.

Loading thumbnail…

ice 7 Harshith Mullapudi

A line chart displays population growth from 1950 to 2020 using an inline dataset with seven decennial data points. The visualization uses D3.js v7 to construct an SVG, with `d3.line` generating the path, `d3.scaleLinear` mapping years and population values, and `d3.axisBottom` and `d3.axisLeft` rendering the axes. The chart also includes axis labels and a steelblue line, presented within a styled container.

Loading thumbnail…

ICE-7 Harshith Mullapudi

This scatter plot shows the relationship between horsepower and miles per gallon for a small set of six cars, using a reusable chart function built with D3.js v7. The SVG rendering includes linear scales for both axes, axis labels, and semi-transparent steelblue circles. The code demonstrates a custom `scatterPlot()` function that returns a chart closure, handling margins, scales, and axes internally, then applies it via `selection.datum()` and direct function invocation. The dataset is embedded in the script, and the visualization explicitly labels its axes with “Horsepower” and “Miles per Gallon.”

Loading thumbnail…

ICE-6 Multi-Series Chart – Fruits Weight & Price

This multi-series chart compares the average weight and average price of ten fruits. The visualization encodes weight as steelblue vertical bars plotted against the left y-axis, while price is shown as a crimson line connected by points scaled to the right y-axis. The chart uses D3.js v7 with SVG rendering, employing `scaleBand` for the categorical x-axis, dual `scaleLinear` axes for the y-axes, and the `d3.line` function for the price series. The data is hardcoded in the script, and hover effects are applied to the bars.

Loading thumbnail…

ICE-6 Scatter Plot – Fruits Average Weight

This scatter plot visualizes the average weight of various fruits, with each fruit positioned along the y-axis and its weight plotted on the x-axis using a linear scale. Circles are colored by fruit color via d3.scaleOrdinal and d3.schemeCategory10, with hover tooltips implemented through SVG title elements. The visualization loads data from a remote CSV file using d3.csv, and employs d3.axisBottom and d3.axisLeft to render axes with fruit names as y-axis tick labels.

Loading thumbnail…

ICE-6 Bar Chart – Fruits Average Weight

This bar chart displays the average weight of different fruits, using a dataset loaded from a CSV file hosted on GitHub. Each fruit is represented by a steel-blue rectangle that turns orange on hover, with rotated labels on the x-axis for readability. The visualization is built with D3 v7, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.axisBottom` and `d3.axisLeft` to render the axes. The chart is rendered as an SVG element with margins and labeled axes showing fruit names and weight in grams.

Loading thumbnail…

Harshith Mullapudi ice 5

This example visualizes a fruits dataset by displaying summary statistics, a preview table of the first five records, and decorative SVG circles labeled with fruit names. The page uses the D3.js v7 library to fetch and parse a CSV file from a GitHub Gist via `d3.csvParse`, then calculates a summary of total fruit types and record counts. D3 selections, `data().enter()` methods, and chained `append()` operations render the headers and rows of the preview table. The accompanying HTML markup defines five colored circles in an SVG canvas, while the CSS styles the page with a warm orange theme and responsive table layout.

Loading thumbnail…

Fruits Dataset Summary

This example presents a static summary of a small fruits dataset, displaying file size, row count, and column count alongside a table of fruit names, colors, and average weights. An inline SVG circle provides simple decorative imagery, while the dataset is rendered directly in HTML. The visualization relies on basic HTML elements, a static SVG circle, and a CSS rule for a message class, with no JavaScript frameworks or interactive features present.

Loading thumbnail…

Fork of Fruits Dataset Summary

This visualization summarizes a fruits dataset, showing its file size, row count, and column count in a simple summary card. It also displays a preview of the first five rows in a table generated with D3.js v7. The example uses `d3.csvParse` to load data from a GitHub gist, then computes the file size with the Blob API. An SVG circle is included as a decorative element. The page fetches the CSV asynchronously using `fetch` and renders the table with D3 selections.

Loading thumbnail…

Fruits Dataset Summary

This example displays a static webpage that presents a "Fruits Dataset Summary." The visualization consists of a centered, large-font text message reading "Hello HTML!" styled with CSS. The implementation uses a minimal HTML structure (index.html) paired with an external stylesheet (styles.css) and a JavaScript file (index.js) that currently only logs "hello world" to the console. No data or charting libraries are employed, and the dataset itself is not visualized in the current code.