Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published2🌍 Public
Jjenniferslagt
Last edited Jan 22, 2020
Created on Jan 22, 2020
Forked from Untitled

A grouped bar chart compares survey responses about police politeness across six education levels in the Netherlands. Each group represents a response option, from "Helemaal mee oneens" to "Helemaal mee-eens," with bars colored by education level. The chart uses D3.js v5 with React, rendering as animated SVG. It employs `d3.scaleBand` for group and bar positioning, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for categorical colors, with data loaded from a CSV file. Clicking legend items filters the displayed bars.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A grouped bar chart shows the correlation between education level and the perceived politeness of police contact, based on survey data from respondents. The chart displays the share of respondents (as a percentage) per education level for each of five Likert-scale responses, from “Helemaal mee oneens” to “Helemaal mee eens.” The code uses D3 v5 with SVG rendering, reading a CSV file, and applies scales such as `d3.scaleBand` and `d3.scaleLinear` for layout. A legend allows clicking on a category to filter the bars via a custom update function.

Mmab3105
92% match
Loading thumbnail…

Untitled

This interactive grouped bar chart visualizes the correlation between respondents' education level and their experiences with police contact, using data from a survey with responses ranging from "Helemaal mee oneens" to "Helemaal mee-eens". The chart displays education levels on the x-axis and the percentage of respondents on the y-axis for each response category, with a legend that allows users to click on education levels to filter which bars are displayed. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the grouped and inner bar positioning, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` to assign colors to each education category, rendered as SVG with a black background.

Jjenniferslagt
92% match
Loading thumbnail…

Untitled

This grouped bar chart compares survey responses about police politeness across six education levels, from “no education” to university. Each education level is broken into five agreement categories, ranging from “completely disagree” to “completely agree.” The chart uses d3.scaleBand for the grouped bars and d3.scaleOrdinal for color encoding, rendering in SVG within a React framework. Data comes from a CSV file, with percentages displayed on the y-axis.

Jjenniferslagt
91% match
Loading thumbnail…

Untitled

This visualization shows survey responses across six professional categories, with bars colored by five response levels ranging from "Not at all" to "Tremendously." Each category displays a cluster of bars for the different response rates. The chart uses d3.scale.ordinal for the x-axis, d3.scale.linear for the y-axis, and d3.svg.axis for the axes. Rectangles are animated into place using transition with random delays, and hover effects darken bar colors. A legend appears sequentially, and the y-axis fades in after the bars animate. The data comes from data.json.

EEagleV22
79% match
Loading thumbnail…

Untitled

A nested bar chart displays the distribution of three values across two groups and three categories. The visualization uses D3 v3’s ordinal scales (`d3.scale.ordinal`) and linear scale (`d3.scale.linear`) to position bars, with SVG rendering. Data is loaded from CSV (`data.csv`) and structured via `d3.nest` into hierarchical group and category levels. Axes are drawn with `d3.svg.axis`, and nested `<g>` elements group bars by group and category.

Mmab3105
77% match
Loading thumbnail…

Untitled

This bar chart displays the number of students for various grades and locations, with bars colored blue and axes labeled "Grades" and "Num_students." The visualization uses D3.js v6 to create an SVG rendering, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. Data is hardcoded in an array of objects, while axes are generated with `d3.axisLeft` and `d3.axisBottom`. The chart includes a pink background rectangle and console logs for debugging scale behavior.

Hhanulik.ondrej@gmail.com
76% 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
76% match
Loading thumbnail…

Untitled Document

This interactive D3.js visualization displays a grouped bar chart showing the frequency of drug categories (1-6) across different survey categories (2-5), with each group further broken down into colored sub-bars. The chart uses d3.scaleBand for the grouped axes, d3.scaleOrdinal for color encoding, and d3.nest for hierarchical data aggregation. Bars animate from zero to their final heights using randomized delays with SVG transitions. The visualization is built on D3 v4 and Bootstrap, reading data from a local CSV file.

GGerardoFurtado
75% match