Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published0🌍 Public
NNita
Last edited Jul 19, 2025
Created on Jul 19, 2025

This interactive bar chart displays four colored bars with values represented by their heights, using HTML, CSS, and vanilla JavaScript. It includes a y-axis with scale labels and buttons that randomize data, sort bars by value, and reset to initial values. Bar heights update with CSS transitions, while DOM manipulation via `getElementById` and `addEventListener` handles interactivity and animations.

AI-generated description

Interactive Bar Chart

A responsive and interactive bar chart that displays four colored bars representing different values.

Features

  • Colorful bars with dynamic heights representing values
  • Y-axis with scale labels
  • Interactive buttons:
    • Randomize: Generate random data values
    • Sort: Sort bars by value (highest to lowest)
    • Reset: Return to the initial data values
  • Smooth animations when values change
  • Responsive design that works on different screen sizes

Improvements

  • Added color gradient to bars for a modern look
  • Added proper axis labeling
  • Added sorting functionality
  • Added smoother animations with bounce effect
  • Improved mobile responsiveness
  • Added CSS variables for easier theming
  • Improved overall styling with shadows and rounded corners

Usage

Open index.html in a browser to view the chart. Use the interactive buttons to:

  1. Randomize Data: Generate new random values for all bars
  2. Sort By Value: Arrange bars from highest to lowest value
  3. Reset Data: Return to the initial values

The chart is responsive and will adapt to different screen sizes.

MIT Licensed

Similar vizzes

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
84% 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
83% 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
81% match
Loading thumbnail…

Fork of HTML Starter

This example displays a static bar chart of 100 randomly generated quantitative data points, visualizing each item’s value as a vertical steelblue rectangle. It uses D3 v7 with an SVG rendering approach, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The code generates the dataset in-browser using `Math.random()`, applies rotated labels to sparse x-axis ticks, and includes chart and axis titles for context.

Yyazneshpara2@gmail.com
81% match
Loading thumbnail…

Fork of HTML Starter

This example shows a simple bar chart of 20 numeric values using D3. It renders an SVG with rectangles and text labels, where bar height and color intensity map to each data point. The code uses `d3.select` to build the SVG, `.data()` with `.enter()` to bind the dataset, and `.append('rect')` and `.append('text')` to draw the visualization. Bars are positioned with computed `x`, `y`, and `height` attributes, while labels display the values in white sans-serif text.

Eedmundo.guerra.ipad@gmail.com
80% match
Loading thumbnail…

Fork of HTML Starter

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.

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

Fork of Fork of HTML Starter

This example visualizes hourly activity patterns across a week using a stacked bar chart. Each bar represents a day, segmented into 24 color-coded hourly datasets from midnight to 11 PM. The code uses the Chart.js library with canvas rendering, displaying a legend at the bottom and a y-axis beginning at zero. The data appears to show higher values during daytime hours and lower values at night.

NNita
79% match