Bar chart

100%

✓ Published0🌍 Public

Last edited Mar 8, 2026

Created on Mar 8, 2026

This bar chart displays the top 20 songs by streaming counts from a CSV dataset of popular songs. Colored bars represent each song’s Streams value, with axes labeled via d3.axisBottom and d3.axisLeft. Using d3.scaleBand and d3.scaleLinear, the visualization maps categorical song names and numeric stream totals to SVG rectangles, with d3.scaleOrdinal and schemeTableau10 assigning distinct colors to each bar.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

music2

This interactive bar chart explores a dataset of music tracks, showing the average popularity of songs grouped by a selected attribute. Users can switch the grouping variable via dropdown menus, and a scrollable overview bar allows panning through many categories. Built with D3.js and Vue, the visualization uses `scaleBand` and `scaleLinear` for positioning and `axisBottom`/`axisLeft` for axes, with drag handling to update the visible range. Data is loaded from a CSV file.

Aa15923647

77% match

Loading thumbnail…

Fork of D3 Starter

This horizontal bar chart shows Spotify streaming totals for twenty popular artists, with each bar's length proportional to the artist's total streams in millions. The visualization sorts artists from smallest to largest stream counts and includes hover tooltips displaying the artist name and exact stream value. Built with D3 v7, the chart uses `d3.csv` for data loading, `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.axisBottom`/`d3.axisLeft` for axis rendering, with bars drawn as SVG rectangles through the `selectAll().enter().append('rect')` API. The data comes from a CSV file containing top Spotify songs from 2025.

PPeter Regalbuto

77% match

Loading thumbnail…

Stylized Bar Chart - Top 100 Songs Of Spotify

This visualization displays the danceability scores of the top 100 Spotify songs from 2018, ranked by artist as horizontal bars. Each bar’s length encodes the numeric danceability value using d3.scaleLinear, while artist names are positioned along the y-axis with d3.scaleBand. The React components render SVG elements, with axes generated by custom AxisBottom and AxisLeft components. Data is loaded via d3.csv from a GitHub-hosted dataset, and tooltips appear on hover using native SVG title elements.

Ssamemurk21

76% match

Loading thumbnail…

Bar Chart

This bar chart visualizes the top 10 most populous countries, with population values read from a CSV file. It uses a D3 v5 linear scale for the horizontal axis and a band scale for the vertical country categories, rendered as SVG rectangles. The code employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with custom tick formatting to abbreviate large numbers. A title and axis label are added as SVG text elements, and the chart is styled via CSS classes.

Ssploitfun

76% match

Loading thumbnail…

Bar chart for the Saavan dataset

This bar chart visualizes the top 12 songs from the Saavan (JioMusic) dataset, displaying song durations with a blue-to-red color gradient that encodes duration length. The visualization uses React with D3 v5, employing `d3.scaleBand` for the categorical y-axis of song names and `d3.scaleLinear` for the continuous x-axis of durations. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and bars are rendered as SVG rectangles inside a React component. The chart includes axis tick labels and grid lines, with song names displayed along the vertical axis.

Ttejasrikotipalli1@gmail.com

76% match

Loading thumbnail…

MultiSeries

This visualization compares song streams and popularity across release years for the top 15 songs from a CSV dataset. It combines green bars, drawn with SVG `rect` elements scaled by `d3.scaleLinear`, to show streams, while a yellow line and circles, rendered using `d3.line` and appended `circle` elements, overlay popularity on a secondary right axis. The chart employs `d3.scaleBand` for the x-axis, `d3.axisLeft`, `d3.axisRight`, and `d3.axisBottom` for ticks, with data loaded via `d3.csv`.

Mmynedisanjana@gmail.com

76% match

Loading thumbnail…

A2-Bar Graph

A2-Bar Graph is a p5.js visualization that displays a horizontal bar chart of the top 20 most-streamed songs on Spotify in 2023, using a CSV dataset. The bar lengths encode stream counts, with a hover interaction revealing exact values. The code uses p5.js's `loadTable`, `setup`, `draw`, and coordinate mapping functions to render the chart, axes, and labels.

Bbhavi.kenia@gmail.com

76% match

Loading thumbnail…

act6_Q.2_11719493

This example shows a horizontal bar chart ranking the top 20 countries by population in 2010, with bars colored lightgreen and labeled axes for country names and population values. The visualization loads CSV data from a GitHub repository, processes it by sorting and trimming to the top 20 entries, and renders SVG rectangles scaled by d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis. The chart uses d3.axisBottom and d3.axisLeft for ticks, with dynamic formatting converting values like billions to "B", and it redraws responsively on window resize.

Ssravani1969@gmail.com

76% match