100%

Days per Month

✓ Published0🌍 Public

Last edited Jun 11, 2025

Created on Jun 11, 2025

Forked from React & D3 Vibecoding Starter

A horizontal bar chart displays the number of days in each month, from January through December, using a teal color scheme with interactive hover highlighting. The visualization uses React 19 with hooks for state management and a ResizeObserver for responsive dimensions, while D3.js v7 handles scales, axes, and SVG rendering. Data loads from a CSV file, and the chart features gridlines, axis labels, and numeric value labels positioned at each bar's end.

AI-generated description

Days in Each Month Bar Chart

A responsive horizontal bar chart visualization built with React and D3.js that displays the number of days in each month of the year.

Features

Interactive Design: Click on bars to highlight individual months
Responsive Layout: Automatically adapts to container size changes
Smooth Animations: Hover effects and selection transitions
Clean Typography: Uses Inter font family for modern appearance
Accessible Styling: Clear axis labels and gridlines for better readability

Data

The chart visualizes a simple dataset (data.csv) containing:

Month names: January through December
Days count: Number of days in each month (28-31)

Technology Stack

React 19: For component lifecycle and state management
D3.js v7: For data visualization, scales, and axis rendering
Modern JavaScript: ES6+ modules with import maps
CSS3: Custom styling with hover effects and transitions

File Structure

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A bar chart displays monthly values from a CSV file, with dates from 2013-01 to 2014-02 on the x-axis and dollar amounts on the y-axis. D3's d3.csv loads the data, d3.time.format parses the dates, and d3.scale.ordinal with rangeRoundBands positions each bar. The x-axis labels are rotated with SVG transforms, while steelblue rectangles encode the values. React and D3 are used in separate index.js and index.html files, though the visible rendering is entirely SVG-based.

SsampayoSomosierra

76% match

Loading thumbnail…

First Bar Chart

This example displays the number of days for each month, derived from a CSV file, using horizontal bars where length corresponds to the data value (with days multiplied by 1000). Rendered as SVG via d3.v5, it employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, `axisLeft` and `axisBottom` for grid markings. Data is loaded through `csv()` from the United Nations World Population Prospects 2017 estimate, though the visible dataset is month-based.

AAnne Lee Steele

76% match

Loading thumbnail…

Bar chart

This bar chart displays monthly average temperatures, with each month on the vertical axis and temperature values extending horizontally. The chart uses an SVG canvas with pink bars, rendered using D3 version 5. The code employs `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for ticks, reading data from a CSV file. Months appear in order from January through December, showing a peak in May.

RRichard Wong

75% match

Loading thumbnail…

Untitled

This example shows a bar chart of monthly values over time, with each bar representing a data point from a CSV file. The chart displays dates on the x-axis and dollar values on the y-axis, using rotated tick labels for readability. It employs D3.js version 3.5.17, specifically `d3.scale.ordinal`, `d3.scale.linear`, `d3.svg.axis`, and `d3.csv` to load and render the data as SVG rectangles. The bars are styled in steelblue and the axes include custom margins and formatting.

NNeepaB

74% match

Loading thumbnail…

Data Visualization Module 4

This example shows the monthly frequency of an unspecified event across a year as a bar chart. It uses D3 v3 with an ordinal x-axis for months and a linear y-axis formatted as percentages, rendering bars as SVG rectangles with steelblue fills that turn brown on hover. The data loads from a CSV file containing Month and Frequency columns. The visualization applies axes via `d3.svg.axis`, scales with `d3.scale.ordinal` and `d3.scale.linear`, and binds data to rectangles using the standard enter selection.

QQinita

74% match

Loading thumbnail…

Monthly publications

The visualization displays monthly publications as horizontal bars split by category, comparing COVID-19-related output against other publications across months. It uses React with D3 v6 scales (scaleBand, scaleLinear, scaleOrdinal) to render SVG rectangles with tooltips and text labels. Data is loaded via d3.csv from a GitHub gist, with each month showing paired bars in red and orange. A color legend identifies the two categories, and axes are constructed using custom React components with D3 tick generation.

BbeauMarko

74% match

Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of monthly incident counts, sorted by month from January through December. The code uses D3's `scaleLinear` and `scaleBand` to map incident values to bar widths and month labels to vertical positions, with `axisLeft` and `axisBottom` for the chart axes. Data is loaded asynchronously from a CSV file via `csv()`, and rendered as SVG rectangles within a 960x500 canvas. The visualization is built in a React environment, with styles defined in an external CSS file.

PPaolaAntonicoli

74% match

Loading thumbnail…

Untitled

A bar chart displays monthly incident counts, with values ordered from January to December despite the CSV’s shuffled rows. The visualization uses a linear x-scale and band y-scale, with bars styled in steelblue. D3’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` handle scaling and axes, while `axisBottom`’s tick format converts numbers to “Mila” units. The React framework is not used; instead, D3 selects the SVG directly. Data comes from `data.csv`, and a title and axis labels are added via SVG groups and text elements.

PPaolaAntonicoli

73% match