sakethpapareddy@gmail.com

@Papareddy-saketh·17 public vizzes

ICE 8 2.1

This interactive network graph visualizes the connections among programming languages, project categories (Web Dev, AI/ML, Games), and the central "Programming" hub. The SVG layout is computed by d3.forceSimulation with d3.forceLink for link constraints, d3.forceManyBody for repulsion, and d3.forceCenter to keep nodes centered. Nodes are colored by group using d3.scaleOrdinal with d3.schemeCategory10, and the drag API binds user interaction to pin dragged nodes.

Nov 10, 2025

Loading thumbnail…

ICE 8 2

This tree visualization displays a hierarchical taxonomy of programming languages organized by paradigms and use cases across three or more levels. Built with D3 v7 and React, the diagram uses d3.hierarchy and d3.tree layout with linkHorizontal paths to draw branching connections. Nodes are distinguished by depth: the root appears as a diamond, internal nodes as rounded rectangles, and leaves as circles, with color coding via d3.scaleOrdinal. Interactive labels identify each language while SVG rendering provides crisp output on a light background.

Nov 10, 2025

Loading thumbnail…

ICE 8

A world choropleth built with D3 v7 and React renders population figures from a CSV of 2023 estimates onto an Equirectangular projection using `d3.geoPath` and topojson country boundaries. A sequential blue color scale encodes each nation’s population in millions, with gray for missing data. Hovering a country reveals a tooltip with its name and population value, while name aliases reconcile common CSV labels to the topojson’s official names.

Nov 10, 2025

Loading thumbnail…

ICE 8-1.2

This choropleth map displays the crime rate per 100,000 people across U.S. states, using a sequential blue color scale where darker shades indicate higher rates. Hovering over a state reveals a tooltip with the exact value, while states without matching data appear gray. The visualization loads CSV data and U.S. TopoJSON boundaries, then renders them as SVG paths via `d3.geoPath` with an Albers USA projection. It uses D3 v7 for data binding, color encoding, and interactive tooltips, with state names normalized and matched against FIPS codes for labeling.

Nov 10, 2025

Loading thumbnail…

ICE 7 Q3

This visualization shows the relationship between students’ math scores and their average reading scores, using an area chart with a smooth monotone curve. The chart plots math scores on the x-axis and average reading scores on the y-axis, with a semi-transparent teal area beneath a line to emphasize the trend. The code loads a CSV dataset via `d3.csv`, processes it with `d3.rollups` to compute mean reading scores per math score, and renders the result using `d3.area` and `d3.line`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, all displayed in an SVG container.

Oct 28, 2025

Loading thumbnail…

ICE 7 Q2-2

This visualization displays the relationship between students' math scores and their average reading scores. A monotone cubic interpolation curve shows the trend, with a subset of data points highlighted. The code loads a CSV dataset, groups records by math score using `d3.rollups`, and computes the mean reading score for each group. Axes, labels, and the title are rendered using `d3.axisBottom`, `d3.axisLeft`, and SVG `text` elements, with scales defined by `d3.scaleLinear`.

Oct 28, 2025

Loading thumbnail…

ICE 7 Q2-1

A donut chart shows the distribution of student test preparation course completion, with slices labeled by percentage. The visualization uses D3 v7's `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the `schemeSet2` color palette, rendering in SVG. Data loads from a CSV of student performance records and is aggregated with a custom `countBy` helper. A legend displays category counts, and labels only appear for slices exceeding 6% of the total.

Oct 28, 2025

Loading thumbnail…

ICE 7 Q1

This scatter plot shows the relationship between math and reading scores, with points colored by gender. The visualization uses d3.csv to load performance data, then builds a reusable scatterPlot function that creates linear scales for both axes and an ordinal color scale with d3.schemeSet2. SVG circles are rendered with axes, labels, and a title, all positioned within a margin-based layout. The chart leverages d3.autoType for data parsing and d3.axisBottom and d3.axisLeft for the coordinate system.

Oct 28, 2025

Loading thumbnail…

ICE 6 -3

This chart compares student math and reading scores for a filtered subset of students. Light blue bars show math scores for each student, while a smooth tomato-colored line, drawn with a monotone curve, connects reading scores across the same index axis. The SVG visualization uses D3 v7's scaleBand and scaleLinear for positioning, with axisBottom and axisLeft for labels, and includes interactive tooltips on the bars and line points. The data comes from a CSV file of student performance, loaded via d3.csv with autoType.

Oct 20, 2025

Loading thumbnail…

ICE 6 -3

This example shows a multi-series line chart comparing math, reading, and writing scores across sampled students, with interactive hover tooltips displaying exact values for each score type. The visualization uses D3 v7 to load CSV data from a GitHub gist, downsamples every 10th record, and renders the series with `d3.line` and `d3.curveMonotoneX` on an SVG canvas. Horizontal gridlines, a legend, and axes are generated via `d3.axisLeft` and `d3.axisBottom`. Three colored lines—steelblue, tomato, and seagreen—represent the respective subjects, with hover circles attached via `mouseover` events to populate the tooltip div.

Oct 20, 2025

Loading thumbnail…

ICE 6 -2

This scatterplot compares math and reading scores for individual students, plotting each as a semi-transparent steelblue point. The visualization reveals the correlation between the two subjects across the dataset. It uses D3 v7 with an SVG rendering approach, loading CSV data from a GitHub gist and applying linear scales via `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while labels and a title are added as SVG text elements.

Oct 20, 2025

Loading thumbnail…

ICE 6 -1

This visualization displays the average popularity of songs across different genres, sorted from highest to lowest. The code uses D3 v7 to load CSV data, roll up the dataset with `d3.rollups`, and compute mean popularity per genre. Bar heights are mapped with `d3.scaleBand` and `d3.scaleLinear`, rendered as SVG rectangles, with axes from `d3.axisBottom` and `d3.axisLeft`. The chart is titled and rendered entirely in SVG.

Oct 20, 2025

Loading thumbnail…

IC6

This visualization, part of a student performance analysis, uses D3 v7 to render two SVG charts. The first is a multi-series line chart showing how average math, reading, and writing scores trend with binned math ability, using `d3.scaleLinear` and a monotone curve. The second is a combined bar and line chart, built with `d3.rollups`, displaying score distributions across parental education levels. Data is loaded from a CSV Gist, with a categorical color scale and grid lines for clarity.

Oct 20, 2025

Loading thumbnail…

Assignment 6

This visualization shows the top 10 music genres ranked by average popularity score, using horizontal bars sorted from highest to lowest. The code loads a CSV dataset via `d3.csv`, aggregates popularity means with `d3.rollups`, and renders an SVG bar chart using `d3.scaleBand` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and rotated genre labels improve readability. The bar chart uses steelblue rounded rectangles to compare genre popularity at a glance.

Oct 17, 2025

Loading thumbnail…

Data Visualization viz

The visualization loads a CSV sample of songs and presents a data summary with row and column counts, then renders an SVG scatter plot of Year versus Energy, with circle size encoding popularity. Hovering reveals artist, song, year, energy, and popularity details. The code uses D3 v7's `d3.csv` to fetch and parse data with type inference, and `d3.select` to build the chart. A preview shows the first five rows formatted as JSON. The dark-themed interface includes KPI cards and a source link to the raw dataset.

Oct 5, 2025

Loading thumbnail…

Fork of HTML Starter

This example demonstrates the end-to-end process of loading a remote CSV dataset and generating a data-driven SVG visualization. The page presents key statistics, a preview table of the first five rows, and a custom SVG plot where each mark represents one CSV row, with shape and color mapped to the category column and position determined by row index and value. The implementation uses D3.js v7 to fetch and parse the data with `d3.csv` and `d3.autoType`, then dynamically builds the table and SVG elements using JavaScript DOM manipulation and the SVG API.

Oct 4, 2025

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot visualizes Fisher’s Iris dataset, comparing sepal length and width across three species of iris flowers. The chart uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to map quantitative dimensions and species colors, with points rendered as SVG circles. Hovering over legend items highlights the corresponding species by raising matching points and fading others, driven by shared state managed through a `ResizeObserver` for responsive layout.

Oct 4, 2025