Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
Jjenniferslagt
Last edited Jan 22, 2020
Created on Jan 20, 2020
Forked from HTML Starter

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.

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

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.

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
87% 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
75% 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
73% match
Loading thumbnail…

A special scatterplot with d3

This scatterplot visualizes survey responses on police contact, split into two groups based on whether respondents initiated contact or were approached by police. Each country appears as a distinct color, with circles positioned along the x-axis by rapportcijfer (1–10) and separated vertically per country. Circle size encodes the percentage of respondents giving each rating. The visualization uses d3.json to load data, d3.nest for aggregation, d3.scaleLinear for axes, and d3.scaleOrdinal with d3.schemeDark2 for colors, rendering circles as SVG elements.

LLaurens
73% 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
73% match
Loading thumbnail…

Untitled

This interactive bar chart displays the percentage of survey respondents by racial group who overreport voter turnout in three U.S. election years (2008, 2012, 2016). Buttons trigger updates between datasets, animating bar heights via D3 transitions. The visualization uses D3 v6 with `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and d3-axis to render both axes. Each bar’s y-position and height are recalculated from the value property, with a 1000-millisecond transition applied to all entering, updating, and exiting rectangles.

Mmandu427
73% match