RC UNT Fork of Stylised Bar chart

Last edited Oct 19, 2025

Created on Oct 16, 2025

This example visualizes quarterly financial ratios, displaying asset turnover as a bar chart where each bar is a sequence of quarterly dates, with gross margin and net income to revenue ratios appearing as red dots in a scatter plot. The controls allow filtering by company name and resetting zoom. The visualization uses D3.js v7 with SVG rendering and axes, and it includes zoom behaviors and hover tooltips for interaction. Data comes from a CSV file hosted on GitHub Gist, and the code is implemented in React.

AI-generated description

MIT Licensed

Similar vizzes

Fork of RC UNT Fork of Stylised Bar chart

This interactive React dashboard visualizes financial ratios by combining a bar chart of asset turnover with a tooltip-driven interface. Data is loaded via `d3.csv` from a GitHub gist containing quarterly financial ratios. Users can filter by company using a dropdown menu and reset zoom on both charts. The bar chart uses `d3.axisBottom`, `d3.axisLeft`, and `scaleLinear` for positioning, with hover effects changing bar color. A second scatter plot appears to be included but is initialized without visible rendering logic in the provided code.

91% match

RC page2.html

This interactive chart compares quarterly revenue and net income for companies in a financial ratios dataset. Users can filter by company via a dropdown menu and use zoom and pan controls to explore the data. The visualization combines orange bars for revenue with a dark green line and dots for net income, using dual y-axes. Built with D3.js v7, it renders SVG elements with animation, includes tooltips on hover, and loads CSV data from a GitHub gist.

83% match

Visualize Data with a Bar Chart FCC

This example shows quarterly U.S. GDP data from the FreeCodeCamp tutorial dataset as a bar chart. Each bar represents a quarter, with the x-axis mapped to time and the y-axis to GDP value. The visualization uses React and D3 v7, building scales with `scaleTime` and `scaleLinear`, and manually rendering SVG ticks and bars rather than using D3’s axis generator. The data is fetched asynchronously via `json()`, and bars are drawn as SVG rectangles, with custom tick components for both axes.

SSubliminal_[var]

RC 007 pie chart

This visualization presents the latest quarter’s data on durable versus nondurable goods as two animated pie charts. Each slice’s size reflects its value, with labeled connector lines and tooltips showing exact figures and percentages. Built with D3 v7, the code uses `d3.pie`, `d3.arc`, and color scales from `d3.scaleOrdinal` to render and update the SVG paths, polyline labels, and animated transitions.

Untitled

A bar chart displays XYZ Foods stock prices over multiple years, with steel-blue bars representing annual values. The visualization includes labeled axes: a rotated "Stock Price" y-axis formatted with dollar signs and a "Year" x-axis. Built with React and D3 v4, the code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render SVG elements, loading data from an external CSV file via `d3.csv`.

Jjshujaa2

Fork of bar chart of stock market with react and d3

This example visualizes the dividend yields of the top 12 companies from a CSV dataset, rendering a horizontal bar chart in SVG. The React component fetches and parses the data with `d3.csv`, then uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. D3’s `ticks()` generates the axis gridlines and labels, while the bars are drawn as `<rect>` elements sized by the dividend values. The chart includes margins and axes, with data loaded asynchronously and displayed after a brief "Loading" state.

Mmeghshah612

Untitled

A bar chart displays XYZ Foods stock prices per year, reading from a CSV file and rendered as SVG. The visualization uses d3.scaleBand and d3.scaleLinear to position bars, with axes labeled "Year" and "Stock Price." On mouseover, bars highlight in orange via d3.select and animate with a transition, expanding width and shifting position while a dollar-value label appears; mouseout reverses these changes and removes the label. d3.v4 handles the animations and event-driven interactions.

AAbdouEnsaj