neues barchart v3

100%

neues barchart v3

✓ Published3🌍 Public

Last edited Aug 24, 2020

Created on Aug 24, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

88% match

Loading thumbnail…

Fork of neues barchart v3

This example visualizes the absolute frequencies of categorical data columns ("note" and "student") as a bar chart. A dropdown menu selects which column to display, and each bar shows the count alongside a tooltip on hover, with highlighted bars displaying divergence annotations. Built with React and D3 v5, it uses `d3.nest()` for data aggregation, `scaleBand` and `scaleLinear` for scales, and `axisBottom`/`axisLeft` for axes. SVG rendering includes animated hover effects and mouse event handlers for interactivity.

DDhiva21

86% match

Loading thumbnail…

barChart and pieChart V3

This example shows how interactive bar charts and pie charts can be built with React and D3 v5, allowing users to switch between chart types and select different categorical columns from a dropdown menu. The visualization displays absolute frequencies of student grades and degree programs, with hover tooltips showing values or percentages, and animated transitions when switching data. It uses D3’s scaleBand, scaleLinear, scaleOrdinal, nest, pie, arc, and axis components, rendered as SVG with transitions and animation delays, plus custom tooltip handling via mouse events.

SSchmittYannic

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

85% match

Loading thumbnail…

bar and pieChart

This interactive visualization lets users explore the absolute frequencies of categorical values within a dataset, specifically looking at student grades and degree types. The main view is a bar chart that can be toggled to a pie chart, with a dropdown menu to select which category to display. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `schemeCategory10` for the bar chart, and `d3.pie`, `d3.arc`, and custom `attrTween` animations for the pie chart. The implementation includes hover tooltips and animated transitions when switching chart types or data columns.

SSchmittYannic

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

82% match

Loading thumbnail…

Barchart with transitions, divergence Values and toolkit changed

This bar chart displays the absolute frequencies of six ordinal categories, such as "sehr gut" and "ungenügend," with a horizontal grid and y-axis label. Built with D3 v5, the visualization encodes values as bar heights and includes interactive hover transitions that enlarge the selected bar and show a tooltip with its category and value. The chart also renders data value labels above each bar and a divergence text (not implemented in the code). Axes are drawn using `d3.axisLeft` and `d3.axisBottom`, with scales from `d3.scaleLinear` and `d3.scaleBand`, while styling is applied via CSS classes.

SSchmittYannic

80% match