Bar chart with D3.js

100%

Bar chart with D3.js

✓ Published0🌍 Public

Last edited May 25, 2020

Created on May 17, 2020

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`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar chart

The bar chart displays average marks for hundreds of modules, sorted alphabetically along the y-axis, with bars extending horizontally to represent scores from 0 to 85. It uses SVG and animated transitions via d3.transition and easeLinear. The visualization employs d3.scaleLinear for both x-position and bar color, transitioning from steelblue to grey based on mark value, and d3.scaleBand for the categorical y-axis. Data is loaded from a CSV file using d3.csv.

WW9183907

88% match

Loading thumbnail…

Fork of Bar chart

A horizontal bar chart displays the average grade achieved for a list of university module codes, sorted by grading scale. The visualization emphasizes the distribution of marks across many modules, using a color gradient from steelblue to grey to represent low to high scores. Built with D3 v5, it uses `scaleLinear` for the x-axis and color scale, `scaleBand` for y-axis categories, and `axisBottom` with custom tick formatting. SVG rectangles render the bars with `transition` animation over a duration of 1000ms, transitioning their width and fill. The data is loaded from a CSV file via `csv` and parsed for numeric marks.

NNarayana Reddy

85% match

Loading thumbnail…

Untitled

This example presents a bar chart of average marks for university modules, with each bar representing a module code. The chart uses D3 v4 within a React framework to render SVG elements. Bars animate in sequentially using a transition with linear easing, and hovering over a bar triggers a mouseover event that highlights it in green, expands its width, and displays its average mark as a label. A mouseout event restores the bar’s original style and removes the label. The data comes from a CSV file containing module codes, student counts, and average marks.

VVishwas2629

85% match

Loading thumbnail…

A scatter plot Graph.js

This scatter plot shows the average marks achieved across university modules, with each module represented as a circle positioned along a linear mark scale and a point-based module axis. The visualization uses D3 v5 to load CSV data, apply linear and point scales, and render SVG circles with a steelblue fill. It includes custom axes with tick lines, formatted tick labels, and a marks axis label. The graph emphasizes distribution and comparison of module performance through clear spatial encoding.

WW9183907

83% match

Loading thumbnail…

Average Attendance for each module

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.

Rremyapk

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

82% match

Loading thumbnail…

Module_wise Average Mark

This visualization displays average marks for individual university modules using a bar chart. Each module is represented by a vertical bar, with its height corresponding to the module’s average mark, and the bars are colored green by default. When the user hovers over a bar, it changes to pink, highlighting the selected module. The chart uses D3.js v4 to bind the dataset and render SVG rectangles, with the data coming from a JSON array containing module codes, marks, and student counts.

VVishwas2629

82% 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

81% match