My first barchart

100%

My first barchart

✓ Published0🌍 Public

Last edited Apr 2, 2015

Created on Apr 2, 2015

The bar chart presents voter turnout percentages per Cologne district, with horizontal bars sorted in descending order. The visualization uses a simple SVG barchart created with the d3 v3 library. The code loads a CSV file named "veedel_data.csv" and sorts the data by the `wahlbeteiligung` field using `d3.descending`. Each bar's length maps to the turnout value, and hovering over a bar reveals a tooltip showing the district name and turnout percentage.

AI-generated description

Similar vizzes

Loading thumbnail…

My first barchart

This bar chart displays voter turnout percentages across Cologne districts, sorted in descending order with district names and turnout values shown as tooltips on hover. Rendered as SVG rectangles, each bar’s width maps directly to the `wahlbeteiligung` CSV field. The code uses D3 v3’s `d3.csv` for data loading, `d3.descending` for sorting, and standard SVG selections (`selectAll`, `data`, `enter`) to bind data and append `title` elements for interactivity.

PP3nny

97% match

Loading thumbnail…

My first barchart

This is a simple horizontal bar chart built with D3.js (v3) that visualizes voter turnout across Cologne city districts, sorted in descending order by the `wahlbeteiligung` value. The chart uses SVG rectangles, with each bar’s width proportional to the turnout percentage and its vertical position spaced by index. The code loads data from a CSV file using `d3.csv` and appends tooltips via the SVG `title` element to display each district’s name and turnout. The visualization primarily demonstrates basic data binding, sorting, and attribute manipulation with D3’s selection methods.

PP3nny

95% match

Loading thumbnail…

Cleaning Up

This visualization shows voter turnout percentages across Cologne’s distinct neighborhoods, or *Veedel*, as horizontal bars sorted in descending order. Using D3 v3, it employs an ordinal scale with `rangeRoundBands` for the y-axis and linear scales for the x-axis, rendering SVG rectangles and dual top/bottom axes via `d3.svg.axis`. The data, sourced from Offene Daten Köln’s 2014 local election records, is loaded from a CSV, with hover effects and tooltips revealing exact percentages.

PP3nny

84% match

Loading thumbnail…

Scatterplot Kölner Wahlbeteiligung vs Arbeitslosenquote

This visualization shows the relationship between voter turnout and unemployment rates across Cologne’s districts, with each circle representing a district. It uses D3 v3 to draw an SVG scatterplot, sorting data by turnout and animating the points from left to right using `transition().duration()` and staggered delays. The x-axis displays unemployment percentage, the y-axis shows turnout percentage, and hovering highlights circles. Data comes from the Offene Daten Köln portal for the 2014 municipal election, loaded via `d3.csv` from an external file.

PP3nny

74% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This chart visualizes polling results for the 2025 German federal election, showing the percentage of votes for each party. The bar chart displays values from a CSV file, with each bar colored by party and labeled with its percentage. A translucent, glowing interval rectangle behind each bar represents the standard error. Built with React and D3 v7, the visualization uses `scaleBand` and `scaleLinear` for axes, and clicking a bar dims the others for focused comparison.

CChristoph Kinkeldey

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

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

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

69% match