Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aaaronbalthaser
Last edited Nov 15, 2017
Created on Nov 14, 2017

A horizontal stacked bar chart displays test results across seven named suites, with each bar segmented by passed, not run, failed, blocked, and not applicable counts. The visualization uses D3 v4’s scaleBand for the y-axis and scaleLinear for the x-axis, rendering SVG through an appended `<g>` element. A responsivefy function adjusts the chart’s viewBox and dimensions to fit its container. Axis ticks are formatted as integers, and colors are assigned via d3.scaleOrdinal with the schemeCategory20 palette.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A set of vertical bars displays a small numeric array, with bar heights proportional to values and fill colors interpolating from red to green based on each value’s position in the data range. The visualization uses d3.scaleLinear for the y-axis and color mapping, d3.scaleBand for horizontal positioning, and d3.schemeCategory20 as a fallback palette. Each rectangle is appended to an SVG canvas, with blue strokes outlining the bars. The code computes bar positions and heights directly from the scales, rendering the chart entirely with D3 v4.

TTollyCoburn
83% match
Loading thumbnail…

fresh block

A horizontal bar chart displays five names with scores from a static JSON array, rendered as SVG rectangles with light green fills and black strokes. Hovering a bar scales it horizontally to double width, turns it orange, and fades non-hovered bars to 50% opacity; mouseout reverses these effects. The code uses D3 v4 selections, `style('transform', 'scaleX(...)')`, and custom functions for fill and opacity changes, with text labels positioned beside each bar.

Aaaronbalthaser
83% match
Loading thumbnail…

fresh block

A bar chart displays seven subjects—including Mathmatics, Geography, Spelling, Reading, Science, Horror, and Flimsy—with scores from 52 to 97 on a 0–100 scale. The chart uses an SVG rendered with D3 v4, employing `d3.scaleLinear` for the y-axis and `d3.scaleBand` for the x-axis. Rectangles are filled steelblue, and the bottom axis labels are rotated -45 degrees. The chart is responsive via a custom `responsivefy` function that adjusts the SVG’s viewBox and dimensions on window resize.

Aaaronbalthaser
83% match
Loading thumbnail…

fresh block

A horizontal bar chart displays the number of cases by resolution type, using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Rectangles represent each value, with a custom tooltip showing the category and amount on mouseover. Data loads from a CSV file via d3.csv, and axes are drawn with d3.axisBottom and d3.axisLeft under d3.v4.

GGoomble
83% 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
82% 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
82% 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
81% match
Loading thumbnail…

fresh block

A simple bar chart displays five fixed values as vertical bars rendered in pink with gray outlines. The bars are spaced evenly across an SVG canvas, with their heights corresponding directly to the data values. The chart uses d3.scaleLinear to map the data extent to a vertical range, though the y-position is hardcoded. Bars are appended via d3.selectAll and the enter selection, with dimensions set through the width, height, x, and y attributes.

Aalexanderhanssen
81% match