ICE6-BarChart-Deepshika

100%

ICE6-BarChart-Deepshika

✓ Published0🌍 Public

Last edited Mar 9, 2026

Created on Mar 9, 2026

This bar chart displays quiz scores for the first 20 students from a CSV dataset, with each bar representing an individual student’s score. The visualization uses D3 v7’s `scaleBand` and `scaleLinear` to map student IDs and scores, while animated bars appear via `transition()`. Hovering a bar triggers a tooltip showing study hours and practice questions. The SVG includes grid lines, axis labels, and value labels, all styled with custom CSS classes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 - PART - 1

A bar chart displays test scores for 120 students, with each bar representing an individual student's score on a scale from 0 to 100. The visualization uses D3.js v7 to load data from a CSV file, then maps student names to a band scale for the x-axis and scores to a linear scale for the y-axis. SVG rectangles are rendered and filled with steelblue, while axes are generated using `d3.axisBottom` and `d3.axisLeft`, with x-axis tick labels filtered to show every tenth student.

VVinil Karmilla

85% match

Loading thumbnail…

ice 6 q1

A bar chart displays average exam scores by motivation level, sourced from a CSV file. The visualization uses D3 v7 with SVG rendering, applying `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.rollups` to group and aggregate data. Bars are colored green via the CSS class `.bar`, with a title and labeled axes. The chart loads data asynchronously via `d3.csv` and renders the plot within an HTML page.

Hh.harrycoding@gmail.com

81% match

Loading thumbnail…

ICE-6

This visualization displays average subject scores grouped by students’ favorite subject, using an animated bar chart that rises from the baseline on load. Individual student scores appear as additional bars, with hover interactions changing bar color and showing a tooltip with the exact subject and score. Built with D3 v7, it loads tab-separated data from a GitHub gist, parses it via `d3.text`, and aggregates averages using `d3.rollup`. The SVG chart uses `scaleBand` and `scaleLinear` for axes, with `transition()` animating bar heights and `axisBottom`/`axisLeft` rendering labeled axes.

SSYAM TEJ

80% match

Loading thumbnail…

ICE_6 Yaswanth

This bar chart displays the number of students enrolled in five different courses, with values ranging from 60 to 150. Each bar uses a vertical linear gradient that shifts from purple to blue, and hovering over a bar triggers both a color change to orange-pink and the appearance of a tooltip showing the course name and student count. The chart, rendered as an SVG, uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the numeric y-axis, with D3 v6 handling axes, data binding, and event listeners.

YYaswanth

79% match

Loading thumbnail…

ICE-6 Student Marks BarChart

This example visualizes student marks as a bar chart using React and D3. It shows the total marks for each student, with bars encoded by height on a linear scale and names on a band scale. The code fetches CSV data from a remote URL, parses it, and renders an SVG with rectangular bars using `scaleBand` and `scaleLinear`. It leverages React’s `useState` and `useEffect` for data loading, and D3’s `axisBottom` and `axisLeft` for axes. The chart uses a green fill for bars and includes margins and a title, with no interactive or animated behavior.

Cchalasanigayaetiri@gmail.com

79% match

Loading thumbnail…

ICE-6 Creating Marks And Channels

This bar chart visualizes the relationship between time invested in studying and marks scored for 15 students, using a horizontal bar layout. The chart maps time spent studying to the y-axis against a blue horizontal rectangle for each student, whose width encodes the marks obtained. The visualization is built with React and D3 v5, using `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.max` to determine the scale domain. The SVG rendering includes custom axis lines and labels, with data sourced from a CSV file.

Aakhilgupta11

78% match

Loading thumbnail…

ICE 6: Scientific Data Visualization

This example visualizes the total marks of 17 students in a semester as a horizontal bar chart. The SVG rendering uses React and D3 v5, with data loaded from a CSV file via `d3.csv`. Scales include `scaleBand` for student names on the y-axis and `scaleLinear` for marks on the x-axis, while `xScale.ticks()` generates gridlines, and colored rectangles represent each student’s score.

Nnagarajuobbineni

78% match

Loading thumbnail…

Student Scores Bar Chart

This bar chart displays the scores of twelve students, with each horizontal bar representing an individual’s score from 10 to 99. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and SVG `rect` elements with a hover effect that reduces opacity. Data is loaded from an external CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`.

Pprudhvi

77% match