Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Hello VizHub

✓ Published0🌍 Public
LLakshmiPrasannaValdas@my.unt.edu
Last edited Apr 15, 2024
Created on Apr 15, 2024

This example demonstrates a stacked bar chart that visualizes monthly fruit quantities for apples, bananas, and oranges from a CSV dataset. The chart renders as an SVG, using D3 v6 to load the data, stack the series with `d3.stack`, and draw the bars with scales for positioning. A categorical color scale maps each fruit to a distinct color, and a legend is manually appended to identify the categories. The bar heights and positions are computed from the stacked values, with axis margins defining the chart layout.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This visualization demonstrates a stacked area chart displaying the quantities of apples, bananas, and oranges over three months in 2018. The chart uses D3 v7 with SVG rendering, employing `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` to generate and color the layered paths. Data is hardcoded as an array of objects containing month dates and fruit counts. The result shows three distinct colored areas representing each fruit’s contribution to the total count over time, with red, yellow, and orange fills.

JJacobRozak
85% match
Loading thumbnail…

Fork of Hello VizHub

A stacked bar chart visualizes regional sales across three product categories, with each bar showing total value per region and segments colored by category. The visualization loads data from a CSV file and renders SVG graphics using D3 v7, employing `d3.csv` for data parsing, `d3.scaleBand` and `d3.scaleLinear` for positioning, and `d3.stack` to compute stacked series. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while regions are ordered alphabetically on the vertical axis.

KKhushi Desai
84% match
Loading thumbnail…

StackBarChart

This stacked bar chart visualizes fruit quantities across four months, with each bar segment representing apples, bananas, cherries, or dates. The visualization uses React with SVG rendering and leverages D3’s `d3.stack()` with a default offset to compute the stacked series, alongside `d3.scaleBand` and `d3.scaleLinear` for positioning. Color encoding via `d3.scaleOrdinal` with `d3.schemeSet3` distinguishes categories, while the x-axis labels are formatted using the Moment.js library. Data is hardcoded in the script, and axes are generated through a custom `naiveAxes()` function.

Vvoid-LSTM
83% match
Loading thumbnail…

1114StackBarChart

This stacked bar chart displays four months of fruit production data, with apples, bananas, cherries, and dates layered from bottom to top. The visualization uses d3.stack() to transform the input dataset into stacked series, then renders each category as a colored SVG rectangle within a group using a data join. Axes are generated with d3.axisLeft and d3.axisBottom, with the x-axis formatted as month-day labels via d3.timeFormat. The chart uses a linear scale for the y-axis and a band scale for the x-axis, with a categorical color scale applying the d3.schemeSet3 palette to distinguish fruit types.

Vvivianaaai@qq.com
83% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This example presents a pie chart of aggregated sales data by product category, loaded from a CSV file hosted on GitHub and rendered as an SVG. It uses D3 v6 APIs such as `d3.csv`, `d3.rollups`, `d3.sum`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. The chart displays each category’s total sales in thousands and its percentage share, with labeled arcs and a legend.

KKritin Kesav
83% match
Loading thumbnail…

Fork of Making a Bar Chart

This example shows a simple bar chart comparing quantities of five fruits, with each bar filled in orange against a blank background. The visualization renders in SVG, using D3 version 5’s core selection and data-binding methods to load values from an external CSV file. The code creates a fixed 960 by 500 pixel canvas and uses D3’s `scaleBand` and `scaleLinear` to position and size the rectangles based on the parsed data, while the stylesheet sets the fill color.

BBhanu Siva Kumar Kommana
83% match
Loading thumbnail…

d3.js learning

This example demonstrates a stacked bar chart built with D3.js, visualizing changes in fruit production (apples, oranges, and pears) over multiple years. The chart uses D3’s `d3.layout.stack` to create the stacked series, `d3.scale.ordinal` for the x-axis, and `d3.svg.axis` for the axes. Hovering over a bar segment reveals a tooltip displaying the exact value. The chart is rendered as SVG, with a legend identifying each fruit series and colors assigned to each category.

OOhayouKaminari
83% match
Loading thumbnail…

StackBarChart

A stacked bar chart displays four months of fruit production data, with each bar segmented into stacked categories (apples, bananas, cherries, dates) and colored using the d3.schemeSet3 ordinal color scheme. The chart uses d3.stack() to compute cumulative values for the stacked segments, then renders the bars as SVG rectangles via a data join with g and rect elements. The x-axis uses a time scale formatted with d3.timeFormat, while the y-axis uses a linear scale with .nice() rounding. Axes are drawn with d3.axisLeft and d3.axisBottom, and the chart is set within a 1600x800 SVG element.

Vvivianaaai@qq.com
83% match