Vinay combined chart

100%

Vinay combined chart

✓ Published1🌍 Public

Last edited Mar 9, 2026

Created on Mar 9, 2026

This combined chart displays average study time as bars on a left axis and average absences as a line with points on a right axis, across 10 student groups from a TSV dataset. The visualization uses React with D3 v7 to render SVG elements, employing `d3.scaleBand` for the x-axis, dual `d3.scaleLinear` scales, and `d3.line` with `curveMonotoneX` for the trend line. Data is aggregated into groups of 20 students using `d3.mean`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Vinay Task 3 Multi-Series Line Chart

This example shows a combined bar and multi-series line chart comparing average study time and absences across 20 student groups derived from a Student Performance dataset. The visualization pairs steelblue bars for study time on a left y-axis with a crimson monotone line and points for absences on a right y-axis. Built with React and D3 v7, the SVG chart uses d3.tsv for data loading, d3.scaleBand and d3.scaleLinear for scaling, d3.line with d3.curveMonotoneX for the line, and d3.axisLeft, d3.axisRight, and d3.axisBottom for gridlines and tick marks.

VVinay Kumar Parvathini

90% match

Loading thumbnail…

vinay Task 3 Multi-Series Line Chart

This multi-series line chart from D3 v7 shows smoothed trends for study time, absences, and GPA over the first 200 student records, with each metric normalized and scaled for comparison. The chart uses a 12-point rolling average to reduce noise, with lines rendered via `d3.line` and `curveMonotoneX`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while a custom legend identifies each series. Data comes from a TSV file loaded via `d3.tsv`, and the visualization is built using React with SVG rendering.

VVinay Kumar Parvathini

84% match

Loading thumbnail…

Vinay Assignment7

This example displays a scatterplot of study hours against test scores, using eight data points from a small dataset. It renders blue circles positioned by linear scales for the x- and y-axes, with axis labels for “Hours Studied” and “Score.” The visualization is built with D3 v7, appending SVG elements directly to the body, and uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the chart.

VVinay Kumar Parvathini

77% match

Loading thumbnail…

Combined Chart

This combined chart displays average study hours as bars and average exam scores as a line, grouped by sleep-hour bins. It uses `d3.rollups` to aggregate the CSV data and a dual-axis layout with an SVG render. The chart is built with D3 v7, featuring flexible column detection and dark-themed styling.

RRamdas Dheeraj

74% match

Loading thumbnail…

Assignment 3

This visualization compares average screen time, sleep hours, and GPA across six student groups using a combined bar and line chart. Gray bars represent average screen hours, while blue, green, and red lines depict trends for screen time, sleep, and GPA, respectively. The chart uses D3’s `scaleBand` for categorical x-axes, `scaleLinear` for the y-axis, and `d3.line` to connect summary points. Data is loaded from a CSV via `d3.csv`, grouped into six slices, and aggregated with `d3.mean` to compute group averages.

Eeeshani.boyapati@gmail.com

73% match

Loading thumbnail…

Dinesh D3 Starter

A bar chart displays the average study hours per course, computed from a CSV dataset of 100 students. The visualization uses D3 v7 with SVG rendering, loading data via `d3.csv` and aggregating it with `d3.group` and `d3.mean`. The chart encodes course categories on the x-axis using `d3.scaleBand` and average hours on the y-axis with `d3.scaleLinear`, applying styled rectangles and labeled axes.

Ddineshsingiri18@gmail.com

71% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive bar chart visualizes how average study hours vary across self-reported stress levels, using Red as the bar color with darker and lighter opacities to indicate selected points. The React application loads a student lifestyle dataset with D3's `csv` method, groups data by stress level via `d3.group`, and computes averages with `d3.mean`. Bars are rendered as SVG rectangles with click handlers that toggle selection, while axes, gridlines, and titles are generated using `axisBottom` and `axisLeft`. A ResizeObserver tracks container dimensions to responsively update the chart.

Ssravya7136@gmail.com

71% match

Loading thumbnail…

Line Chart and bar chart

This example combines bars and a line chart to compare two related variables across a time series. It visualizes humidity as light blue bars on the left y-axis and temperature as a red line on the right y-axis, with a legend, gridlines, and axis labels for each scale. The chart renders synthetic sine-wave data in an SVG using d3.scaleLinear for both axes, d3.axisBottom, d3.axisLeft, and d3.axisRight for ticks, and d3.line for the temperature path. A React version loads student performance data via d3.tsv, groups records into intervals, and plots average study time as bars against average absences as a line.

Ssairathan.p045@gmail.com

70% match