Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published0🌍 Public
KKhushi Desai
Last edited Oct 19, 2024
Created on Oct 19, 2024
Forked from 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.

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 Hello VizHub

This fork of Hello VizHub demonstrates three linked D3.js visualizations. It shows total sales by brand and region in a bar chart, units sold versus sales in a scatter plot, and profit alongside average price in a multi-series chart with bars and a line. The code uses `d3.csv` to load a remote dataset and `d3.scaleBand`, `d3.scaleLinear`, `d3.rollups`, and `d3.schemeTableau10` to bind data to SVG rects, circles, and a path via `d3.axisBottom` and `d3.axisLeft`. A dual y-axis is implemented for the final chart.

Aankitgoudpoodhari07@gmail.com
88% match
Loading thumbnail…

Fork of Hello VizHub

This visualization shows sales figures across different product categories as a filled area chart. The SVG is rendered using D3 v7, with a steelblue area path encoding values through the vertical axis. The chart loads its data from a public GitHub gist and uses D3's `d3.json` to parse it, `d3.scalePoint` and `d3.scaleLinear` for axes, and the `d3.area` generator for the path. Axis ticks are added via `d3.axisBottom` and `d3.axisLeft`, with manually placed text labels.

Ssairohithchada@gmail.com
88% 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
86% match
Loading thumbnail…

Fork of Hello VizHub

This stacked bar chart displays population trends for multiple countries from 1950 to 2020, using a CSV dataset loaded via d3.csv. The visualization uses D3 v7’s d3.stack, d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal to render stacked segments per country, with an SVG output and an auto-generated legend for each year column. Axes are added via d3.axisBottom and d3.axisLeft.

Rrakshithareddy217@gmail.com
85% match
Loading thumbnail…

Fork of Fork of Hello VizHub

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.

LLakshmiPrasannaValdas@my.unt.edu
84% match
Loading thumbnail…

Fork of Hello VizHub

A stacked bar chart displays the religious composition of the population across the top 20 countries, with each bar segmented by religion and filled using a custom ordinal color scale. The visualization loads data from a CSV file via `d3.csv` and renders SVG elements using D3 v7. It employs `d3.scaleBand` for the country axis, `d3.scaleLinear` for the population axis, and `d3.stack` to compute the stacked series, with axes labeled "Country" and "Population".

Mmaheshchowdaryponnaganti@my.unt.edu
84% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple bar chart visualization created with D3.js, displaying data from a CSV file loaded from a GitHub repository. The code uses `d3.select` to append a paragraph to the page and `d3.csv` to fetch the dataset, then renders axes with `d3.axisBottom` and `d3.axisLeft`. The chart includes dollar-formatted tick labels on the y-axis and uses a height-based translation for proper positioning. The implementation relies on D3 v5, imported via ES6 modules, with the page structure defined in an HTML file and styling in a linked CSS stylesheet.

HHelen-Luwei-Zhang
84% match
Loading thumbnail…

Fork of Hello VizHub

This area chart visualizes a dataset loaded from a CSV file hosted on GitHub. The chart displays values over time, with dates parsed via `d3.timeParse` and a linear scale for the y-axis. The area path is generated using `d3.area` and rendered as a steelblue SVG path. Axes are created with `d3.axisBottom` and `d3.axisLeft`, and the chart is built with D3 v7.

SSeema Shrestha
84% match