Fork of RC UNT Fork of Stylised Bar chart

100%

Fork of RC UNT Fork of Stylised Bar chart

✓ Published0🌍 Public

Rrichardcorreia@my.unt.edu

Last edited Oct 17, 2025

Created on Oct 17, 2025

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

RC UNT Fork of Stylised Bar chart

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.

Rrichardcorreia@my.unt.edu

91% match

Loading thumbnail…

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.

Rrichardcorreia@my.unt.edu

78% match

Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This interactive dashboard visualizes the market capitalization of top Chinese companies using a bar chart built with React and D3.js v7. The visualization uses `d3.scaleBand` and `d3.scaleLinear` to map company names and values, with `d3.scaleOrdinal` for sector-based color coding. Users can hover over bars to see detailed tooltips, click bars to highlight companies, and filter by sector through an interactive legend. A summary panel displays market overview statistics, computed dynamically from the loaded CSV data.

NNita

77% match

Loading thumbnail…

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

77% match

Loading thumbnail…

Fork of bonus ice

The visualization displays 3D bar charts derived from a CSV file, with cubes representing data values and an animated, interactive rotation controlled by mouse drag. Built with React and D3 v4, it uses the `d3._3d` API combined with SVG paths and `transition` animations for cube rendering and text labels. The underlying data is loaded via `d3.csv` from a GitHub-hosted source, while a Plotly 3D scatter plot module is also present for comparison.

Aajaysonu

77% match

Loading thumbnail…

Fork of refectored bar chart of stock market with react and d3

This visualization displays the dividend yields of twelve companies as horizontal bars, with company names on the y-axis and dividend values on the x-axis. The React component fetches CSV data from a GitHub gist using `d3.csv`, then renders the chart as SVG. D3 scales (`scaleBand` and `scaleLinear`) position the bars, while separate React components (`AxisBottom`, `AxisLeft`, `Marks`) handle the axes and rectangular marks. The code leverages React's `useState` and `useEffect` hooks for data loading.

Mmeghshah612

77% match

Loading thumbnail…

Fork of Fork of Fork of Cool graphics

This example presents a collection of interactive charts and graphs, including a circular collaboration graph and various bar charts. The circle graph uses a radial layout to position author nodes and draws colored links to show collaborations across repositories, with hover effects revealing combined commit counts. Bar charts, such as the author commit chart and repository chart, use d3.rollups for data aggregation and d3.zoom for panning and scaling. The visualizations are rendered as SVGs using D3 v7 and are built as React components, pulling data from local CSV files.

NNita

77% match

Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This interactive bar chart, built with React and D3 v7, visualizes the frequency distribution of letters from a CSV dataset. Clicking a bar toggles its highlight, dimming unselected bars to focus attention on specific categories. The chart uses `scaleBand` and `scaleLinear` for positioning and includes gridlines from `axisLeft`. A `ResizeObserver` in `useDimensions` tracks container size, and React renders while D3 handles SVG elements through selections and the data join pattern.

Ddr_nareshvet@yahoo.in

77% match