Projec2

Vvyjayanthimamidipalli@gmail.com

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.

82% match

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.

80% match

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.

79% match

barChart and pieChart V2

This interactive visualization lets users explore categorical data through bar and pie charts, dynamically switching between chart types and selecting which data column to aggregate. It displays absolute frequencies for university student grades across different degree programs. The implementation uses React with D3 v5, employing `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for the bar chart, and `d3.pie` with `d3.arc` for the pie chart. Both charts feature animated transitions via `transition().duration()`, hover tooltips, and interactive dropdown menus for column selection.

SSchmittYannic

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.

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.

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.

Ddeekshakondam@gmail.com