S

sarikakannikanti@gmail.com

@kannikanti·24 public vizzes

Loading thumbnail…

Gender +validation seeking +activity interest

This grouped bar chart compares average validation-seeking scores between female and male respondents across five ordered levels of activity interest, from “Very Low” to “Very High.” The visualization uses d3.rollups to aggregate the CSV data by interest level and gender, then renders blue and green bars with d3.scaleBand and d3.scaleLinear. Interactive tooltips appear on mouseover, and bars animate upward from zero height upon loading. The chart relies on D3 v7, SVG, and a color scale mapping gender to distinct hues.

Loading thumbnail…

Fork of vis

This grouped bar chart displays the average hours spent by gender, broken down by a three-level self-comparison score (Low, Medium, High). Data is loaded from a remote CSV and aggregated with `d3.rollups` to compute the mean hours per gender and level. The visualization renders SVG bars using `d3.scaleBand` for positioning and `d3.scaleLinear` for the y-axis, with colors assigned via `d3.scaleOrdinal`. The code also includes axis labels and a legend, both drawn with SVG elements.

Loading thumbnail…

Fork of sleep pattern vs depression

This pie chart visualizes the distribution of depression scores across sleep-pattern categories, showing how total depression values are partitioned into groups defined by hours of sleep. The visualization uses D3 v7’s `pie`, `arc`, `scaleOrdinal`, and `rollup` functions to aggregate and encode the data, with interactive hover tooltips and a static legend displaying category percentages. The underlying data comes from a CSV file of student grades and mental health, loaded via `d3.csv`.

Loading thumbnail…

Fork of grades vs sleep

This vizhub fork displays a grouped bar chart of student grades (A, B, C, D) across different sleep pattern categories. The chart shows the number of students in each grade category for each sleep pattern, with color-encoded bars for each grade level. Built with D3 v7, the code uses `d3.csv` to load a Gist-hosted dataset, `d3.rollups` for aggregation, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.schemeSet2` for color encoding. The visualization includes axis labels, a title, and a tooltip on mouseover.

Loading thumbnail…

grades vs sleep

This grouped bar chart visualizes how students' grades (A, B, C, D, E) correlate with their self-reported sleep patterns (e.g., Good, Fair, Poor). The chart uses a D3.js v7 SVG renderer with `d3.scaleBand` for the categorical axes and `d3.scaleOrdinal` with `d3.schemeSet2` for color. It reads a CSV from a Gist, aggregates counts with `d3.rollups`, and displays a tooltip on hover.

Loading thumbnail…

sleep vs concenration

This grouped bar chart compares sleep patterns against concentration difficulty levels, showing the number of students for each combination. The data comes from a CSV file on student grades and mental health, loaded via `d3.csv`. The visualization uses `d3.rollups` to aggregate counts by two categorical dimensions, then renders the nested groups with `d3.scaleBand` for both axes and `d3.scaleLinear` for the y-axis. Colors are assigned using `d3.scaleOrdinal` with `d3.schemeTableau10`. SVG rectangles display the bars, with hover tooltips showing exact counts for each sleep and concentration category.

Loading thumbnail…

grades

This visualization presents a side-by-side bar chart comparing student grades across different sleep patterns, with the bars for each sleep category grouped by grade level. The chart is built using D3.js v7, which loads a CSV file from a GitHub gist, groups the data with the `d3.rollups` API, and scales using `d3.scaleBand` and `d3.scaleLinear`. Hovering over a bar triggers a tooltip that displays the sleep pattern, grade, and count, with the visualization rendered as SVG elements.

Loading thumbnail…

Fork of grades vs sleep patterns

This example visualizes student grade distributions across sleep patterns using interactive pie, bar, and grouped bar charts. The SVG-based visualization uses D3 v7 APIs including `d3.rollup` for data aggregation, `d3.pie` and `d3.arc` for the donut chart, and `d3.scaleBand` with `d3.axisBottom` for bar rendering. Users switch between chart types via buttons, while mouseover events trigger tooltips displaying category counts. Data comes from a CSV file containing student grades and mental health information.

Loading thumbnail…

sample

This bar chart visualizes the average number of social media platforms used by individuals, grouped by their self-reported anxiety level. The data, sourced from a CSV file on student grades and mental health, is filtered to remove missing or invalid entries. Using D3 v7, the code computes the mean number of platforms for each anxiety category with `d3.group` and `d3.mean`, then renders the results as an SVG bar chart. Bars are sorted in descending order and change color on hover, with axes and labels provided by `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

final project

This bar chart displays the average student grades (on a 3-point scale where A=3, B=2, C=1) grouped by self-reported stress level, sorted from highest to lowest average grade. The visualization uses D3 v7’s `d3.csv` to load remote CSV data about student grades and mental health, then applies `d3.group` and `d3.mean` to aggregate values. Rendered as SVG rectangles with a `d3.scaleBand` x-axis and `d3.scaleLinear` y-axis, bars change color on hover via CSS.

Loading thumbnail…

final project

This bar chart visualizes the relationship between students’ stress levels and their average grades, grouping data by low, medium, and high stress. The visualization uses D3 v7 to load a CSV file from a GitHub gist, aggregate averages with `d3.rollup`, and render the results as SVG rectangles. It employs `scaleBand` for the categorical x-axis and `scaleLinear` for the y-axis, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The chart’s rotating axis labels and centered annotations clarify the stress-level categories and grade values.

Loading thumbnail…

final project

A grouped bar chart displays the distribution of letter grades (A through F) across five self-reported stress levels, using counts from a CSV dataset of student grades and mental health. The visualization reveals how grade frequencies vary by stress category. The code uses D3 v7 with `d3.csv`, `d3.rollups`, and `d3.scaleBand` for the nested bar layout, plus SVG rendering for all marks and axes. An ordinal color scale maps grades to categories, with a legend provided.

Loading thumbnail…

final project

This example displays the text “Hello VizHub!” centered on the page using D3.js to set the content of a div element. The visualization relies on D3’s `select` function to target the `#message` element and assign the text from an imported ES6 module. Styling via CSS provides a large, centered font size for the output. The project demonstrates a minimal D3 setup with local module imports and a bundled script.

Loading thumbnail…

Final Project

A minimal starter project demonstrates how to assemble a VizHub visualization from separate HTML, CSS, and JavaScript modules. The code imports a string constant from an ES6 module, `myMessage.js`, and renders it as large text inside a styled `#message` div. The example relies on standard DOM selection and styling, without additional libraries, to connect the module export to the page. It showcases the basic file structure and module system used for building and sharing interactive examples in the gallery.

Loading thumbnail…

Final project

This bar chart shows the relationship between students' self-reported stress levels and their average grades, with the data grouped into Low, Medium, and High stress categories. The chart uses D3 v7 to load a CSV file, group the data with `d3.group`, and calculate means with `d3.mean`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while bars are rendered as SVG rectangles that change color on hover.

Loading thumbnail…

final project

This bar chart shows the average grades of students grouped by their self-reported stress levels (Low, Medium, High). The visualization uses d3.csv to load a remote dataset, d3.rollup to aggregate the grade means, and d3.scaleBand with d3.scaleLinear to map stress categories and grade averages to the SVG coordinate system. Bars are rendered as SVG `rect` elements, with axis labels and rotated x-axis tick text for readability. The chart highlights the relationship between mental health and academic performance.

Loading thumbnail…

Final project

This bar chart shows the relationship between students’ self-reported anxiety levels and their average grades, with anxiety ordered from “Very Low” to “Very High.” The visualization reveals how average grades shift across these five categories. Using D3 v7, the code loads a CSV from a GitHub gist, groups the data with `d3.rollup` to compute mean grades per anxiety level, and renders an SVG with `d3.scaleBand` and `d3.scaleLinear` axes. Bars change color on hover, and rotated x-axis labels improve readability.

Loading thumbnail…

final project

This example displays the text “Hello VizHub!” centered on the page using D3.js to set the content of a div element. The visualization relies on D3’s `select` function to target the `#message` element and assign the text from an imported ES6 module. Styling via CSS provides a large, centered font size for the output. The project demonstrates a minimal D3 setup with local module imports and a bundled script.

Loading thumbnail…

final project

This example displays the text “Hello VizHub!” centered on the page using D3.js to set the content of a div element. The visualization relies on D3’s `select` function to target the `#message` element and assign the text from an imported ES6 module. Styling via CSS provides a large, centered font size for the output. The project demonstrates a minimal D3 setup with local module imports and a bundled script.

Loading thumbnail…

final project

This example displays the text “Hello VizHub!” centered on the page using D3.js to set the content of a div element. The visualization relies on D3’s `select` function to target the `#message` element and assign the text from an imported ES6 module. Styling via CSS provides a large, centered font size for the output. The project demonstrates a minimal D3 setup with local module imports and a bundled script.

Loading thumbnail…

Assignment 2

This visualization displays unemployment rates for fifteen countries as an area chart, with a dark red point marker for each country. The chart uses the D3.js library (v7) to create a smooth monotone curve via `d3.area`, with points added using `d3.selectAll('circle').data().join('circle')`. The code employs `d3.scalePoint` and `d3.scaleLinear` for the axes, and a hover tooltip is implemented using D3's `.on('mouseover')` and `.on('mouseout')` methods, displaying the country name and rate in a styled div. The data is hardcoded in the script, and axis labels are rotated and positioned using D3’s text elements.

Loading thumbnail…

Assignment 2

This example displays a simple static message, "Hello VizHub!", centered prominently on the page. The visualization demonstrates a minimal D3.js setup using the `select` API to update the text content of an HTML div element. The code imports the message from a separate ES6 module, `myMessage.js`, and styles it with CSS. It uses D3 v6 loaded from a CDN, highlighting a basic integration between D3, ES6 modules, and CSS for text rendering.

Loading thumbnail…

Assignment 2

This pie chart displays total revenue aggregated by country across years from 1995 to 2019. The code uses d3.pie and d3.arc to generate the chart, with d3.scaleOrdinal and d3.schemeSet3 providing categorical colors for each country slice. Labels are positioned using arc.centroid, and an interactive tooltip reveals exact revenue values on mouseover. A legend with matching colors identifies each country, while revenue is summed from the embedded dataset using d3.group and d3.sum. The visualization renders as SVG with a fixed 900x700 viewport.

Loading thumbnail…

Assignment 2

This example displays a large, centered text message, "Hello VizHub!", within a styled web page. It demonstrates a basic integration of D3.js for DOM manipulation and the use of ES6 modules for code organization. The code imports the `select` function from D3 to target a specific HTML element and sets its text content using a constant imported from a local module. Styling is applied via an external CSS file, controlling font size, alignment, and color.