Skip to main content
SimilarExport ZIP
100%

Powers Donut Graph

✓ Published0🌍 Public
LLeah Mitchell
Last edited Nov 2, 2021
Created on Oct 13, 2021

This donut chart displays the proportion of Marvel characters categorized as good, bad, or neutral based on their alignment. The code loads character and power column data via `d3.csv`, counts alignments, and renders an SVG donut using `d3.pie` and `d3.arc`. A dropdown menu populated from `columns.csv` lets users select a categorical power, though the selection currently only logs to the console. Hovering an arc turns it black.

AI-generated description

Pie chart to show the breakdown of sides for a specific categorical power.

Data from: https://gist.github.com/LeahMitchell/8ad46fbcac8d7420bcd5b97b1a245f43

MIT Licensed

Similar vizzes

Loading thumbnail…

Powers Scatterplot with Veroni

This interactive scatterplot visualizes Marvel character data from a GitHub-hosted CSV, plotting pairs of combat attributes like Strength and Speed. Users select axes via dropdown menus. Circles are colored by alignment (good, bad, neutral) and sized by total score, using the D3 `d3.Delaunay` API to generate a Voronoi overlay that enhances hover tooltips displaying character names. SVG rendering and transitions animate point repositioning and radius growth.

LLeah Mitchell
75% match
Loading thumbnail…

Bar Chart of Character Alignment

This bar chart displays the count of Marvel characters for each alignment category—good, bad, and neutral—using color to denote the alignment (green, dark red, and grey). It summarizes the distribution from a CSV dataset of character alignments. The visualization is built with D3 v5, using `scaleLinear` and `scaleBand` for axes, and a custom `colorPicker` function to fill rectangles based on each alignment value. It renders as an SVG, pulling data from a GitHub gist and counting occurrences via a JavaScript object.

LLeah Mitchell
74% match
Loading thumbnail…

Fork of Donut Chart v2 - Le bon qui fonctionne

This example shows the distribution of language popularity as a donut chart, aggregating the six largest categories into labeled slices and grouping all remaining categories into a single "others" slice. It uses d3.pie and d3.arc to generate the SVG paths, with an ordinal color scale from d3-scale-chromatic (schemeDark2) for slice fills. Labels and connecting polylines are positioned using outerArc.centroid and conditional text-anchor logic based on mid-angle, with data loaded from data.json via d3.json.

SSuzie1022susu
74% match
Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda
73% match
Loading thumbnail…

Powers Scatterplot with Veroni (Character Show Me)

A scatterplot of Marvel character attributes uses Voronoi tessellation for interactive hover targeting. Users select X and Y axes from six power metrics (Strength, Intelligence, Speed, Durability, Power, Combat) via dropdown menus, while a character selector highlights a specific hero in yellow with full opacity. Points are sized by each character’s Total stat, colored by alignment (green for good, dark red for bad, grey for neutral), and animated with `transition.attr` for radius growth and position changes. The code uses d3-scale, d3-axis, d3-transition, and d3.Delaunay to compute the Voronoi cells for tooltip display. Data comes from a CSV of Marvel characters.

LLeah Mitchell
73% match
Loading thumbnail…

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

SSiddharthMittal07
72% match
Loading thumbnail…

Marvel Charts

This interactive visualization compares Marvel characters across six power attributes using a linked scatterplot and radar chart. Users select characters from dropdown menus to highlight their position in the scatterplot, sized by total power score, and display their radar profile alongside a second comparison character. The scatterplot uses d3.Delaunay for voronoi-based tooltips, while radar charts are built with d3.radialLine and transitions. Data comes from a CSV of Marvel character statistics, with SVG rendering and animation throughout.

Ttiffycshsf
72% match
Loading thumbnail…

donut chart w. d3-annotations

A donut chart displays six categorical values as proportional slices, with annotations positioned to the left and right of the chart. A center label appears above the visualization, though the annotation rendering is commented out, leaving only red translucent circles marking annotation anchor points. The chart uses the d3-annotation library alongside d3.v4, building the pie and arcs with `d3.pie()` and `d3.arc()`. A `d3.forceSimulation` with collision and X-axis forces arranges the right-side annotation positions, while the data is hardcoded as an array of value-label-color objects.

PPatrick Wojda
71% match