Stadium Chart

100%

✓ Published0🌍 Public

Last edited Mar 26, 2017

Created on Mar 26, 2017

This stadium chart visualizes proportional comparisons across independent groups using concentric annular rings, with each ring representing a different region (e.g., NIR, WAL, ENG) and colored segments showing category proportions. D3 v3 renders the visualization as SVG with animated transitions, using d3.layout.pie to generate arcs and d3.svg.arc for ring geometry. The chart includes tick marks and percentage labels around the outer edge, and employs a color scale with four categorical values.

AI-generated description

Stadium Chart

A solution to proportional comparisons between independent groups, inspired by my memory of stadium checkers.

forked from <a href='http://bl.ocks.org/hobbes7878/'>hobbes7878</a>'s block: <a href='http://bl.ocks.org/hobbes7878/9061986'>Stadium Chart</a>

forked from <a href='http://bl.ocks.org/karthiir/'>karthiir</a>'s block: <a href='http://bl.ocks.org/karthiir/bf22a83f1942cc332c8c199759559daa'>Stadium Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Radar Chart D3 V4

This example presents a radar chart built with D3 v4, displaying six categories—such as Central, Kirkdale, and Everton—with values on a scale up to 100. The visualization uses SVG polygons to represent the data series, overlaid on a circular grid with five levels and axis lines, all rendered with animated mouseover effects. The code relies on D3’s `d3.scaleOrdinal` for color encoding and `d3.json` to load the embedded data file, while custom configuration controls the chart’s dimensions and styling.

TThanaporn-sk

71% match

Loading thumbnail…

stack area

This stacked area chart displays survey responses tracking Americans’ favorite sports from 2004 to 2017, showing how percentages for each sport accumulate over time. The visualization uses D3 v4’s `d3.stack()` to transform long-format TSV data into stacked series, then renders them as SVG paths via `d3.area()`. Categorical colors are assigned with `d3.scaleOrdinal`, while linear scales map years and percentages. The chart is built from a Makeover Monday dataset, drawn entirely in SVG within a 500x500 viewport.

PPatrick Wojda

70% match

Loading thumbnail…

Radial pie - Player statistics

This radial pie chart visualizes player statistics across multiple categories, with each wedge representing a season and the radial extent encoding total values. The visualization uses stacked segments colored by performance metrics, with state labels rotated around the circumference. It employs d3-scale-radial for the radial axis, d3.arc for path generation, and d3.stack for segment composition. The chart includes circular gridlines, value labels, and a legend, all rendered as SVG within a React framework.

Ssowbalas

70% match

Loading thumbnail…

Untitled

A pie chart displays the distribution of cricket statistics, with five slices representing Matches, Innings, HS, Average, and Century. Each slice is labeled with its corresponding name and colored using a categorical scale. The SVG rendering uses d3.pie to compute angles from the data values, d3.arc to generate the paths, and d3.scaleOrdinal for the color mapping. Labels are positioned via arc.centroid on a static, non-interactive chart.

LLG0498

70% match

Loading thumbnail…

Donult Chart D3 V4

This donut chart visualizes the distribution of a "beautiful ratio" metric across five cities, with each arc segment sized proportionally and colored by city. The chart is built with D3 v4, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths with rounded corners and an inner radius. Hovering over a segment triggers a temporary opacity change and displays a tooltip showing the exact percentage, computed from the arc’s start and end angles. The visualization also includes a window-resize handler that redraws the chart after a 500ms delay.

CChandrakantThakkarDigiCorp

69% match

Loading thumbnail…

Football Score Pie Chart Visualization

This visualization presents football player skills through two complementary charts. A pie chart displays the top players ranked by dribbling skills, with each slice labeled and a legend identifying players. An area chart shows the top players by ball control, featuring a monotone-smoothed line and rotated x-axis labels. The pie chart uses D3's pie and arc generators to create slices, while the area chart leverages D3's area generator and scaleBand for categorical data. Both charts are rendered as SVG elements, with data loaded from a CSV file containing player statistics, and D3's color ordinal scale provides categorical coloring.

Mmwanginashon720@gmail.com

69% match

Loading thumbnail…

Pie Chart

This pie chart visualizes the percentage contribution of individual players to sports, sourced from a CSV file of players and their sports contributions. Built with D3.js v5, it generates an SVG pie chart where each slice is labeled with the student's name and colored using a categorical scale. A legend on the right maps colors to players, displaying their exact contribution percentages formatted with d3.format. The visualization uses d3.pie, d3.arc, and d3.scaleOrdinal to construct the chart and its interactive elements.

MManasa891-git

69% match

Loading thumbnail…

Donut-Pie Chart

This donut-pie chart visualizes hierarchical data from a CSV file, showing current statuses in the outer donut ring and prior statuses in the inner pie, with color coding for New, Open, Reopened, and Closed categories. Built with d3.v3, it uses `d3.layout.pie`, `d3.svg.arc`, and `d3.nest` to aggregate and structure the data, rendering as SVG. The outer arc and inner wedge paths are styled with distinct radii, and labels are positioned via arc centroids.

TThanaporn-sk

69% match