Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Bbillzhou2005
Last edited Jan 4, 2023
Created on Jan 4, 2023
Forked from HTML Starter

This example shows four horizontal bars labeled A through D, each with equal length, rendered as black rectangles with white fill and a thick black stroke on the first bar. The visualization uses raw SVG elements defined directly in HTML, with CSS styling controlling the font family 'Share Tech' and the bar’s stroke properties. JavaScript is not used; the chart is static, relying on inline SVG `rect` and `text` tags within a 960x600 viewport.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Fork of Pseudo Horizontal Bar Chart

This fork of a pseudo horizontal bar chart displays four labeled bars (A–D) using raw SVG rectangles and text elements. The first bar is blue with a thick black stroke, while the remaining bars are black, sized to approximate descending values. Rendered with inline SVG in an HTML page, it uses the Share Tech font and no JavaScript libraries or data-binding frameworks. The chart is a static approximation of a bar chart, with the SVG viewBox, rect positioning, and font styling defined directly in the markup.

Iinnocent thomas
87% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal SVG bar chart drawn with static markup in an HTML page. It shows four black lines forming a rectangular grid, with a visible border around the SVG canvas. The code uses plain SVG elements such as `line`, `g`, and `title`, styled with CSS in the document head. The rendering relies on the SVG namespace, with coordinates hardcoded directly in the markup, and no JavaScript or data-binding libraries are involved. The page is centered using flexbox, and the visualization serves as a simple starting point for further SVG experiments.

SSamir Danial Bayat
87% match
Loading thumbnail…

Fork of HTML Starter

A minimal bar chart displays five static rectangles proportional to a numeric array. It uses JavaScript with the D3 v6 library, selecting the SVG element and rendering bars via `d3.select('svg')` and the `.join()` pattern. Interactive hover animations change bar colors to orange with a 200ms transition. The code does not demonstrate data creation, filtering, or axes; it focuses on basic SVG rendering and event-driven styling.

FFrancisco Antonio
87% match
Loading thumbnail…

Fork of Digital mockup of a horizontal bar chart

This horizontal bar chart mockup displays five black bars of varying heights on a white background, labeled A through E below the x-axis. Using embedded SVG within an HTML page, the visualization renders dark rectangles with hardcoded coordinates and dimensions. The chart applies the Share Tech font from Google Fonts to both the title text and axis labels. The code uses plain SVG elements like rect and text, styled through CSS, demonstrating a static pseudo-viz rather than an interactive data-driven chart.

Ddsims2157
87% match
Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

A fork of the "Pseudo Horizontal Bar Chart" example, this SVG visualization renders four labeled bars (A through D) as plain black rectangles on a white canvas. The chart compares categorical values through the varying widths of each bar, with the first bar distinguished by an outlined stroke and no fill. Built with raw SVG elements—`rect` and `text`—and styled using the Share Tech font, the chart is rendered directly in HTML without any JavaScript libraries or data-binding code.

NNixonthiyagesh-Hexa
86% match
Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

This fork of a pseudo horizontal bar chart uses SVG rectangles and text elements to display four labeled bars (A–D) with varying widths. The bars are drawn as black rectangles, with the first bar styled in blue and outlined with a white fill and black stroke. The chart is rendered via SVG directly in HTML, using the Share Tech font for labels, and approximates a bar chart without relying on external plotting libraries.

Aadventuresenglish.info@gmail.com
86% match
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
86% match