BAR CHART

100%

✓ Published0🌍 Public

Last edited Oct 19, 2025

Created on Oct 19, 2025

This bar chart shows the total number of pages per book genre, with genres sorted in descending order along the x-axis and page totals on the y-axis. The visualization uses d3.csv to load a Library_book dataset, then aggregates pages by genre using d3.rollup and d3.sum. The chart is rendered as SVG with d3.scaleBand and d3.scaleLinear for positioning, while d3.axisBottom and d3.axisLeft create the rotated and labeled axes. Each bar is drawn with rounded corners (rx) and styled using CSS custom properties for colors.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Book ratings

This visualization displays the distribution of book ratings across various genres, with each horizontal bar representing a genre and stacked segments showing the proportion of ratings in different ranges (below 1.0, 1.0-1.5, 1.5-2.5, 2.5-3.5, above 3.5). The chart uses D3 v7 loaded via UNPKG, with d3.scaleOrdinal for color mapping, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.stack for creating the stacked bar data from a CSV file. Interactive tooltips display exact percentages on hover, and a legend indicates the rating categories. The SVG rendering includes shared axes and a title, with data processed through d3.csv.

HHarshithaAmbilpur

78% match

Loading thumbnail…

Books with Pages

This example displays a horizontal bar chart of nine books sorted by page count, with book titles on the y-axis and a linear pages scale on the x-axis. It uses d3.csv to load data, d3.scaleBand and d3.scaleLinear for positioning, and d3.axisLeft and d3.axisBottom with custom tick formatting. The bars are rendered as SVG rectangles with a steelblue fill, and the code removes default axis domains and gridlines. A CSS rule with overflow:hidden removes scroll bars from the body.

DDavid Sjoberg

77% match

Loading thumbnail…

Activity6_Task2

This stacked bar chart displays how readers rate book genres across three categories (Excellent, Good, Average), with each genre represented by a horizontal bar segmented by rating proportions. The visualization uses D3.js (v7) with an SVG rendering approach, loading data from a CSV file containing genre ratings as percentages. The code employs `d3.stack()` with `stackOrderNone` and `stackOffsetNone` to build the segments, along with `d3.scaleLinear` for the percentage axis and `d3.scaleBand` for genre categories. Users can click any segment to see the exact rating percentage via an alert.

Mmaheshsachin1234@gmail.com

76% match

Loading thumbnail…

Fork of question 2

This stacked bar chart visualizes the distribution of book ratings across six genres, showing the percentage of books falling into five rating categories from "Below 5.0" to "Above 8.5." Each horizontal bar represents a genre, segmented by rating category, and hovering reveals the exact percentage for each segment via a custom tooltip. The data is loaded from a CSV file and processed using d3.stack(), with d3.scaleBand for the genre axis and d3.scaleLinear for the percentage axis. Colors are assigned via d3.scaleOrdinal, and the SVG rendering includes a legend for the rating categories.

Aamshureddy13@gmail.com

76% match

Loading thumbnail…

Week 6: IMDB Top 250 Movies Bar Chart: Genre VS Count

A bar chart visualizes the distribution of genres among the IMDb Top 250 movies, with each bar's height representing the count of movies in that genre and a tooltip showing the exact count and percentage. The visualization uses the D3.js library, including `scaleBand` and `scaleLinear` for axes and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a CSV file, and genres are split and counted from a comma-separated field. The chart uses a Seaborn-derived color palette with interactive hover effects that highlight the selected bar and dim others.

XXiaojun

76% match

Loading thumbnail…

Activity 6 task 2

This stacked bar chart visualizes the percentage distribution of book ratings across five genres, using data from a CSV file. Each bar represents a genre, segmented by rating ranges from "below 4.0" to "above 8.5", with a horizontal axis showing percentages. The visualization uses D3 v7's `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` APIs, rendering as SVG in a browser. Interactive tooltips display precise rating percentages per genre when hovering over bar segments, with opacity changes on mouseover. The chart includes axis labels, a title, and a color-coded legend for rating ranges.

Jjaideeptripurani12@gmail.com

76% match

Loading thumbnail…

Activity6_Question2

This stacked bar chart visualizes the distribution of book ratings across six literary genres, with each bar divided into four rating categories from below 3.0 to above 4.5. The visualization uses D3 v7 with an SVG renderer, employing d3.stack for data transformation, d3.scaleOrdinal for color mapping, and d3.scaleBand for the categorical y-axis. Interactive tooltips appear on mouseover to display precise percentages for each rating segment, with data loaded from a local CSV file.

Gganeshseeram5decem@gmail.com

75% match

Loading thumbnail…

Books with Pages

A horizontal bar chart displays the page counts of eight classic novels, from Jane Eyre to War and Peace. The visualization uses D3 v5 with a linear scale for the x-axis and a band scale for the y-axis, rendering bars as SVG rectangles. The code imports specific functions like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3. Data is loaded from a CSV file, and CSS removes scroll bars by setting the body margin to zero and overflow to hidden.

Mmkt-ds

75% match