Skip to main content
100%

fresh block

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

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
84% 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 simple bar chart displays seven static blue rectangles on an SVG canvas, with each bar’s height proportional to a value in a hardcoded JavaScript array. The bars are positioned horizontally using a fixed width of 50 pixels per bar and aligned to a baseline of 300 pixels from the top. The visualization uses D3 v4’s selection and data-join methods (`selectAll`, `data`, `enter`, `append`) to create the rectangles, setting their `x`, `y`, `width`, `height`, `fill`, and `stroke` attributes directly. No axes, labels, or interactions are included; the chart just shows the raw data values as basic shapes.

MMasonLyons
83% match
Loading thumbnail…

fresh block

A simple bar chart displays seven blue rectangles of varying heights on a fixed 500-by-500 SVG canvas. The chart encodes the values from a hardcoded array—100, 250, 175, 200, 120, 50, and 60—as bar heights, with each bar positioned sequentially along the x-axis using a 50-pixel width. The visualization uses D3 v4’s data join (`selectAll` and `data`) to bind the array, then appends `<rect>` elements with `attr` calls to set x, y, width, height, and fill properties. White strokes separate adjacent bars.

VVictorHom
83% match
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 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.

Aaaronbalthaser
83% match
Loading thumbnail…

fresh block

A simple bar chart displays five hardcoded values—10, 30, 15, 20, and 100—as vertical rectangles. The chart uses D3 v4’s selection and `append` API to create SVGs directly: `d3.select("body").append("svg")` builds the canvas, then `.selectAll("rect").data(data).enter()` generates bars whose height, y-position, and opacity are derived from each data value. Text labels repeat the same numbers below each bar using `d3.selectAll("text")`, with fixed styling for font size and monospace family. All geometry and styling are set via SVG attributes and styles, with no axes or gridlines present.

GGregory-Howard
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
83% match