vyjayanthimamidipalli@gmail.com

@srivyjayanthi·12 public vizzes

radialbarchart

This radial bar chart displays the distribution of grades (A, B, C) across different anxiety levels, using concentric rings where each ring represents an anxiety level and each arc segment corresponds to a grade's proportion of the total. The visualization uses D3.js (v7) with SVG and animation, employing `d3.arc()`, `d3.scaleOrdinal()`, and `d3.csv()` to load and process data from a GitHub gist. Interactive tooltips and legend hover effects highlight grade-specific arcs using `transition()`.

Apr 10, 2025

Loading thumbnail…

groupedbarchart

This interactive grouped bar chart displays the number of students per grades (A, B, C) across different depression levels, using data from a CSV file on student grades and mental health. The visualization uses D3.js v7 and the `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` APIs for layout. Bars animate in on load via the `transition` method, and hovering reveals a tooltip with exact counts. A clickable legend toggles grade visibility by adjusting bar opacity.

Apr 9, 2025

Loading thumbnail…

GroupedBarchart

This grouped bar chart compares anxiety levels across school grades and genders. The visualization displays clusters of bars for each grade, with individual bars representing male and female students, and color distinguishes anxiety severity categories. The code uses D3.js v7 with `d3.scaleBand` for grouping, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for axes. Hover interactions trigger tooltip updates via `d3.select`. Data is pre-aggregated in the script, rendered as SVG using `d3.select` and `append` methods.

Apr 8, 2025

Loading thumbnail…

areachart

This area chart visualizes average depression levels across letter grades A through F, split by male and female students. The data comes from a CSV file loaded via `d3.csv` and is aggregated with `d3.mean` for each gender and grade combination. Rendered as SVG using `d3.area` with a monotone curve, the chart also includes tooltips on circles for precise values, axis labels, and a legend. Color encoding distinguishes genders through `d3.scaleOrdinal`, with hover interactions managed by event listeners.

Apr 8, 2025

Loading thumbnail…

sample 3

Two side-by-side donut charts show grade distribution (A–F) for male and female students, with a tooltip revealing count, depression level, and percentage for each grade. The visualization uses D3 v7’s `d3.pie`, `d3.arc`, and `.join` to render SVG paths and labels. Hovering expands a slice via `arcHover` while an HTML tooltip follows the cursor. Data is hardcoded in JavaScript arrays, and a horizontal legend maps grades to a categorical color scale.

Apr 7, 2025

Loading thumbnail…

Projec2

This example shows how student depression levels relate to their grades using a bar chart and a pie chart. The bar chart visualizes each student's depression level with color-coded bars, while the pie chart displays the distribution of depression levels across the dataset. Both charts use D3 v7's `d3.csv` to load data, `scaleBand` and `scaleLinear` for axes, and `d3.pie` and `d3.arc` for the pie slices. Interactive tooltips appear on hover, and the bar chart uses an event-driven `transition` for the tooltip's opacity changes.

Apr 4, 2025

Loading thumbnail…

vyjayanthi2

This area chart displays average monthly rainfall for ten global cities, using a steelblue filled polygon and red circular data points. The visualization employs D3 v7's area generator, point-scale, and linear-scale APIs to map city names to x-coordinates and rainfall values to y-coordinates. An interactive tooltip appears on hover, showing the city name and rainfall in millimeters. The chart includes rotated x-axis labels for city names and axis labels for both dimensions.

Mar 24, 2025

Loading thumbnail…

vyju1

This pie chart visualizes internet penetration rates as percentages of the population for ten countries, with each slice labeled by its percentage value. A hover tooltip displays the country name and total population in millions. The chart is built with D3 v7’s pie layout and arc generator, rendering SVG paths colored via a categorical color scale. An HTML legend lists all countries, and the tooltip is implemented using mouseover, mousemove, and mouseout events.

Mar 24, 2025

Loading thumbnail…

Vyj1

This example displays a minimal web page that outputs the text “Hello VizHub!” in the center of the screen, styled with large, centered font via CSS. It demonstrates how to import functionality both from the D3 v6 library and from local ES6 modules. The code uses D3’s `select` function to target the `#message` div and set its text content from an imported `message` variable, while the HTML loads D3 from UNPKG and the runtime bundles the JavaScript modules.

Mar 23, 2025

Loading thumbnail…

Vyjuhub1

This pie chart displays the distribution of internet usage percentages among ten countries, including China, India, and the United States. The visualization uses D3.js v6 to generate SVG arcs, with each slice sized according to the `internet` value from the dataset. Hovering over a slice reveals a tooltip showing the country's population in millions and its internet percentage. A legend on the right lists each country alongside its corresponding color, which is assigned using `d3.scaleOrdinal` with the `schemeCategory10` palette.

Mar 22, 2025

Loading thumbnail…

vyjuhub1

This interactive pie chart visualizes box office revenue for ten blockbuster movies, with each slice sized proportionally to earnings in billions. The chart renders in SVG with a color-coded legend positioned to the right. Users can hover over slices to reveal a tooltip displaying the movie’s year and revenue, using mouse events that toggle visibility and track cursor position. The code employs D3 v7 APIs including `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal` with the `schemeCategory10` palette.

Mar 22, 2025

Loading thumbnail…

Tutorial

This example demonstrates an interactive scatterplot of the Iris dataset, visualizing the relationship between sepal width and sepal length for three flower species. The plot uses D3.js v7 loaded via UNPKG, with data fetched by URL using `d3.csv`. It implements linear scales (`d3.scaleLinear`) for axes, an ordinal color scale for species, and appends SVG circles with `d3.select` and `data().enter()`. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, with labels for each dimension, resulting in a clear, colored comparison of the species.

Mar 22, 2025