Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Ssrujana reddy
Last edited Oct 20, 2025
Created on Oct 20, 2025
Forked from HTML Starter

This example shows the average delivery time by shipping method (Air, Sea, Ground) as a simple bar chart rendered in SVG. The chart uses d3.scaleBand and d3.scaleLinear to map shipping methods and delivery times to positions, with d3.axisBottom and d3.axisLeft providing the axes. Bars are colored steelblue and turn darkorange on hover via CSS. The data is hardcoded in the script, and the chart includes labeled axes for context.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Ice6_Question 1

This bar chart compares average delivery times across shipping methods using data loaded from a CSV file. The visualization combines rectangular bars, a gray line connecting category averages, and circular point markers. D3 v7 handles the data processing, including grouping values with `d3.group` and calculating means, while SVG scales and axes render the marks. The chart is styled with interactive hover effects that change bar colors.

Ssrujana reddy
76% match
Loading thumbnail…

Fork of D3 Starter

This example shows a bar chart of average temperatures by city, rendered as an SVG with a steelblue fill for each bar and an orange hover highlight. It loads data from a CSV file and uses D3 v3’s `scaleBand` and `scaleLinear` to position bars, while `axisBottom` and `axisLeft` add labeled axes with a thinned tick list. The chart is built on an 800×500 canvas with margins, a title, and sans-serif styling from a separate CSS file. The code imports the D3 library via a module script and includes a minimal `index.js` that writes a placeholder text.

Jjanisha30gowda@gmail.com
75% 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
74% 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
74% match
Loading thumbnail…

Fork of HTML Starter

This bar chart visualizes average broadband speeds across multiple countries, sourced from a CSV file hosted on GitHub. The visualization uses D3.js v6 to load the data and render an SVG bar chart with rotated x-axis labels for country names and a linear y-axis for speed values. Bars are styled in steel blue and highlight orange on hover. The chart includes axis titles and a subtitle, with margins and dimensions configured to present the comparison clearly.

Pprasaad.lakshme901@gmail.com
73% match
Loading thumbnail…

Fork of Fork of HTML Starter

A bar chart displays average marks per subject, computed from a CSV dataset of student scores. The visualization uses D3.js v6 to load the data, calculate averages with `d3.mean`, and render SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are added via `d3.axisBottom` and `d3.axisLeft`, with labels and a title. Bars turn orange on hover through CSS, and the chart includes rotated x-axis tick labels and clear axis annotations.

Vvenigallajaanu@gmail.com
73% match
Loading thumbnail…

Fork of HTML Starter

This example shows a horizontal bar chart comparing the number of units produced by various car manufacturers. The bars are drawn as SVG rectangles, with the x-axis representing the count of units and the y-axis listing manufacturer names. The visualization loads its data from a remote CSV file, which is parsed manually into an array of rows. Using D3.js v7, the code applies a linear scale for the x-axis, a band scale for the categorical y-axis, and appends axis labels and a title directly within the SVG container.

Sshailajat1998@gmail.com
73% match
Loading thumbnail…

Fork of HTML Starter

This example displays an area chart of programming language popularity, showing the number of users for each language. The chart is rendered as an SVG within an HTML page, using D3.js v6 to fetch a CSV file from a GitHub gist. The code constructs the visualization with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, then applies the `d3.area` generator to create the filled area path. Axis labels are added using `d3.axisBottom` and `d3.axisLeft`. The data source is loaded via `d3.csv`, and the final SVG is styled with a steelblue fill.

Ssahithya.voleti@gmail.com
72% match