Skip to main content
SimilarExport ZIP
100%

Bar chart

✓ Published3🌍 Public
WW9183907
Last edited May 24, 2020
Created on May 2, 2020
Forked from Untitled

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.

AI-generated description
MIT Licensed

Similar vizzes

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
88% 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
86% 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
84% 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
84% 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
84% match
Loading thumbnail…

Bar chart

This visualization uses D3.js to render a vertical bar chart of student grades, with each bar representing a module code from the provided CSV data. The chart uses a linear color scale to map grade values from steelblue to grey, while the x-axis displays the numeric grade and the y-axis lists module codes. SVG rendering with animated transitions brings the bars in over one second using D3’s `transition` and `easeLinear`. The axes are formatted using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`.

Kkalyanreddy997
83% match
Loading thumbnail…

Bar chart- New

A horizontal bar chart displays student marks from a CSV file, ranking each student from highest to lowest score. The visualization uses D3 v5 APIs including `scaleLinear` and `scaleBand` for positioning, along with `axisLeft` and `axisBottom` for axes. Bars are rendered as SVG rectangles, styled with steelblue fill and opacity. The chart includes a title, axis label, and gridlines, with data loaded asynchronously via `csv`.

Sshinida
82% match
Loading thumbnail…

Untitled

This visualization shows the average grade for each module as a bar chart. The bars are colored steel blue and transition sequentially into place. Hovering over a bar highlights it in orange, temporarily expands it, and displays a label with the corresponding mark. The code uses d3.csv to load module data and d3.scaleBand with d3.scaleLinear to map the axes, while d3 transitions add animation to the initial render and hover interactions.

Nnifemi-sys
81% match