example0

100%

✓ Published0🌍 Public

Last edited May 16, 2018

Created on May 16, 2018

Four vertical red bars stand on an SVG canvas, with heights of 40, 60, 80, and 70 pixels. The bars are drawn as rectangles, each 40 pixels wide and spaced 50 pixels apart, starting at x-coordinate 100. The code uses D3 v4 to append SVG `rect` elements to a 960×500 canvas, positioning each bar’s baseline at y=200 and filling it with red. The dataset is a simple hardcoded array, and the rendering relies on D3’s selection and attribute methods.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Test block

This example shows three red vertical bars on an SVG canvas, positioned at fixed intervals with heights of 10, 40, and 70 pixels. The bars are drawn from hardcoded data arrays rather than the included CSV file. Using D3 v4, the code selects SVG rectangles via `selectAll("rect")`, binds data with `.data()`, and applies attributes such as `x`, `y`, `height`, and `width`. It also appends text elements, though the text setup is incomplete. The canvas is 200 by 200 pixels, with bars 30 pixels wide and a 20-pixel offset.

Aadamfknapp

86% match

Loading thumbnail…

SVG Example

Five static SVG rectangles form a simple bar chart, descending diagonally from the top-left to the bottom-right. The bars have equal widths and varying heights and y-positions, creating a staircase-like visual from a hardcoded JavaScript array of objects. The example uses D3 v4’s selection API to append rectangles to an SVG canvas, setting x, y, width, and height attributes from the data. The code demonstrates basic declarative binding of data to SVG shapes without animation or axes.

CCurran Kelleher

84% match

Loading thumbnail…

SVG starter

This example demonstrates a minimal SVG-based bar chart with three static rectangles rendered in steelblue, green, and red. The SVG canvas is created by appending an `svg` element to the HTML body via D3's selection API, with a height of 500 and width of 960. Each rectangle is positioned using explicit `x` and `height` attributes, with widths fixed at 50 pixels. A loop then appends additional red rectangles at intervals of 100 pixels, though the loop condition prevents it from executing properly.

NNita

82% match

Loading thumbnail…

ekample1

Six vertical bars display six numeric values in a simple bar chart. The bars are positioned with `d3.scaleBand` along the x-axis and sized with `d3.scaleLinear` for the y-axis. Bar colors transition from blue to red based on value using a second `d3.scaleLinear` with a domain from the data extent. The SVG is rendered directly with D3 v4, using hardcoded data and a fixed 960 by 600 pixel canvas.

Aaraft

82% match

Loading thumbnail…

oefening1

Three vertical rectangles display a small bar chart from a hardcoded data array of [20, 40, 50]. Each bar’s width is proportional to its value, multiplied by ten, while height is fixed at 50 pixels and vertical positions step by 100 pixels. d3.v4’s selection, data join, and enter methods render the SVG rectangles. The code also contains commented-out attempts at circles and d3.set usage. The page uses steelblue fill for the bars on a 500‑by‑500 SVG canvas.

GGeoJonna

82% match

Loading thumbnail…

oefening2

This example shows four horizontal bars rendered as SVG rectangles, with their widths proportional to values in a static data array of [20, 40, 50, 60]. The code uses a linear scale (`d3.scale.linear`) to map data values to pixel widths, then appends rectangles via `d3.selectAll("rect").data().enter()`. Each bar is positioned vertically by index, and all bars share a steelblue fill. The visualization duplicates the same bar-drawing block twice, though only the first set of rectangles is visibly rendered.

GGeoJonna

81% match

Loading thumbnail…

fresh block

Five vertical red bars form a simple bar chart, with bar heights matching the numeric values in a hardcoded JavaScript array. The bars are drawn as SVG rectangles using D3 v4, with the `d3.selectAll('rect')` data join positioning each rectangle via `x` and `y` attributes based on its index and value. Each bar has a fixed width of 100 pixels, a black stroke, and fills the available height up to a maximum of 300 pixels.

Aadrianme213

80% match

Loading thumbnail…

SVG Example

This example displays a simple bar chart with five bars labeled A through E, where bar heights correspond to values from 5 down to 1. The visualization uses D3 v4’s `d3-selection` to bind data to SVG `rect` elements, and `d3-scale` with `scaleBand` for the x-axis positions and `scaleLinear` for the y-axis scaling. The page creates an SVG canvas in the body and renders all bars via chained `enter()` and `append` calls, with no axes or labels added.

CCurran Kelleher

80% match