Skip to main content
SimilarExport ZIP
100%

Average Attendance for each module

✓ Published0🌍 Public
Rremyapk
Last edited Apr 1, 2020
Created on Mar 20, 2020
Forked from HTML Starter

This bar chart displays the average attendance percentage for each university module, using data from a CSV file. The visualization is built with D3.js v4 and renders as an SVG, with bars animating into place via a transition. Each module is labeled on the x-axis, while the y-axis shows percentages. Hovering over a bar triggers a mouseover event that highlights it in orange, enlarges it, and displays its exact value as a text label.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Average Attendance for each module

This D3.js v4 bar chart displays the average attendance percentage for each module, with bars animated sequentially on load. Hovering over a bar highlights it in orange, increases its size, and reveals the exact percentage value above it; moving the mouse away restores the original appearance. The visualization loads data from `attend_data.csv`, uses an SVG canvas, and leverages D3 scales for the band and linear axes, along with transitions for the hover effects.

BBrahmareddym1996
92% match
Loading thumbnail…

Average Attendance for each module

This bar chart displays the average attendance percentage for each module, with bars colored steelblue and one highlighted in orange. It uses d3.v4 to bind data from attend_data.csv to SVG rect elements within a 600×500 viewport. The x-axis maps module codes while the y-axis encodes attendance values, with margins set via a margin object. The chart reads from a preprocessed CSV and renders statically without transitions or interactive features.

Rremyapk
92% match
Loading thumbnail…

Average Attendance for each module

This visualization shows the average attendance for each module using a bar chart, with the y-axis representing the percentage of attendance and the x-axis displaying different module codes. The bars animate as they grow to their final height, and hovering over a bar highlights it in orange and displays its exact attendance value as a text label. The code uses D3.js v4 APIs like `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, along with SVG transitions for animation. The data is loaded from a CSV file containing course names, ages, and average marks.

BBrahmareddym1996
92% match
Loading thumbnail…

Average Attendance for each module

This visualization presents average attendance percentages for university courses, displayed as animated bar charts that grow sequentially upon load. Built with D3 v4, it uses `d3.scaleBand` and `d3.scaleLinear` to map course names and attendance values, with SVG rects transitioning via `transition.attr` and easing functions. Interactive mouseover and mouseout handlers alter bar width, position, and fill color between steelblue and orange while temporarily displaying the exact percentage value.

BBrahmareddym1996
90% match
Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the average marks for over one hundred university modules, ranked with the module name on the x-axis and the percentage score on the y-axis. The chart highlights a user’s hovered bar by dimming the hovered bar and displaying the percentage difference from it for all other bars via dynamically appended text elements. Built with D3.js v5, the visualization loads data from a CSV file using `d3.csv` and renders as an SVG with animated opacity transitions. Gridlines, a reference line, and axis labels are drawn using `d3.axisLeft` and `d3.axisBottom`.

WW9183907
83% match
Loading thumbnail…

Average Mark for each module

A bar chart displays the average marks for students aged 18–69, with each bar representing an age group's mean score. The visualization uses a vertical bar layout with percentage-based y-axis labels and animated bar entrance transitions. Built with D3 v4, the chart employs `d3.scaleBand` for x-axis positioning and `d3.scaleLinear` for the y-axis. Bars animate in sequentially using `transition().duration(400).delay(i * 50)`, while mouseover and mouseout handlers highlight bars in orange and display tooltip-like value labels. The data comes from the included `attend_data.csv` file.

BBrahmareddym1996
80% match
Loading thumbnail…

Average Mark for each module

This bar chart displays the average marks for each age group from 18 to 69, sourced from the attend_data.csv file. It uses D3 v4 with SVG rendering and animated transitions, where bars sequentially grow in height. Hovering over a bar triggers a mouseover event that highlights it in orange, enlarges it, and displays its exact value, while mouseout restores the original state. The chart includes axes with percentage tick labels and custom styling.

BBrahmareddym1996
80% match
Loading thumbnail…

Average Mark for each module

This bar chart displays the average marks for each age group from 18 to 69, sourced from the attend_data.csv file. It uses D3 v4 with SVG rendering and animated transitions, where bars sequentially grow in height. Hovering over a bar triggers a mouseover event that highlights it in orange, enlarges it, and displays its exact value, while mouseout restores the original state. The chart includes axes with percentage tick labels and custom styling.

BBrahmareddym1996
80% match