Skip to main content
SimilarExport ZIP
100%

Multiple Radar Charts

✓ Published0🌍 Public
LLeah Mitchell
Last edited Oct 26, 2021
Created on Oct 26, 2021

Two radar charts compare the combat statistics of the Marvel characters Loki and Thanos across six attributes (Strength, Intelligence, Speed, Durability, Power, Combat). The color of each polygon reflects the character’s alignment—dark red for villains, green for heroes, gray for neutral. Built with D3.js, the charts use animated SVG rendering with a reusable radar chart module, scaling each axis from 0 to a fixed maximum value. Data comes from the Marvel dataset loaded via `d3.csv`.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Character Radar Chart

This radar chart visualizes the attributes of the Marvel character Loki, including strength, intelligence, speed, durability, power, and combat, using data from a CSV file. The chart uses d3.scaleOrdinal for color and d3.csv to load and parse the data, while a custom RadarChart function draws the SVG polygon with circular grid lines. The visualization is built with D3 v5 and renders a static, single-character comparison, with a fixed character selection and no interactive menu functionality based on the provided code.

AAndrew Petit
85% 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
83% match
Loading thumbnail…

Character Radar Chart

A character radar chart visualizes the relative attributes of Marvel superheroes, such as Strength, Intelligence, and Speed, on a hexagonal grid. It displays the selected character Thor by default, with a dropdown menu offering alternatives like Vision and Man-Wolf. The visualization uses D3 v5 with SVG rendering and animation. Data is loaded from a CSV file using `d3.csv`, then filtered and transformed into a radar chart using a custom `RadarChart` function, with scales and axes from `d3.scaleLinear`.

LLeah Mitchell
83% match
Loading thumbnail…

Marvel Charts

Two interactive Marvel character visualizations display the relationship between a hero's attributes—Strength, Intelligence, Speed, Durability, Power, and Combat—and their total power score. A Voronoi-overlaid scatterplot, built with d3.Delaunay and SVG animations, plots characters by selected attributes while a draggable menu changes the axes. A companion radar chart, using d3.scaleLinear and transition, overlays a second character's profile in dashed strokes for comparison. Tooltips reveal character names on hover, sourced from a CSV of 257 characters.

LLeah Mitchell
82% match
Loading thumbnail…

Basic Radar Chart

A basic radar chart displays six attributes—Strength, Intelligence, Speed, Durability, Power, and Combat—for a single Marvel character, A-Bomb, as a filled polygon overlaid on a five-level circular grid. The SVG visualization, built with D3 v5 and the RadarChart function by Nadieh Bremer, includes animated round strokes and semi-transparent areas. Data is loaded asynchronously from a CSV of Marvel character statistics via `d3.csv`, with axis labels and grid lines generated using `scaleLinear` and geometric calculations. A dropdown menu for selecting characters is present, though the change event currently only logs to the console.

LLeah Mitchell
81% match
Loading thumbnail…

Radar chart with character option

A radar chart displays six attributes—Strength, Intelligence, Speed, Durability, Power, and Combat—for a selected Marvel character from a CSV dataset. A dropdown menu lets users switch characters, triggering a smooth transition via `d3.transition()`. The chart uses `d3.scaleLinear` for radial axes and `d3.scaleOrdinal` for coloring, with colors indicating alignment (green for good, red for bad, grey for neutral). SVG rendering includes animated updates and a total power score.

LLeah Mitchell
80% match
Loading thumbnail…

Fork of Radar chart with character option

A fork of the radar chart template by Nadieh Bremer, this visualization explores the Marvel character dataset. Using D3.js (version 6.7.0) and an SVG rendering with animation, it displays a single character’s attributes—Strength, Intelligence, Speed, Durability, Power, and Combat—across six axes. The interface includes two dropdown menus for character selection, allowing a comparison between two characters, with the chart updating dynamically via `transition` animations. The primary radar chart is drawn with `d3.radialLine` and `scaleLinear`, while the second character is rendered through a separate `radar_2` module.

LLeah Mitchell
78% 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
71% match