Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Aanirudhrao345@gmail.com
Last edited Oct 17, 2025
Created on Oct 17, 2025
Forked from HTML Starter

This interactive bar chart visualizes the distribution of tree species from a CSV dataset, displaying the count of each species alongside tooltips that reveal average height and circumference. Built with D3 v7, the visualization employs `d3.csv` for data loading, `d3.rollups` for aggregation, and `d3.scaleBand` and `d3.scaleLinear` for axes. Bars animate upward on load, use a green sequential color scale, and respond to hover with opacity changes. The SVG rendering includes rotated x-axis labels and a styled title.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of HTML Starter

This bar chart displays the value of each category, sorted in descending order. Built with D3 v7, it loads data from a CSV file via a Gist URL using `d3.csv` and `d3.autoType`. The visualization uses a band scale for categories, a linear scale for values, grid lines, rotated axis labels, and a tooltip that appears on mouseover.

SSYAM TEJ
85% match
Loading thumbnail…

Fork of bar D3 Starter

This bar chart visualizes product sales values from a CSV dataset, with each bar representing a product and its height corresponding to the sales figure. The chart includes axis labels, a title, and interactive hover effects that display a tooltip and change the bar’s color. Built with D3.v7, it uses `d3.csv` to load the data, `d3.scaleBand` and `d3.scaleLinear` for scales, and `d3.axisBottom`/`d3.axisLeft` for axes, all rendered as SVG within a styled HTML page.

119h61a05c9@cvsr.ac.in
85% match
Loading thumbnail…

Fork of HTML Starter

This example shows a stacked bar chart that visualizes soil condition data across different plant groups. It uses a dropdown selector (initialized but not populated with options) and renders the chart as SVG using D3.js v4. The code loads CSV data from a remote GitHub source, applies a sequential color scheme from `d3-scale-chromatic`, and constructs the stacked layout using `d3.stack()`. Bars are drawn with `d3.scaleBand` for the X-axis and a linear scale for the Y-axis, with axes added via `d3.axisBottom` and `d3.axisLeft`.

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

Fork of Hello HTML

This example displays a CSV dataset loaded from a GitHub Gist, summarizing the total row count and previewing the first five records in an HTML table. It then renders an SVG bar chart showing the first column as categorical labels on the x-axis and the second column as quantitative values on the y-axis using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The chart title and axes are added via D3 selections. Styling uses embedded CSS, and data loading relies on `d3.csv`.

Ssowjanyateppali4202@gmail.com
83% match
Loading thumbnail…

Fork of HTML Starter

This example displays a static bar chart of country populations, reading from a CSV file with `d3.csv` and rendering rectangles with `d3.selectAll` and `data.join`. It uses D3 v7 within a plain HTML page, with data loaded asynchronously and converted to numbers. The visualization demonstrates basic data binding and SVG shape creation, though the rendered bars are all fixed at 300 by 300 pixels, so the chart does not reflect population values visually.

Vvoid-LSTM
83% match