Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published0🌍 Public
Jjeronimoek
Last edited Aug 10, 2020
Created on Aug 10, 2020
Forked from HTML Starter

This example demonstrates a color gradient mapped onto a series of rectangles using a logarithmic scale. It uses D3.js to create an SVG visualization, with `d3.scaleLog` and `d3.scaleLinear` defining the value-to-position mapping, while a custom log-based color scale assigns a range of three colors across the domain. The visualization also includes a bottom axis with `d3.axisBottom` and tick formatting, all rendered within an HTML page.

AI-generated description

A bare minimum HTML page.

See also React Starter.

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
79% 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
79% match
Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that sets up an SVG canvas for data visualization. It initializes a fixed-width and fixed-height SVG, applies margins to create a plot region, and defines quantitative scales for x, y, radius, and color using d3.scaleLinear, d3.scaleSqrt, and d3.scaleDiverging with the RdYlGn interpolator. The scales establish ranges for axes and encode data attributes, though no data is plotted. The code imports D3 v5 and the d3-legend library for potential legend rendering.

Pphemmati
78% match
Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that uses D3 v6 to render a single blue rectangle onto an SVG canvas within a React-based project structure. The page includes embedded CSS that centers and enlarges body text, while a script appends an SVG element with fixed 500x500 dimensions, then selects and appends a rectangle with hardcoded position and size attributes. The code also logs a message to the browser console and serves as a bare-bones starting point for visualization development.

TTrustPaul
78% 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
77% match
Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that renders a single blue rectangle with a pink stroke on an SVG canvas. It demonstrates the basic structure of an HTML document combined with D3.js v5 loaded from a CDN, along with a JavaScript console log statement. The SVG rectangle uses inline styles for fill, stroke, and opacity values. A separate script attempts to load and log employee data from a CSV file using `d3.csv`, though the data loading is independent of the visual rendering.

Mmihaiblandu
77% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic D3.js chart construction, including SVG creation, linear and logarithmic scales, and band scales for categorical data. It renders rect elements as a bar chart with axis generation using `d3.axisLeft` and `d3.axisBottom`. The code also shows data binding with arrays and JSON objects, plus animated text transitions using `transition().duration()`. Styling includes CSS classes and inline SVG attributes with a yellow background.

KkazGuido
76% match
Loading thumbnail…

HTML Starter

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.

DDavid
76% match