D

deekshakondam@gmail.com

@deekshakondam·22 public vizzes

Loading thumbnail…

two bar charts

This visualization shows the distribution of current student grades (A, B, C, D, F) across three stress levels (Low, Medium, High) using a single bar chart. Users can click legend items to filter the display to a specific grade, highlighting the selected legend entry and updating the bars accordingly. The chart loads CSV data via d3.csv, aggregates counts and averages (study hours and social media platforms) per grade-stress combination, and renders SVG bars with a tooltip. Built with D3 v7, it uses d3.mean for aggregation and d3.select for DOM manipulation.

Loading thumbnail…

based on gender , sleeplessness- avg anixety

This grouped bar chart visualizes average anxiety levels across five ordered sleeplessness categories, split by gender (F and M). The chart uses D3.js v7 with SVG rendering and animation, drawing bars that grow from zero via a duration-800 transition. It loads CSV data, applies `d3.rollups` for grouping and `d3.mean` aggregation, and scales colors with a `d3.scaleOrdinal` scheme. Interactive tooltips on `mouseover` and `mouseout` events display exact values, while axis labels and a legend clarify the comparison.

Loading thumbnail…

stress levels by major

A pie chart visualizes the distribution of students across majors, with each slice sized by the total number of students in that major. Hovering over a slice pops it outward and displays a tooltip breaking down the count of students with high, medium, and low stress levels for that major. Clicking a slice updates a text box below the chart with the major’s name and total student count. The visualization uses d3.pie, d3.arc, and d3.rollup to process CSV data and render SVG paths, with transitions animating the slice offset on hover.

Loading thumbnail…

pie charts

Two pie charts compare the distribution of student grades from the previous term versus the current term. Each donut chart segment is colored by the dominant stress level (high, medium, low), with the percentage label displayed on each slice. Clicking a segment reveals a tooltip with the student count, average study hours, and stress level. The visualization uses D3 v7's `d3.pie`, `d3.arc`, and `.join()` methods on SVG paths, with data loaded from a CSV file and a custom opacity-transition tooltip.

Loading thumbnail…

Pie Chart - Deeksha Kondam

This pie chart visualizes the distribution of students’ self-reported stress levels, bucketed into Low, Medium, and High categories. A dataset of student grades and mental health is loaded via `d3.csv` from a GitHub gist, and each numerical stress score is counted into its respective bucket. The chart uses `d3.pie()` to compute the arcs and `d3.arc()` with an inner radius of zero to render the slices as SVG paths. An animation, driven by `transition.attrTween` and `d3.interpolate`, expands the pie from zero angle on load, while a legend, color-coded via `d3.scaleOrdinal` with `d3.schemeSet2`, identifies each category.

Loading thumbnail…

Anxiety and study hours by School Type

This visualization compares average anxiety levels and study hours across different school types using a grouped bar chart. It shows that each school type has paired pink and blue bars, representing the two metrics, allowing direct visual comparison between categories. The chart is built with D3 v7, using d3.csv to load the dataset, d3.rollups for aggregation, and d3.scaleBand for positioning. Hovering over a bar displays a tooltip with the exact values, while the SVG rendering includes a legend and rotated axis labels.

Loading thumbnail…

paralell coordinates

This parallel coordinates plot visualizes mental health metrics, including Anxiety, Depression, and Sleeplessness, with lines colored by gender (steelblue for males, hotpink for females). The code uses D3 v7’s `d3.csv` to load student data, `d3.scaleLinear` and `d3.scalePoint` to map dimensions, and `d3.line` to generate paths. Axes are added via `d3.axisLeft`, and hovering highlights individual lines by increasing opacity and stroke width.

Loading thumbnail…

Mental Health & Social Media Traits

This scatter plot matrix explores relationships among six mental health and social media traits, including anxiety, depression, and hours spent online. Each off-diagonal cell displays a scatter plot of two variables, while diagonal cells label each axis. The visualization loads CSV data from a GitHub gist and uses d3.scaleLinear for axes, SVG circles for points, and CSS-transition tooltips for hover details. This splom implementation relies on d3.csv, d3.select, and d3.extent to filter and scale the numeric data.

Loading thumbnail…

Average Grade by Mental Health Status

This visualization shows the distribution of student anxiety levels as a pie chart, with each slice representing the proportion of students at a specific anxiety level. It uses d3.pie() and d3.arc() to render the pie, d3.scaleOrdinal() to assign colors, and d3.rollup() to count students in each anxiety category. Hovering displays a tooltip with the count and percentage, while clicking a slice populates a list of students in that anxiety level, showing their age, gender, sleep patterns, and stress levels. The data comes from a CSV file loaded via d3.csv().

Loading thumbnail…

Area Chart- Deeksha Kondam

This area chart displays the average body mass of three penguin species—Adelie, Chinstrap, and Gentoo—using animated hover interactions that enlarge data points and reveal exact values. Built with D3 v7, it uses `d3.rollups` to aggregate the CSV data, `d3.scalePoint` and `d3.scaleLinear` for positioning, and `d3.area` with a monotone curve to render the filled SVG path. Circles respond to mouseover/mouseout via D3 transitions, while axes and labels are generated with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

area

This area chart visualizes monthly product sales from a retail dataset, showing a teal shaded region with steelblue data points for each month. The chart displays total sales amounts in rupees and includes interactive hover effects that enlarge points and reveal tooltips with specific values. Built with D3 v7, the visualization uses d3.csv to load external data, d3.rollups to aggregate amounts by month, and d3.scalePoint and d3.scaleLinear for axes, with an animated transition on mouseover events.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, with points colored by species (setosa, versicolor, virginica) and sized by sepal dimensions. It cycles through different variable pairings on the x-axis every few seconds using `setInterval`, while the y-axis remains fixed. The visualization is built with D3 v6, using `scaleLinear` for axes, `csv` for data loading, and SVG circles for marks. A legend distinguishes species colors, and axis labels update dynamically to reflect the current x-variable being displayed.

Loading thumbnail…

pie chart

This pie chart displays the distribution of penguin species by count, using a dataset loaded from a CSV file. The chart is rendered as an SVG with each slice colored using a categorical color scheme, and it includes a legend that lists each species with its corresponding count. Built with D3.js v6, the visualization uses `d3.pie()` to compute the arc data, `d3.arc()` to generate the slice paths, and `d3.scaleOrdinal()` for color mapping. The chart is centered within a 500x500 pixel SVG canvas, with slices separated by white strokes for clarity.

Loading thumbnail…

Pie chrt

This pie chart displays the proportional distribution of categorical data. The visualization is built with D3.js, using the `select` API to target an HTML element. The chart's appearance and layout are controlled through the accompanying `styles.css` file. The example demonstrates a basic implementation of a pie chart within the VizHub framework, with the data values and chart construction defined in the JavaScript module.

Loading thumbnail…

Pie chart for my dataset

This pie chart visualizes the distribution of three penguin species—Adelie, Gentoo, and Chinstrap—using count data loaded from a CSV file. The D3.js v7 code uses `d3.pie()` and `d3.arc()` to generate the pie slices, with a color scale mapping each species to a distinct hue. Slice labels appear at each arc’s centroid, and a legend built with SVG rectangles and text identifies the species. The visualization is rendered as inline SVG elements within a fixed 500×500 viewport.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, showing the relationships between petal and sepal measurements across three flower species, with a cycling animation that switches which measurement pair is plotted on the axes. Built with the D3.js library (version 6.7.0), it uses the `csv` and `select` functions to load data from a remote CSV source and render SVG elements. The code defines a reusable `scatterPlot` component, uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, and employs a time-based loop to dynamically update the plotted columns.

Loading thumbnail…

piee

This example renders a static pie chart using D3.js version 6. The visualization is built with the `select` API from D3 to target a DOM element and display a textual message. The chart itself is not present; instead, the code uses the `select` function to set the text content of an HTML div to "Hello VizHub!". The rendering approach relies on basic D3 selection and DOM manipulation, with styling applied via an external CSS file that centers the text and sets a large font size.

Loading thumbnail…

pie

This pie chart displays the distribution of penguin species from a CSV dataset, showing each species with a colored slice and a legend. Built with D3 v7, it uses `d3.pie()` to compute arc angles, `d3.arc()` to generate SVG paths, and `d3.scaleOrdinal` with `d3.schemeSet2` for colors. Labels are positioned using `arc.centroid()`, and the chart renders to an SVG element.

Loading thumbnail…

pie chart

This pie chart visualizes the distribution of penguin species counts loaded from a CSV file. It uses D3.js v7, with the `d3.pie()` function to compute arc data and `d3.arc()` to generate the path geometry. Each slice is filled with a categorical color, and a legend identifies each species.

Loading thumbnail…

pie chart

This pie chart displays the relative population counts of three penguin species: Adelie, Gentoo, and Chinstrap. The visualization loads a CSV file from a GitHub gist to retrieve the species count data. Using D3 v7, the example constructs the chart with `d3.pie` to compute arc segments and `d3.arc` for the circular slices, rendered with SVG paths. It applies an ordinal color scale via `d3.scaleOrdinal` and includes an SVG-based legend, positioning each segment and label within a 500x400 viewport.

Loading thumbnail…

Hello Viz

A minimal example demonstrates how D3 v6 can render a simple text message in a web page. The visualization shows the text "Hello VizHub!" centered on a white background using a large font size. The code imports the `select` function from D3 and uses it to target a div element by its CSS ID, setting its text content. Styling is handled through a separate CSS file, while the message string is defined in an ES6 module and imported into the main JavaScript file.

Loading thumbnail…

Hello Viz

A minimal example demonstrates how D3 v6 can render a simple text message in a web page. The visualization shows the text "Hello VizHub!" centered on a white background using a large font size. The code imports the `select` function from D3 and uses it to target a div element by its CSS ID, setting its text content. Styling is handled through a separate CSS file, while the message string is defined in an ES6 module and imported into the main JavaScript file.