Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Jul 16, 2021

Created on Jul 16, 2021

This example shows a bar chart of eight categories (A-H) with values ranging from 19 to 91, where hovering over a bar turns it red and displays its amount as a text label above it. The visualization is built using HTML with inline CSS for page styling and JavaScript for console output, while the chart itself is rendered by Vega, a declarative visualization grammar, through a Vega JSON specification. The code defines scales, axes, and marks for the bars and labels, using signal-based tooltip handling to track the hovered datum and conditionally update text opacity.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example displays a scatter plot with three categories on the x-axis and quantitative values on the y-axis, using Vega-Lite’s declarative JSON specification embedded within an HTML page. The page relies on CSS for centered, large-text styling and JavaScript to log a message to the console. The chart itself encodes data points as circles, with category "a" mapped to nominal positions and measure "b" mapped to quantitative coordinates, rendered by Vega-Lite’s default point mark.

MMarmiya

85% match

Loading thumbnail…

Fork of HTML Starter

This example displays a bar chart of categorical data, showing the number of votes for six color categories. It uses the Chart.js library to render the visualization on an HTML canvas element. The chart is configured with colored bars, borders, and a y-axis that begins at zero, using the `Chart` constructor with a bar type and associated datasets. The data is hardcoded within the script.

MMateusz Urban

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

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

81% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple interactive bar chart using D3.js v6. The page displays four vertical bars with heights corresponding to the numbers in the `numbers` array. Users can click on any bar to remove it from the chart, triggering a D3 data join via `selectAll`, `enter`, and `exit` to update the visualization. The bars are styled with CSS classes and positioned using D3's `style` method to set height and margin-top attributes.

Mmoezif-dev

81% match

Loading thumbnail…

Fork of 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.

Bbillzhou2005

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

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