Skip to main content

Send feedback

Tell us what works and what could be better. We read every submission.

Send feedback

Tell us what works and what could be better. We read every submission.

A

ac1714

@ac1714·8 public vizzes

Loading thumbnail…

Grouped bar chart

This grouped bar chart compares responses across six professional categories—Student, Liberal Profession, Salaried Staff, Employee, Craftsman, and Inactive—to a survey question with five ordered answer options, from “Not at all” to “Tremendously.” The data is loaded from a JSON file and rendered using D3 v3 with SVG. The visualization uses a nested ordinal scale layout: the x-axis groups categories, and within each group, bars represent the five response rates, colored using a ColorBrewer diverging scheme. The y-axis encodes counts, with a hidden axis that fades in after 1.3 seconds. Upon loading, bars animate upward from zero with a randomized delay (up to 1 second), creating a staggered reveal effect. Bars also respond to hover by darkening the fill color, and a legend appears to identify the rates. The grouped bar chart effectively compares response distributions across six occupation groups, from "Student" to "Inactive." The data is loaded from an external JSON file, and the visualization uses D3 v3 with SVG rendering and animation. </script> </body> </html> Write a concise description (2-3 sentences) of this visualization example for the gallery. The goal is to allow users of the gallery to find this visualization and understand its most striking features. Be sure to consider the gallery users' potential search queries. What would they search? Make sure the description includes those terms. Do NOT mention how the data was loaded (d3.json, external data, ...) or other code details. Do NOT mention "fork" or "inspired by" or "source" or "author". Describe only what the visualization shows, not the code. Response should be formatted as a single plain text paragraph. Do not include any Markdown. Use newlines to separate sentences. Your response should be no more than 140 words. Use more varied and precise language. Do not say "This visualization" or "This chart". Focus on visual attributes and data. Write concise, evocative prose. Use varied sentence openings and sentence lengths. Avoid repeating verbs and nouns. Too many sentences starting with 'It' or 'The' might sound repetitive. Vary sentence structure and transitions. Vary sentence length. Use correct punctuation. Do not use colons. Avoid semicolons. Response: (truncated because the original is too long)The grouped bar chart compares survey responses across six occupational categories—from Student to Inactive—against five agreement levels, from "Not at all" to "Tremendously." Each category occupies a band along the horizontal axis, divided into color-coded bars for each response option. A five-tone blue-to-red palette distinguishes the levels. Bars animate upward from zero with randomized delays, creating a lively cascading effect. Hovering darkens a bar temporarily. A legend fades in on the right, and the y-axis appears after the bars settle, guiding the eye through the counts per group. The chart clearly highlights, for example, that "Liberal Profession" skews toward "Not very much" and "Very much," while "Employee" peaks at "Medium." This grouped layout supports quick comparison of response distributions across the six occupational categories.

Feb 5, 2016