Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published0🌍 Public
NNita
Last edited Feb 1, 2024
Created on Feb 1, 2024

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example visualizes hourly data across a week using a grouped bar chart. Each bar represents a specific hour, with the dataset’s labels indicating days of the week. The chart is generated with Chart.js from raw data embedded in the script, using a canvas element for rendering. The visualization displays the distribution of values across the 24 hours, with a legend positioned at the bottom and an auto-scaling y-axis.

Aamauris@outlook.com
92% 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
77% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example presents a health data visualization comprising three charts: a bar chart of Var1, a line chart showing Var2 over time, and a pie chart of Var3. It loads CSV data from a GitHub gist and uses D3.js v7 to render SVG elements. The bar chart maps data points to horizontal bars, the line chart uses scales and a line generator to plot the time series, and the pie chart uses `d3.rollups` to aggregate categories. The code includes axes and margin conventions for the line chart.

Aakhilakura@my.unt.edu
77% match
Loading thumbnail…

Fork of Ama Charts.js

This example shows a weekly sales bar chart rendered with Chart.js. The visualization displays seven labeled days of the week with values from 18 down to 3, each bar distinguished by a unique color from the dataset's background and border arrays. The code loads the Chart.js UMD bundle from a CDN and creates a bar chart via the `Chart` constructor on a canvas element. It also configures a legend, title, and responsive sizing, while dynamically inserting the library's version into the page header.

AArbie Hsu
77% match
Loading thumbnail…

Fork of Fork of HTML Starter

An interactive line chart displays a time series with a circular marker tracking the latest data point. The visualization uses D3 v5 to render an SVG path from sample data, with axes and labels generated via D3 scales. A dropdown menu likely filters the displayed series, though the selection logic resides in the bundled React component. The chart updates dynamically, highlighting the most recent value with a labeled circle. The implementation combines D3’s selection, scale, and axis APIs within a React framework, styling the output through external CSS.

NNandini Maddula
76% 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
76% match
Loading thumbnail…

Fork of HTML Starter

A bar chart displays national-level data from a CSV dataset, filtered to include all years for the "National" level. The visualization uses D3.js to create an SVG rendering, with a band scale for the x-axis and a linear scale for the y-axis. Bars are drawn as rectangles filled with steelblue, and axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data is loaded asynchronously via `d3.csv` from a GitHub gist URL.

Pprathyusha-reddy-arch
76% 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
75% match