SaiSriSuryaBandaru@my.unt.edu

@bandaru-surya·10 public vizzes

Q2_ice8

This visualization presents vehicle hierarchies and relationships using two side-by-side D3.js v7 SVG views. The left panel displays a tree layout constructed with `d3.hierarchy` and `d3.tree`, grouping vehicles into Land, Air, and Water categories with colored links and node depths. The right panel shows a force-directed network built with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, connecting vehicle companies like Tesla, Toyota, and SpaceX. Draggable nodes and labeled edges illustrate collaborations, with all styling handled through inline SVG attributes and CSS classes.

Nov 9, 2025

Loading thumbnail…

Q1_Ice8

This choropleth map visualizes world population data by country, using a Plasma color scale to represent population magnitudes. Built with D3 v7 and TopoJSON, it loads countries-110m.json and a CSV population dataset, then renders each country as an SVG path via `d3.geoPath` with a Natural Earth projection. Hover interactions trigger a tooltip displaying country name and population, while a color legend explains the scale. Countries without data appear gray, and the map refreshes with smooth transitions.

Nov 9, 2025

Loading thumbnail…

Question4_Ice7

This visualization shows temperature trends over time for multiple cities using overlapping area charts. Each city’s temperature series is rendered as a filled, semi-transparent region with a colored stroke, and a legend identifies each city. The chart loads CSV data from a GitHub gist, converts dates to JavaScript Date objects, and draws the areas with `d3.area()` using a monotone curve, with scales set by `d3.scaleTime()` and `d3.scaleLinear()`. Axes are added via `d3.axisBottom()` and `d3.axisLeft()`, and colors come from `d3.schemeTableau10`.

Oct 28, 2025

Loading thumbnail…

Qestion3_Ice7

This multi-line chart displays daily temperature variations across several cities, with each city represented by a colored line and identified through a legend. The visualization uses D3.js v7 to load CSV data from a remote GitHub gist, parse dates with `d3.csv` and `d3.autoType`, and render SVG paths using `d3.line` with a monotone X curve. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while `d3.scaleTime` and `d3.scaleLinear` map dates and temperatures. A Tableau10 color palette distinguishes city groups via `d3.scaleOrdinal`.

Oct 28, 2025

Loading thumbnail…

Question2_Ice7

This visualization presents a pie chart of the top eight football players by goal count, using data from a CSV file. Each slice is labeled with the player's name, and a legend details each player alongside their total goals. The chart is built with D3.js v7, employing `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the `schemeTableau10` color palette. The SVG rendering positions labels at each arc's centroid, while the legend uses `d3.csv` to load and sort the data.

Oct 28, 2025

Loading thumbnail…

Question1_Ice7

A scatter plot displays weather data for multiple cities, showing the relationship between temperature and humidity. Each point is color-coded by city, with tooltips revealing additional details like rainfall and wind speed. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and interactive mouse events to trigger tooltips, with data loaded from a remote CSV file.

Oct 28, 2025

Loading thumbnail…

Q3_Ice6

This visualization presents daily weather data through two D3.js v7 SVG charts: a multi-series line chart and a combined chart. It uses `d3.csv` to load data, `d3.rollups` with `d3.mean` to aggregate values by date, and `d3.line` with a monotone curve to render temperature, humidity, and rainfall trends over time. The line chart includes gridlines, axes, and a legend, while the second chart combines multiple mark types. Data is sourced from a remote CSV file containing date, temperature, humidity, rainfall, and wind speed columns.

Oct 20, 2025

Loading thumbnail…

ScatterPlot_Ice6

This scatter plot visualizes Amazon sales data, showing the relationship between Total Revenue and Total Profit. Each circle represents a country, positioned by revenue and profit, with its size encoding Units Sold and its color encoding the sales Region. The D3.js code loads a remote CSV, uses `d3.scaleLinear` for axes and `d3.scaleSqrt` for sizing, and renders interactive tooltips on mouseover. A legend and animated hover transitions enhance the presentation.

Oct 20, 2025

Loading thumbnail…

BarChart_Ice6

This bar chart visualizes football player statistics, showing goals scored by individual players from a dataset of 130 samples loaded via `d3.csv`. Players are sorted in descending order by goals, with each bar’s height encoding goal count (y-position) and color encoding team membership through a `d3.scaleOrdinal` with `d3.schemeTableau10`. The chart uses SVG rectangles as marks, with axes generated by `d3.axisBottom` and `d3.axisLeft`. A gradient background and decorative circles frame the visualization, while the title and axis labels are added directly to the SVG.

Oct 20, 2025

Loading thumbnail…

ICE-5

This visualization explores Amazon sales data through an interactive dashboard built with D3.js. It begins with a summary section displaying key metrics like total sales, order count, and top product. The analysis presents a bar chart of sales by category using `d3.scaleLinear` and `d3.scaleBand`, alongside a line chart tracking sales over time with `d3.scaleTime` and `d3.curveMonotoneX`. All charts are rendered as SVG elements, with data loaded from an external CSV file via the `fetch` API and parsed using `d3.csvParse` and `d3.autoType`.

Oct 5, 2025