Fork of Fork of HTML Starter

Fork of HTML Starter

This bar chart displays the average subject score for each favorite subject, with bars animating upward on load. Hovering over a bar turns it red and shows a tooltip with the exact value. Using D3 v7, the visualization fetches DSV data from a gist, parses it with `d3.dsvFormat`, aggregates values via `d3.rollup` and `d3.mean`, and renders an SVG with `scaleBand` and `scaleLinear` axes. Interactive transitions use `transition().duration()`, while mouse events update tooltip visibility and bar color.

88% match

Fork of Fork of STUDENT'S SPORTS DATA VIZ

A bar chart displays the average score for each favorite subject, derived from a CSV dataset via `d3.csv` and aggregated with `d3.rollup`. Bars animate upward from the baseline using `transition().duration(900)`, and hover interactions change fill color and show a tooltip. The visualization uses D3 v7 with SVG rendering, including axes generated by `d3.axisBottom` and `d3.axisLeft`, while subject labels are rotated for clarity. The title and axis labels are added as SVG text elements, and all data is filtered for valid subject and score entries before aggregation.

86% match

Mmadalahyndavi123@gmail.com

Fork of HTML Starter

A bar chart displays the grades of 100 individual students, with each bar color-coded by letter grade category from A (green) through E (red). The chart uses an ordinal color scale and a linear grade axis from 0 to 100, with student names rotated along the bottom axis. An interactive tooltip shows the student name, numeric grade, and category on hover. The code loads data from a local CSV file using `d3.csv` and builds the visualization with D3’s band and linear scales, axes, and tooltips, rendered as an SVG.

86% match

Fork of HTML Starter

This visualization summarizes student and sports data from a CSV file, displaying key statistics such as total student count, unique favorite subjects, and the top team. It presents these findings in a simple SVG bar chart that shows team counts, with axes labeled using D3's `d3.axisBottom` and `d3.axisLeft`. The data is loaded via `d3.csv` and processed using `d3.rollups` and `d3.scaleBand`, resulting in an accessible chart with a summary section and rotated x-axis labels for readability.

86% match

Fork of

A horizontal bar chart displays average marks for courses, with bars colored on a gradient from steelblue to grey based on value. The visualization supports hover tooltips and click alerts, and includes axis labels and gridlines. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG elements, with data loaded from a CSV file.

NNarayana Reddy

Fork of Fork of Student Scores Bar Char

This horizontal bar chart displays student scores from a CSV file, with each student’s name on the y-axis and their score on the x-axis from 0 to 100. Purple rectangles represent the scores, and hovering over a bar reduces its opacity. The visualization uses D3 v5 with `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and render the SVG. The chart is titled “Bar Chart of Student Scores” and includes labeled axes with a fixed margin layout.

Oolddb

Ssainishanthreddyk@gmail.com

Fork of bar chart

A D3.js bar chart displays the average math scores for students grouped by academic department, using data from a CSV file containing individual student records. The chart aggregates the scores per department and visualizes them as blue bars that change to orange on hover. The implementation uses `d3.group` and `d3.mean` to compute averages, with `d3.scaleBand` for the category axis and `d3.scaleLinear` for the score axis. The SVG rendering includes rotated x-axis labels and clearly labeled axes for the department and average math score.

Fork of Fork of STUDENT'S SPORTS DATA VIZ

This visualization displays individual student subject scores as orange bars alongside skyblue bars representing the average score for each favorite subject. The bar chart animates upward on load using D3 transitions, with hover interactions changing bar color and showing a tooltip with the exact score. The code uses d3.text to load tab-separated data from a GitHub gist, d3.rollup to compute means, and d3.scaleBand with d3.axisBottom and d3.axisLeft to render the SVG chart.