HTML Starter

100%

✓ Published0🌍 Public

Last edited Oct 26, 2020

Created on Oct 26, 2020

This example shows a single vertical bar whose fill color transitions through a five-stop gradient from red to green, with the bar’s height fixed and width constant. The data array contains one number (39) that currently does not affect the bar’s dimensions, despite the readme suggesting otherwise. The code uses d3.select and append to create an SVG, then builds a linearGradient with d3’s data join, binding the colors array to stop elements. The bar is a rect with a fill referencing the gradient, rendered against a light gray background.

AI-generated description

I have created a simple code example for you. Hope this helps:)

If you change the data, you will see that the color and size of th bar change accordingly

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example shows a simple bar chart rendered as SVG rectangles, with bar widths and colors mapped linearly to the values in a three-element data array. It uses D3 v3’s selection and data binding to append the rectangles, then applies `d3.scale.linear` for both width and color scales (mapping 0–80 to pixel widths and red-to-blue fills). Animated via `transition()` on the width attribute. The rendering relies on D3’s SVG manipulation with no external data source beyond the hardcoded JavaScript array.

Bbrunotrindademachado

81% match

Loading thumbnail…

HTML Starter

A single orange-to-green bar visualizes a numeric score of 79 on a fixed 0-to-100 scale. The bar’s width and fill color both derive from the same data value using `d3.scaleLinear` for the x-position and color ranges. Rendered as an SVG rectangle with a black stroke, the chart updates automatically when the data array changes. The example uses D3 v6 to append the SVG and bind the data to the rectangle element.

CChristian Magelssen

80% match

Loading thumbnail…

HTML Starter

This example renders a set of rectangular bars using D3 v6, with each bar’s height mapped from a hardcoded numeric array. The SVG canvas is set to 500 by 500 pixels, and the D3 selection’s `.data()` and `.enter()` methods create rectangles positioned along the x-axis at 0, with y-coordinates calculated as the height subtracted from a fixed value. The page also demonstrates basic HTML/CSS structure and logs a message to the browser console, illustrating a minimal setup for data-driven graphics in a React-free environment.

TTrustPaul

80% match

Loading thumbnail…

HTML Starter

This example presents a static bar chart built with D3.js, displaying a hardcoded array of twelve numeric values. The SVG output renders green bars on a light background, with each bar’s height directly proportional to its data value. The code uses D3’s selection API and `selectAll` with chained `attr` methods to position bars, explicitly setting the SVG dimensions, bar width, and vertical offset. The data is a simple local JavaScript array, not fetched from an external source.

Eemmaoudmaijer

80% match

Loading thumbnail…

HTML Starter

Eemmaoudmaijer

80% match

Loading thumbnail…

HTML Starter

A simple bar chart renders three static rectangles from a hard-coded array of three values. The example demonstrates basic D3 data binding with `d3.select`, `canvas.selectAll`, and `.enter()`, appending SVG `rect` elements whose width and height are derived from each data point. The chart uses D3 v5 and outputs to an SVG canvas, with bars positioned vertically by index. No axes, scales, or interactivity are included, making it a minimal starter template for understanding core D3 joins.

Oovalli

79% match

Loading thumbnail…

HTML Starter Bar Chart

This example shows three horizontal bars of varying lengths rendered as SVG rectangles, each colored differently and labeled with text. The bars are drawn using the SVG `<rect>` element, with a white background and custom styling applied through CSS, including the Share Tech font. The page also displays a large "SVG Fundmentals" message, demonstrating basic HTML, CSS, and JavaScript integration without any external libraries or data sources.

Sstefano@nava.ch

79% match

Loading thumbnail…

HTML Starter

A bar chart displays fixed-width rectangles for the values 1, 3, and 4, plotted against a linear scale whose domain is computed with `d3.max` and whose range is 0–300 pixels. The bars are drawn as SVG `rect` elements with a constant fill of red, positioned horizontally at 120-pixel intervals from the left edge. The chart is generated using D3 v5 within a minimal HTML page, with the Y-axis rendered via `d3.axisLeft` and appended as a `g` element. The underlying data is hard-coded as a JavaScript array and object literal.

Ggitmethis

78% match