Skip to main content
SimilarExport ZIP
100%

test

✓ Published0🌍 Public
SSchmittYannic
Last edited Aug 23, 2020
Created on Aug 23, 2020

This example visualizes the frequency of student grades (from "sehr gut" to "ausreichend") split by degree type (master or bachelor) as a stacked bar chart. The data is aggregated using `d3.nest()` and `rollup` to count occurrences per category, then transformed into a stacked layout with `d3.stack()`. The chart uses D3 v5’s `scaleBand` for the x-axis and `scaleLinear` for the y-axis, rendering bars as SVG groups. The code is based on a bar chart from a jsFiddle and a toolkit from bl.ocks.org, with styling defined in an external stylesheet.

AI-generated description

BarChart code from https://jsfiddle.net/matehu/w7h81xz2/ and Code of Toolkit from http://bl.ocks.org/1Cr18Ni9/bfadecc96183c48d13b7b90bcf358a61

MIT Licensed

Similar vizzes

Loading thumbnail…

neues barchart v3

This interactive bar chart displays the absolute frequencies of categorical values from a dataset of student grades and degree programs. Users can switch the category displayed on the x-axis via a dropdown menu, which triggers a re-render of the chart. Built with D3 v5 and React, the visualization uses `d3.nest()` for aggregation, `d3.scaleBand()` and `d3.scaleLinear` for axes, and animated transitions on hover to highlight bars and show value differences. Tooltips appear on mouseover, while axis labels and titles update dynamically.

SSchmittYannic
80% match
Loading thumbnail…

barchart basic

This bar chart displays the distribution of categorical grades (from “sehr gut” to “ungenügend”) with their absolute frequencies. Built with D3 v5, it uses scalable vector graphics (SVG) to render rectangular bars for each category, with axis scales defined via `d3.scaleLinear` and `d3.scaleBand`. The chart includes gridlines and value labels. Hovering over a bar triggers a smooth transition that enlarges the bar, increases its transparency, and displays the numeric difference between that bar and each other bar’s value.

SSchmittYannic
79% match
Loading thumbnail…

neues barchart v1

This bar chart displays the distribution of categorical grades, from "sehr gut" to "ungenügend," with bars colored in a dark blue and value labels above each bar. It uses React to render an SVG element and relies on D3 v5 APIs including `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`. Hovering over a bar triggers a tooltip that shows the category and its numeric value, while axis labels and a title are generated dynamically. The chart uses a margin-based layout with rotated x-axis tick labels for readability.

SSchmittYannic
77% match
Loading thumbnail…

neues barchart v2

This interactive bar chart visualizes survey responses across six categorical grades, from "sehr gut" to "ungenügend," with each bar's height encoding the count of responses. Built with React and D3 v5, the visualization uses SVG rendering and includes a tooltip that displays the category and value on hover. The chart employs `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with axis labels and a title. Hovering a bar triggers a transition animation that highlights the selected bar while dimming others, and overlays divergence values showing the difference between the hovered bar and each other bar's value.

SSchmittYannic
77% match
Loading thumbnail…

Making a bar chart: my grades

This example shows a horizontal bar chart of a student’s final grades in university courses, with each bar’s length proportional to the numeric grade. The chart uses categorical labels on the y-axis and a linear scale on the x-axis. Built with D3 v5, the code loads data from a CSV file using `d3.csv`, creates scales via `d3.scaleLinear` and `d3.scaleBand`, and renders axes with `d3.axisLeft` and `d3.axisBottom`. Bars are appended as SVG rectangles, and the styling is defined in an external CSS file.

DD0no
75% match
Loading thumbnail…

Students Grades of Bar Chart

This horizontal bar chart displays student grades, with each student’s name on the y-axis and their corresponding numerical grade on the x-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG bars. Data is loaded from a CSV file, and interactive features include tooltips on mouseover and an alert on click, triggered via `select` and event listeners. Grid lines and axis labels are conditionally configured through a chart configuration object.

SshanLU999
75% match
Loading thumbnail…

barChart and pieChart V2

This interactive visualization lets users explore categorical data through bar and pie charts, dynamically switching between chart types and selecting which data column to aggregate. It displays absolute frequencies for university student grades across different degree programs. The implementation uses React with D3 v5, employing `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for the bar chart, and `d3.pie` with `d3.arc` for the pie chart. Both charts feature animated transitions via `transition().duration()`, hover tooltips, and interactive dropdown menus for column selection.

SSchmittYannic
74% match
Loading thumbnail…

Untitled

This example shows the distribution of student counts across letter grades, with horizontal bars colored in a solid blue tone. The chart uses D3.js v6 to construct an SVG visualization, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. It renders rectangles whose widths are proportional to `num_students` values, with axes generated via `d3.axisLeft` and `d3.axisBottom`. The data is hardcoded in the script rather than loaded from the available CSV file.

Hhanulik.ondrej@gmail.com
74% match