Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Yyazneshpara2@gmail.com
Last edited Oct 20, 2025
Created on Oct 20, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of HTML Starter

This bar chart displays categorical values from a remote CSV file hosted on GitHub. The visualization uses D3.js v7 to load the data with `d3.csv` and renders it as an SVG. The chart's y-axis is scaled linearly with `d3.scaleLinear` and includes nice tick marks, while the x-axis uses `d3.scaleBand` for categorical spacing. The code appends steelblue rectangles, rotates x-axis labels, and adds a title, with margins and axes positioned via SVG transforms.

Yyazneshpara2@gmail.com
86% match
Loading thumbnail…

Fork of HTML Starter

A bar chart displays product sales distribution across 100 products, with steelblue bars showing sales amounts for each product name. The visualization uses D3.js v7 to load CSV data via `d3.csv`, map products to an x-axis using `scaleBand`, and map sales values to a y-axis with `scaleLinear`. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with rotated x-axis labels, and section titles label the chart axes.

YYamini Malikireddy
85% 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
85% 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
85% 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
83% match
Loading thumbnail…

Fork of HTML Starter

This D3.js v7 example summarizes a remote Retail Sales CSV dataset and visualizes the first ten records as a bar chart using `d3.scaleBand` and `d3.scaleLinear`. The page also renders two decorative SVG illustrations—a car and a smartphone—drawn with primitive shapes like `rect` and `circle`. The dashboard displays dataset statistics in a styled summary box and uses `d3.axisBottom` and `d3.axisLeft` for chart axes.

Vvijaysaichigullapally1@gmail.com
83% match
Loading thumbnail…

Fork of HTML Starter

This chart shows the distribution of product sales across 100 products, using a bar chart to display each product’s sales amount. The visualization uses D3.js v7 to load the `product_sales.csv` data, with `d3.scaleBand` for the horizontal product axis and `d3.scaleLinear` for the vertical sales axis. Bars are rendered as SVG rectangles in steelblue, with rotated labels on the x-axis for readability. The axes are generated using `d3.axisBottom` and `d3.axisLeft`, and the chart includes axis labels for "Product Name" and "Sales Amount."

YYamini Malikireddy
83% match