fresh block

100%

✓ Published0🌍 Public

Last edited Mar 10, 2017

Created on Mar 10, 2017

A simple SVG bar chart displays three static vertical bars and the text “Texto planito, pero SVG!” in Spanish. The page uses D3 v4 to append a fourth rectangle via `d3.select('svg').append('rect')`, setting its position and size with `.attr()`. The chart is rendered directly in the browser from hardcoded coordinates, with no data file or external dataset. The color scheme—magenta text on a teal background—highlights the contrast between the pre-authored SVG elements and the dynamically added one.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A set of five blue rectangles forms a simple bar chart, with each bar’s height directly proportional to values from an inline array. The code uses D3 v4’s selection and data-binding methods (`selectAll`, `data`, `attr`) to map each data point to an SVG `rect`, positioning bars side‑by‑side along the x‑axis and scaling their y‑positions and heights from a fixed baseline. The bars are evenly spaced using a constant `rectWidth`, while the SVG’s total height is fixed at 300 pixels. The chart is rendered entirely with SVG elements and hardcoded data, without scales or axes.

DDanielAguirre

86% 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

85% match

Loading thumbnail…

fresh block

This example shows a simple bar chart rendered as a series of vertical rectangles, each with a fixed width and varying heights that step down from left to right. Built with D3 v4 and SVG, the code appends each rectangle directly to the document body, setting explicit x, y, width, and height attributes. A text element also displays an instructional message for the viewer. The data is hardcoded in the markup rather than loaded from an external source.

KKirun1

85% match

Loading thumbnail…

fresh block

A stacked bar chart shows three horizontal rectangles in teal and gold, arranged vertically, with a black central triangle and a white polygon outline at the upper left. The chart renders fixed SVG shapes directly, using `d3.select` and `svg.append` to construct the scene. The bars, with widths of 270 pixels and heights of 50, sit at y-coordinates 200, 250, and 300, while the triangle connects points from (150,350) to (275,275) and (150,200). The visualization uses D3 v4 and plain SVG attributes, with no data file or interaction.

HHeywhoyou22

84% match

Loading thumbnail…

fresh block

This example shows a minimal, static visualization composed of a single filled circle rendered inside an SVG canvas, with no interactive or animated behavior. The code builds the graphic using the D3.js v5 library, selecting the body element and appending an SVG container with a circle element; the circle’s radius is set but its center coordinates are misspelled as “cv” and “cy,” leaving it positioned at the default top-left origin. The page also includes CSS class “.barras div” suggesting a bar-chart styling, but no bars are generated. The rendering approach relies on D3’s selection and DOM manipulation methods, with no data loading or complex scales involved.

JJuanma-GP

83% match

Loading thumbnail…

fresh block

A small SVG bar chart displays three horizontal stacked bars for consecutive months, with two colored series per month. The chart uses a custom d3.layout.stack() transform to compute stacked sums, then maps each bar’s width to its value and positions groups via d3.scale.ordinal() and rangeRoundBands. A yellow legend panel lists series names with color swatches, and hovering a segment updates a tooltip via d3.select() and d3.classed(). Data is hardcoded as JavaScript arrays in the block.

GGoomble

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

This example shows a simple bar chart with five blue rectangles arranged horizontally, where each bar’s height corresponds to a value in a small hardcoded array. The chart uses SVG rectangles bound to the data via d3.v4’s selection.data, with x positions computed from an index and y positions derived from a fixed chart height minus each bar’s value. The code sets width, height, fill, and stroke attributes directly on the rect elements, producing a basic static visualization without axes or labels.

JJastor11

83% match