fresh block

100%

✓ Published0🌍 Public

Last edited Apr 30, 2018

Created on Apr 30, 2018

A grouped bar chart compares satisfaction levels between men and women, with each gender broken into four categories: Not Satisfied, Not Much Satisfied, Satisfied, and Very Satisfied. The bars are colored by category using a categorical color scale, and a tooltip appears on mouseover. Built with D3 v3, the visualization uses ordinal scales for the x-axis groups and categories, a linear scale for the y-axis, and SVG rendering. The data is hardcoded in the script as an array of objects with percentage values for each group.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This grouped bar chart compares “Not Satisfied” percentages between Men and Women, using two simple bars on a shared linear scale. The visualization is built with D3 v3 and rendered as SVG, with each group positioned by an ordinal scale (x0) and each bar sized by a linear y-axis. Color is assigned via d3.scale.category20, and the tooltip and axis code is present but commented out, leaving only the core bar rendering active.

KKacieW

95% match

Loading thumbnail…

fresh block

A horizontal bar chart displays categorical data as colored rectangles, where each bar's length corresponds to a numeric range (start to stop) and its color and vertical position encode an orientation (forward or reverse). The visualization uses D3 v4 to load JSON data via `d3.json`, bind it to SVG `rect` elements, and set attributes like `x`, `width`, `y`, and `fill` based on the data values. Forward-oriented bars appear in aqua on the upper row, while reverse-oriented bars are blue on the lower row, clearly separating the two categories.

BBrieLewis

80% match

Loading thumbnail…

fresh block

A bar chart displays two percentage values (`perc1` and `perc2`) for sixteen letter-labeled categories (A–P) on a light orange background. Hovering over a blue circle recolors all bars blue, while clicking it triggers a staggered elastic transition that swaps each bar's height to its second percentage value. Built with D3 v4, the visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `transition.attr` with `d3.easeElastic` and per-bar delays for the animated update.

MMartinanddre

79% match

Loading thumbnail…

fresh block

A bar chart displays six hardcoded numeric values as vertically scaled blue rectangles, with white strokes separating them. Each bar's height is proportional to the value divided by the maximum of the dataset, computed using `d3.max`. The chart renders in SVG via `d3.select` and `selection.append`, positioning bars with `attr('x')` based on their index and using a percentage-based height. The data is static, and the visualization uses d3.v4 without axes or labels.

MMilliners-Son

79% match

Loading thumbnail…

fresh block

This example displays a simple bar chart of five categorical values labeled A through E, with bar heights corresponding to numeric values. Blue rectangles are drawn on an SVG canvas using D3 v4’s data join, with each bar’s x-position calculated sequentially based on a fixed width of 50 pixels. The vertical position and height derive from a constant chart height of 300 pixels minus each value, so taller bars extend upward from a shared baseline. The code uses `d3.select`, `selectAll`, `enter`, and `append` to bind the hard-coded array of objects and render the visualization.

RRonolibert

79% match

Loading thumbnail…

fresh block

A simple bar chart displays the relative values of four fruit categories (Apple, Banana, Orange, Kiwi) with randomly generated heights, encoded as steelblue rectangles. The visualization uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the numeric y-axis, with axes rendered via d3.axisBottom and d3.axisLeft. Data is embedded directly in the script as a static array, and the chart is drawn with SVG elements. The y-axis tick label for the sixth tick is manually replaced with the text “Word,” while all other ticks remain default numeric values.

AAlexDaGr8

78% match

Loading thumbnail…

fresh block

A stacked bar chart displays the percentage of women in the US labor force across six age groups for the years 1970, 1990, and 2012. The chart uses a categorical color scale for age cohorts and a linear y-axis with percentage ticks. Built with D3 v3, the visualization loads data from a CSV file and renders as SVG, using ordinal and linear scales, axes, and series of rectangles grouped by year. A legend maps colors to age ranges.

MMrajyalakshmi

78% match

Loading thumbnail…

fresh block

A set of vertical bars represents five data values, with one bar highlighted in red and the rest in blue, showing a clear visual contrast for the largest value. The chart uses D3 v4 to bind an array of numbers to SVG rectangles, scaling bar heights linearly from a maximum domain of 2500 down to zero. The code applies the scale to position each rectangle’s top and height, while a fixed bar width and white stroke separate the bars for readability.

44xDMG

78% match