S

saisowjanyaedupuganti.24f@gmail.com

@saisowjanyaedupuganti·23 public vizzes

Loading thumbnail…

Assignment_8_sowjanya_Network Visualization

This network visualization displays cities and the weighted routes between them. It loads comma-separated values from two GitHub-hosted files—one for nodes, one for links—and renders them as an interactive force-directed graph. The layout is computed using `d3.forceSimulation` with link, many-body charge, center, and collision forces. Users can drag nodes, and hovering reveals a tooltip showing the city ID and regional group (`NA`, `EU`, `AS`). The map is drawn as SVG, with node colors assigned via a `d3.scaleOrdinal` scheme and link thickness scaled by weight.

Loading thumbnail…

Network Visualization_Assignment_8

A force-directed network of cities and the routes between them. Nodes are colored by region and labeled with city names, while links visualize connections with line thickness scaled by route weight. Built with D3 v7, the layout uses `d3.forceSimulation` with forces for links, many-body repulsion, centering, and collision. Data is loaded from remote CSV files, and nodes can be dragged via `d3.drag`. The SVG rendering shows labels and tooltips on hover.

Loading thumbnail…

Assignment_8_sowjanya_tree

This hierarchical tree visualization displays a food-category dataset from a CSV file, organized by root, category, sub-category, and item layers. It uses `d3.stratify()` to build the hierarchy from flat "id,parent" data, then `d3.tree()` to compute the tidy layout. Nodes use distinct shapes and pastel colors per depth, with `d3.symbol()` generating circles, squares, diamonds, and triangles. The code renders links as horizontal paths, provides an interactive tooltip, and includes a legend. The visualization is rendered as an SVG canvas using D3 v7.

Loading thumbnail…

Assignment8_sowjanya_countryMap

A choropleth of the United States displays median age by state, using a pastel threshold color scale with seven bins ranging from under 32 to over 46 years. The visualization loads US Census-derived CSV data and TopoJSON state boundaries via `Promise.all`, then renders each state as an SVG `path` using `d3.geoPath` with the `geoAlbersUsa` projection. Hovering reveals a tooltip with the state name and median age, while a horizontal legend beneath the map shows the color breaks. The code relies on D3 v7 and the topojson-client library.

Loading thumbnail…

Assignment8_sowjanya_world map

This choropleth maps internet user percentages by country for 2023 using a pastel threshold color scale with custom class breaks. Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` render country boundaries over a graticule, with a custom tooltip showing values on mouseover. The visualization loads TopoJSON world geometry from world-atlas and CSV internet usage data, then applies the threshold scale to fill each country, accompanied by a horizontal legend. The map is built with D3 v7, rendering to SVG with HTML div-based tooltips.

Loading thumbnail…

Assignment_8_Making maps

This map of India displays city-level literacy rates as scaled green circles over a light green country outline. Each circle’s radius encodes the literacy percentage, with a small legend showing representative values. The visualization loads TopoJSON country boundaries from world-atlas and a CSV of city coordinates and literacy data, then projects them using `d3.geoMercator` and `d3.geoPath`. Circle sizes are computed with `d3.scaleLinear`, and tooltips are added via SVG `title` elements.

Loading thumbnail…

ICE 7_Area Chart_Sowjanya

This area chart visualizes solar radiation levels across the eight planets, ordered from Mercury to Neptune by their distance from the Sun. A smooth monotone curve connects the data points, with the area beneath filled using a vertical linear gradient that fades from semi-transparent blue to nearly transparent. The visualization uses D3 v7 APIs including `d3.scalePoint`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, `d3.curveMonotoneX`, and `d3.area`. Data is loaded from a remote CSV file containing planetary climate measurements, with hover tooltips displaying each planet’s exact radiation value in W/m².

Loading thumbnail…

Assignment_7_linechart_sowjanya

This line chart visualizes solar radiation levels across the eight planets, ordered from Mercury to Neptune. The graph shows a steep decline in radiation from the inner to the outer planets. Using D3 v7, the code loads CSV data, applies a monotone curve to create a smooth line, and renders interactive dots with tooltips. The chart uses `d3.scalePoint` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for ticks, with SVG output.

Loading thumbnail…

ICE7_sowjanya_piechart

This pie chart visualizes the share of solar radiation for top planets, with each slice’s size proportional to its value and labeled with a percentage when above 8%. The chart is rendered as an SVG using d3.pie(), d3.arc(), and d3.scaleOrdinal with Tableau10 colors, while a legend lists each planet’s value and percentage share. Data is loaded from a remote CSV via d3.csv(). The layout uses a two-column grid for the chart and legend, with slice labels positioned via arc.centroid.

Loading thumbnail…

ResuableScatterplot_ICE7_Sowjanya

This interactive D3.v7 scatter plot visualizes the relationship between gravity and average temperature for planets, using data from a CSV file. The chart employs a reusable chart factory with classic function setters, allowing customization of dimensions, margins, data mappings, labels, and styling. It creates axes, labels, and a title, while circles are positioned and colored via configurable value functions. A tooltip, implemented with D3's selection joins, displays the planet name and the x/y values on mouse hover.

Loading thumbnail…

Sowjanya1_Assignment7

This visualization shows the relationship between daily steps and calories burned in a wellness tracker, with water intake encoded by point size and month encoded by color. It is a reusable scatter plot component built with D3 v7, using the `d3.csv` and `d3.autoType` functions to load and parse data from a raw GitHub CSV. The plot draws SVG symbols with `d3.symbolCircle`, scales the radius via `d3.scaleSqrt`, and uses `d3.scaleOrdinal` with the Tableau10 color scheme for the month-based legend. Interactive tooltips appear on mouseenter events to show each data point's values.

Loading thumbnail…

Assignment7_ReusableScatterPlot_sowjanya

This example displays a scatter plot of daily steps against calories burned, with points sized by water intake and colored by month. Built with D3 v7 and SVG, it uses a reusable `scatterPlot()` component configured through a chaining API. The plot renders circles via `d3.symbol()` with `d3.scaleLinear` axes, a Tableau10 ordinal color scale, and a custom tooltip that appears on mouseenter, sourcing data from a linked wellness tracker CSV file.

Loading thumbnail…

Assignment_7_sowjanya_Reusable scatterplot

This interactive D3.js scatterplot visualizes the relationship between daily steps and calories burned from a personal wellness tracker. Each circle encodes water intake through its radius and the month of the year through its color. Users can hover over any point to see a tooltip with detailed values. The chart is built using a reusable `scatterPlot()` function that leverages D3's scale API (`d3.scaleLinear`, `d3.scaleSqrt`, `d3.scaleOrdinal`) and the `join` operator to efficiently create and update SVG circles. Data is loaded from an external CSV file.

Loading thumbnail…

Assignment_6_Sowjanya_s

This scatter plot shows the relationship between Sales and Profit for individual product/month records from a store dataset, with each point colored by its product category using a Tableau10 ordinal scale. The visualization, rendered as an SVG via D3 v7, uses `d3.scaleLinear` for both axes, `d3.extent` to derive the domains, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data is loaded asynchronously from a remote CSV using `d3.csv` with `d3.autoType`, and circles are drawn via a `selectAll`/`join` pattern.

Loading thumbnail…

Assignment 6 sowjanya

This bar chart displays the average sales for each product category from a store dataset loaded from a GitHub-hosted CSV file. The visualization uses D3 v7 and renders as an SVG, with `d3.scaleBand` mapping product names to the x-axis and `d3.scaleLinear` mapping average sales values to the y-axis. The code aggregates the raw data using `d3.rollups` and `d3.mean` to compute per-product averages before drawing steelblue rectangles. Both axes are labeled, and a chart title is added above the plot.

Loading thumbnail…

combined(bar + line)Assignment 6

This visualization combines a bar chart and a line chart to show monthly climate trends for rainfall (in millimeters) and average temperature (in Celsius), using a dual-axis layout with the bars scaled to the left axis and the line to the right. The SVG rendering is built with D3 v7, leveraging `d3.scaleBand`, `d3.scaleLinear`, and the `d3.axis` utilities to construct the axes, while the line is drawn via `d3.line` appended as a path. Data is fetched from a remote CSV URL and aggregated by `Month_Index` using `d3.rollups` with mean calculations for both metrics. A legend, axis labels, and an annotation for the peak rainfall month complete the chart.

Loading thumbnail…

Assignment _6(Multi series chart)

This multi-series line chart visualizes monthly climate trends, comparing average temperature, rainfall, and humidity across aggregated city data. The chart uses a shared y-axis to display all three metrics, with distinct colored lines and a legend for identification. The code loads CSV data via `d3.csv`, aggregates it with `d3.rollups`, and scales axes using `d3.scaleLinear`. Lines are drawn with `d3.line` paths, while gridlines and axes are rendered using `d3.axisLeft` and `d3.axisBottom`. A highlighted circle annotates the peak temperature point.

Loading thumbnail…

Assignment_6_Sowjanya_3

This multi-series line chart shows monthly climate trends for temperature, rainfall, and humidity from a CSV dataset, with each series color-coded via D3’s `scaleOrdinal` and `schemeSet2`. It uses the `d3.line` generator to draw three overlaid paths, and `d3.axisLeft` with negative tick sizes to create subtle gridlines. Data is aggregated by month using `d3.rollups` and `d3.mean`. A circle annotation highlights the peak temperature point, while legend and axis labels clarify the scales.

Loading thumbnail…

AI_tool_Screentime

This bar chart visualizes the average daily screen time in minutes for various AI tools in 2025, based on data loaded from a CSV file. The chart uses D3 v7's `scaleBand` and `scaleLinear` to map tool names and time values to SVG rectangles, with axes generated via `axisBottom` and `axisLeft`. Summary statistics (total tools, average, max, and min) are displayed above the chart using `d3.select` and HTML string interpolation. The SVG rendering includes rotated x-axis labels and a hover effect that changes bar color to orange.

Loading thumbnail…

AI Tool Screen time

This visualization compares sepal length and width across three iris species using a scatter plot of 150 flowers from Fisher’s Iris dataset. The chart displays data as large, semi-transparent colored circles, with each species assigned a distinct BBC-style color. Hovering over a legend item highlights that species’ points while fading others. Built with D3.js, the example uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to render the chart, and a `ResizeObserver` for responsive sizing.

Loading thumbnail…

Fork of Fork of Fork of Vanilla D3 Vibecoding Template

This example shows a scatter plot of Fisher’s Iris dataset comparing sepal length and sepal width across three species, with interactive legend highlighting that fades non-hovered points. The visualization uses D3 v7’s `csv`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs to load data, map scales, and render axes. A `ResizeObserver` enables responsive scaling, while a BBC-inspired color theme distinguishes species. The data is fetched from a remote CSV URL, and points are styled via CSS classes based on species.

Loading thumbnail…

Fork of Fork of Vanilla D3 Vibecoding Template

This scatter plot visualizes the Iris dataset, comparing sepal length and width across three species, with points colored by species and an interactive legend that highlights one species at a time. The chart uses D3.js APIs like `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to render axes and scales, while `ResizeObserver` handles responsive resizing. Data loads from a CSV via `d3.csv`, and BBC-style colors are applied to distinguish each species.

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

A scatter plot visualizes the Iris dataset, comparing sepal length and width across three species. The chart uses colored circles to represent species, with an interactive legend that fades non-hovered points. It includes a title, subtitle, axis labels, and source attribution. Built with D3.js, the code uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and the `join` pattern for declarative SVG rendering.