koushika.3002@gmail.com

@KoushikaMuddana·10 public vizzes

Fork of first

This visualization compares early career pay against mid career pay for the top eight universities by mid-career salary, with circle size representing absolute salary growth and color encoding the university’s state. Data is loaded as CSV from a GitHub repository via `d3.csv`, then filtered, sorted, and sliced. The SVG chart uses `d3.scaleLinear` for both axes, `d3.scaleSqrt` for bubble size, and `d3.scaleOrdinal` for categorical state colors, rendered through D3 v7 with axes, tick formatting, and an interactive tooltip.

Apr 24, 2026

Loading thumbnail…

Fork of SVG Fundamnetals

This D3.js heatmap visualizes US minimum wage data across states and years, using a dropdown to switch between four wage metrics including effective minimum wage and federal minimum wage. The SVG-based visualization renders colored rectangles positioned by `d3.scaleBand` for both axes, with color mapping via `d3.scaleSequential` and the Turbo interpolator. Hovering over a cell triggers a tooltip displaying the state, year, and exact wage value. The chart pulls CSV data from a GitHub-hosted dataset and includes axes styled with `d3.axisLeft`.

Apr 24, 2026

Loading thumbnail…

Fork of first

This interactive bubble chart visualizes student academic stress levels, grouped by study environment (Peaceful, Noisy, Disrupted, Unknown). Color encodes the stress index via a threshold scale (green, yellow, red), while circle radius scales with the stress value. A dropdown filters by academic stage. Built with d3.v7, it uses `d3.forceSimulation`, plus the `forceX`, `forceY`, and `forceCollide` forces to cluster data points. A tooltip reveals detailed pressure metrics on hover. The data is loaded from a raw CSV file.

Apr 24, 2026

Loading thumbnail…

Fork of Fork of D3 Starter

This visualization displays student academic stress levels as a force-directed bubble cluster, with each circle representing an individual student. Users can filter by academic stage via a dropdown menu. Bubble color encodes stress intensity using a threshold scale (green, yellow, red), while bubbles cluster by study environment category (peaceful, noisy, disrupted, unknown). Implemented with d3.csv, d3.forceSimulation, d3.forceX/Y, and d3.forceCollide, the SVG rendering includes interactive tooltips showing stress, peer pressure, and home pressure details. Data is loaded from a remote CSV dataset hosted on GitHub.

Apr 24, 2026

Loading thumbnail…

Iris Sepal vs Petal Length Scatter Plot

This scatter plot visualizes the classic Iris dataset, comparing sepal length against petal length for three iris species. Each species—setosa, versicolor, and virginica—appears as a distinct colored cluster, with red, blue, and green points respectively. The visualization uses Chart.js to render the plot on an HTML canvas, fetching the CSV data from a GitHub Gist. The chart displays clear separation between species, particularly highlighting how petal length distinguishes the groups, while providing labeled axes for both measurements.

Mar 8, 2026

Loading thumbnail…

Multi-Series Line Chart

This example presents two linked visualizations of the Iris flower dataset, loaded from a raw CSV file. The first is a multi-series line chart plotting sepal length, sepal width, and petal length across sample indices, with each series distinguished by a different border color. The second combines a bar series for sepal length with a line series for petal length in a single chart. Both use Chart.js to render onto separate Canvas elements, with explicit axis titles and chart titles configured through the plugin and scale options.

Mar 8, 2026

Loading thumbnail…

Student scores bar chart

This bar chart displays the scores of individual students from a CSV file, using vertical steel-blue bars to show each score on a linear scale. The chart loads data from a remote CSV URL with `d3.csv` and renders the visualization in SVG. It uses `d3.scaleBand` for the student categories along the x-axis and `d3.scaleLinear` for the score values on the y-axis. Rotated x-axis labels and left-aligned axis ticks improve readability, with axes generated via `d3.axisBottom` and `d3.axisLeft`.

Mar 8, 2026

Loading thumbnail…

Fork of ICE5_Shapes_of_Data_Koushika

This scatterplot shows the relationship between study hours and GPA for individual students, with each steelblue circle representing one record. The visualization uses D3 v7 to load CSV data from a GitHub gist, scales the x-axis by study hours and y-axis by GPA (0–4), and renders axes with labels. The code also displays summary statistics—total records, maximum study hours, and maximum GPA—appended as text paragraphs via D3 selections.

Mar 1, 2026

Loading thumbnail…

ICE5_Shapes_of_Data_Koushika

This example displays the text “Hello D3” at a massive 14em font size, centered on the page. It demonstrates the simplest possible D3 setup, where the index.html file loads D3 v7 via an import map and the index.js module uses the `select` function to target the body element. The code then calls the `.text()` method to replace the page content with the greeting. It serves as a minimal starter template, highlighting basic DOM manipulation with the d3-selection API and modern ES module imports.

Mar 1, 2026

Loading thumbnail…

Fork of React & D3 Starter

This scatterplot visualizes the relationship between study hours and GPA, with each data point represented as a steel-blue circle. The visualization loads a CSV file, converts the study hours and GPA columns to numeric values, and maps them to x and y coordinates using `d3.scaleLinear` functions. It relies on the D3.js library through a React component, drawing the circles directly to an SVG canvas via methods like `d3.select`, `d3.csv`, and `.append`. The x-axis spans zero to twelve hours, while the y-axis covers zero to four for GPA.

Mar 1, 2026