Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published0🌍 Public
Ffabricio3g
Last edited Dec 13, 2020
Created on Nov 8, 2020
Forked from HTML Starter

This example displays a bar chart of menu items from a JSON file, showing the quantity ordered for each item. The bars are rendered as orange SVG rectangles using D3 v6’s `scaleLinear` and `scaleBand` for scaling the y-axis and x-axis positions. Data is loaded via `json('menu.json')`, and the chart updates through D3’s `select` and `enter` APIs.

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

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

HTML Starter Bar Chart Cutomizing Axes

This example shows a horizontal bar chart of product purchase counts, with a dropdown menu to select different data views. The chart uses D3 v5 with React, rendering SVG elements. It employs `d3.csv` to load product data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` for axis generation. The bars are appended as SVG `rect` elements, and the chart updates when the dropdown selection changes, though only the “first” option is implemented.

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

HTML Starter

This example renders a bar chart of garage capacities by province inside an SVG element. It loads JSON data from a GitHub gist using D3’s `json` function, then maps capacity values to bar widths with `scaleLinear` and province names to vertical positions via `scaleBand`. The code demonstrates a minimal HTML/CSS/JavaScript setup with D3 v6, though the y-axis scale is configured but not fully applied, leaving bars unpositioned vertically.

JJordy S
78% match