Skip to main content
Log in
S

SathviKankanala@my.unt.edu

@sathvi1202·21 public vizzes

Loading thumbnail…

React & D3 Vibecoding Starter

A force-directed network diagram maps six Texas cities as movable nodes connected by route edges. The SVG visualization uses `d3.forceSimulation` with link, charge, and centering forces to position the graph, while nodes are rendered as blue circles with city-name text labels. The code implements dragging via `d3.drag`, updates positions on each simulation tick, and uses `data.forceLink` to bind node IDs to the specified city-pair relationships.

Nov 11, 2025
Loading thumbnail…

React & D3 Vibecoding Starter

A simple family tree rendered as an SVG visualization shows three generations of nodes, with circles colored by depth and labeled with names. Using D3 v7, the code builds a hierarchy from embedded JavaScript data and applies a tree layout to position nodes. It draws the edges with `d3.linkHorizontal` and `d3.tree`, while D3's data join pattern appends circles and text labels, with colors assigned via `d3.scaleOrdinal`.

Nov 11, 2025
Loading thumbnail…

React & D3 Vibecoding Starter

This example displays a choropleth map of the United States, where state fill darkness corresponds to population values from a small inline dataset. It uses D3 v7 and topojson-client to load and convert US Atlas TopoJSON into GeoJSON features, then renders them as SVG paths via `d3.geoPath` and a `d3.geoAlbersUsa` projection. A `d3.scaleLinear` maps population extents to a blue color range, with unlisted states shown in gray. Hovering reveals a tooltip with each state's name and population via an appended `<title>` element.

Nov 11, 2025
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This choropleth world map visualizes population data for nine countries, using darker blue shades to represent higher populations. It loads country boundaries from the world-atlas TopoJSON dataset, converts them to GeoJSON with topojson-client’s feature function, and renders them as SVG paths via d3.geoPath with a Natural Earth projection. A d3.scaleLinear color scale maps population values to a light-to-dark blue range, and each country includes an SVG title tooltip showing the name and population in millions.

Nov 11, 2025
Loading thumbnail…

Making Maps

This example shows a choropleth world map where a small set of countries are shaded from light blue to dark blue according to their population in millions, taken from an inline data array. It uses D3 v7, TopoJSON’s `feature` function, a `d3.scaleLinear` color scale, and `d3.geoNaturalEarth1` projection with `d3.geoPath` to render countries from the world-atlas dataset as SVG paths. The map displays tooltips with each country’s name and population or “n/a” for unlisted countries.

Nov 11, 2025
Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This choropleth map colors world countries by population, using darker blues for more populous nations while unlisted countries appear gray. A legend explains the visual encoding. The example loads world-atlas TopoJSON, converts it to GeoJSON features using topojson-client, and projects the map with d3.geoNaturalEarth1 and d3.geoPath. A d3.scaleLinear maps population values to a light-to-dark color range, and SVG paths render each country with tooltips showing population figures.

Nov 11, 2025
Loading thumbnail…

Area Chart

This area chart visualizes the relationship between age and average calories burned, using a lightsteelblue filled area with a steelblue stroke. The visualization aggregates a lifestyle CSV dataset by computing the mean calories burned for each age value. Built with D3 v7, the code uses `d3.rollup` and `d3.mean` to group and summarize the data, then renders the result as an SVG path via the `d3.area()` generator. Linear scales for both axes, axis generators, and descriptive labels complete the chart.

Oct 29, 2025
Loading thumbnail…

Line Chart

This line chart visualizes the average calories burned by age, using data from a lifestyle CSV file. The code aggregates individual records by age and calculates the mean calories burned, then plots the resulting trend as a smooth, steel-blue line. Built with D3 v7, it employs `d3.csv` and `d3.autoType` for data loading, `d3.rollup` for aggregation, and `d3.scaleLinear` for axes. The SVG rendering uses `d3.axisBottom` and `d3.axisLeft` for ticks, and a `d3.line` path for the trend, with custom labels for both axes and the title.

Oct 29, 2025
Loading thumbnail…

Pie Chart

A pie chart displays the average calories burned for each workout type—Cardio, HIIT, Strength, and Yoga—based on data from lifestyle.csv. The code uses D3 v7’s `d3.csv`, `d3.rollup`, and `d3.mean` to aggregate the data, then `d3.pie` and `d3.arc` to generate the SVG paths. A categorical color scale with `d3.schemeSet2` colors each segment, and labels are placed using `arc.centroid`. A legend is appended manually using D3 selections.

Oct 29, 2025
Loading thumbnail…

Scatter plot2

This scatter plot visualizes the relationship between an individual's age and the calories they burn, with each point colored according to the workout type from the lifestyle.csv dataset. The D3.js v7 code loads the CSV data and uses `d3.autoType` for parsing, then employs `d3.scaleLinear` for the x and y axes and `d3.scaleOrdinal` with `d3.schemeSet2` for categorical color encoding. The SVG rendering includes axis labels, a title, tooltips on each point, and a legend positioned within the chart.

Oct 29, 2025
Loading thumbnail…

scatterplot

This scatterplot visualizes the relationship between two quantitative variables using a bubble chart, where each point’s size and color encode additional dimensions. Built with D3.js v3, it uses `d3.scale.linear` to map data values to x- and y-axes, `d3.svg.axis` for gridlines and ticks, and `d3.layout.pack` to position overlapping circles with force-based collision detection via `d3.forceSimulation`. The axes are labeled with text elements, and the chart includes a legend for size and color scales. Data is loaded from a CSV file and rendered as SVG shapes.

Oct 29, 2025
Loading thumbnail…

Scatter Plot_Final

This scatter plot compares weight against calories burned, with each point colored by workout type (Strength, HIIT, Cardio, Yoga) using `d3.scaleOrdinal` and `d3.schemeCategory10`. It loads data from an external CSV via `d3.csv`, renders circles in an SVG, and includes gridlines, axis labels, a legend, and a hover tooltip. Animation is not present in the code; the visualization relies on static SVG rendering with interactive mouseover events.

Oct 22, 2025
Loading thumbnail…

multi-series line chart

This multi-series line chart visualizes product attributes—Rating, NumReviews, and Price—across different product categories. Using the D3.js library, the code aggregates the dataset by category and plots three smoothed lines (via `d3.curveMonotoneX`) on a shared axis, with color encoding distinguishing each metric. The visualization also includes a combined bar and line chart below, comparing the first two numeric columns using dual y-axes. The SVG rendering leverages D3's `scaleBand`, `scaleLinear`, and `scaleOrdinal` APIs for layout and color mapping, with axis labels rotated for readability.

Oct 21, 2025
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between age and weight in kilograms, with each point colored by workout type from the lifestyle.csv dataset. The visualization uses D3.js v7 with SVG rendering, implementing linear scales for both axes, an ordinal color scale with the Tableau10 scheme, and gridlines for readability. Interactive tooltips appear on hover, while axes are labeled and accompanied by a legend. The code includes a fallback dataset if the CSV file fails to load, and it cleans the data by filtering out non-numeric values.

Oct 21, 2025
Loading thumbnail…

BarGraph

This bar chart visualizes the average weight of various fruits from a CSV dataset, using color to distinguish between seasonal and non-seasonal categories. The bars are sorted in descending order for readability, with tooltips displaying weight, vitamin C content, and category on hover. The visualization is built with D3 v7, using `scaleBand` and `scaleLinear` for the axes, `scaleOrdinal` with `schemeTableau10` for categorical coloring, and SVG rendering. A legend and rotated x-axis labels support the dense dataset of fruit names.

Oct 21, 2025
Loading thumbnail…

multi series_final

The visualization presents a dual-panel chart comparing product attributes across categories from the Products.csv dataset. The top panel displays multi-series monotone lines for each numeric column, while the bottom panel combines light blue bars for the first numeric attribute with an orange line for the second. The D3 v7 code groups data by category, computes column means, and uses `d3.scaleBand`, `d3.scaleLinear`, `d3.line`, and `d3.curveMonotoneX` to render the SVG elements, with axes, legends, and rotated category labels.

Oct 21, 2025
Loading thumbnail…

BarGraph_Final

This horizontal bar chart displays the top 10 fruits by average vitamin C content, using a dataset of repeated fruit observations from a CSV. The visualization aggregates the data with `d3.group` and `d3.mean`, then sorts and slices the results. Bars are drawn as SVG `<rect>` elements, scaled with `d3.scaleBand` and `d3.scaleLinear`. Axes use `d3.axisBottom` and `d3.axisLeft`, while colors come from `d3.schemeSet2` via `d3.scaleOrdinal`. A legend, title, and rotated axis labels are all rendered in the SVG.

Oct 21, 2025
Loading thumbnail…

BarGraph

This bar chart visualizes categorical data with vertical bars, colored in a gradient from blue to red. It is built using the D3.js library, specifically `d3.scale` for the color gradient and `d3.layout` for bar positioning. The chart initializes with a fade-in animation, and bars scale from the bottom axis upon rendering. The data is embedded directly in the JavaScript code as a static array, with no external source.

Oct 21, 2025
Loading thumbnail…

Bar Graph

This example renders a static bar graph using D3.js, displaying categorical data as vertical bars. The visualization maps each data point to a rectangular bar, with bar height proportional to the value. It uses D3's scale functions to compute the x and y positions, along with SVG elements for rendering. The chart includes axes for reference and labels for readability. The data is hardcoded within the script rather than loaded from an external file, and the bars are styled with a uniform fill color.

Oct 21, 2025
Loading thumbnail…

Bar Graph

This bar graph displays the population sizes of the top 100 countries, using a vertical bar for each nation ordered along the x-axis. The chart uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population scale, rendering rects with a `title` tooltip. Data comes from the CSV file `Population.csv`, and the axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

Oct 21, 2025
Loading thumbnail…

Sathvi Vizhub

This bar chart shows the average weight and vitamin C content for a collection of fruits, with a summary line displaying totals and means. Each bar is colored according to the fruit’s assigned color. The visualization loads CSV data via `d3.csv`, scales the categorical fruit names and linear weight values using `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles with axes generated by `d3.axisBottom` and `d3.axisLeft`. Labels are rotated for readability, and the chart is styled with CSS.

Oct 7, 2025