Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Mar 5, 2025

Created on Jun 24, 2024

This example demonstrates a dynamic stacked bar chart built with React and the Recharts library. It fetches raw data from an API and allows users to toggle between price and quantity metrics, as well as filter to display either all funding groups or only the top ten by total value. The chart groups data by funding and aggregates values by line of business, generating bars dynamically for each category with random colors. The visualization uses Recharts' `BarChart`, `Bar`, `XAxis`, `YAxis`, `Tooltip`, and `Legend` components, with a custom tick formatter that converts large numbers into millions for improved readability.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example shows a bar chart of eight categories (A-H) with values ranging from 19 to 91, where hovering over a bar turns it red and displays its amount as a text label above it. The visualization is built using HTML with inline CSS for page styling and JavaScript for console output, while the chart itself is rendered by Vega, a declarative visualization grammar, through a Vega JSON specification. The code defines scales, axes, and marks for the bars and labels, using signal-based tooltip handling to track the hovered datum and conditionally update text opacity.

Jjjacobatandover

79% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple interactive bar chart using D3.js v6. The page displays four vertical bars with heights corresponding to the numbers in the `numbers` array. Users can click on any bar to remove it from the chart, triggering a D3 data join via `selectAll`, `enter`, and `exit` to update the visualization. The bars are styled with CSS classes and positioned using D3's `style` method to set height and margin-top attributes.

Mmoezif-dev

78% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple bar chart of 20 numeric values using D3. It renders an SVG with rectangles and text labels, where bar height and color intensity map to each data point. The code uses `d3.select` to build the SVG, `.data()` with `.enter()` to bind the dataset, and `.append('rect')` and `.append('text')` to draw the visualization. Bars are positioned with computed `x`, `y`, and `height` attributes, while labels display the values in white sans-serif text.

Eedmundo.guerra.ipad@gmail.com

78% match

Loading thumbnail…

Fork of React + D3 Viz Starter

This example shows a stacked bar chart displaying sample invoice data, with categories A, B, and C broken into three value segments. The chart is built with React and D3 v6, using d3.stack to aggregate values, d3.scaleBand and d3.scaleLinear for axes, and d3.scaleOrdinal for color encoding. Bars are rendered as SVG rectangles within a React component, using a Card layout and a VizContainer that follows the margin convention. The code includes commented-out margin visualization props for debugging layout.

AAditya Kumar Patel

78% match

Loading thumbnail…

Fork of HTML Starter

A minimal bar chart displays five static rectangles proportional to a numeric array. It uses JavaScript with the D3 v6 library, selecting the SVG element and rendering bars via `d3.select('svg')` and the `.join()` pattern. Interactive hover animations change bar colors to orange with a 200ms transition. The code does not demonstrate data creation, filtering, or axes; it focuses on basic SVG rendering and event-driven styling.

FFrancisco Antonio

77% match

Loading thumbnail…

Fork of HTML Starter

This example visualizes hourly data across a week using a grouped bar chart. Each bar represents a specific hour, with the dataset’s labels indicating days of the week. The chart is generated with Chart.js from raw data embedded in the script, using a canvas element for rendering. The visualization displays the distribution of values across the 24 hours, with a legend positioned at the bottom and an auto-scaling y-axis.

Aamauris@outlook.com

77% match

Loading thumbnail…

Fork of HTML Starter

This example shows a stacked bar chart that visualizes soil condition data across different plant groups. It uses a dropdown selector (initialized but not populated with options) and renders the chart as SVG using D3.js v4. The code loads CSV data from a remote GitHub source, applies a sequential color scheme from `d3-scale-chromatic`, and constructs the stacked layout using `d3.stack()`. Bars are drawn with `d3.scaleBand` for the X-axis and a linear scale for the Y-axis, with axes added via `d3.axisBottom` and `d3.axisLeft`.

SSampras Dsouza

77% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example visualizes hourly activity patterns across a week using a stacked bar chart. Each bar represents a day, segmented into 24 color-coded hourly datasets from midnight to 11 PM. The code uses the Chart.js library with canvas rendering, displaying a legend at the bottom and a y-axis beginning at zero. The data appears to show higher values during daytime hours and lower values at night.

NNita

77% match