Marvel Charts

100%

✓ Published0🌍 Public

Last edited Dec 9, 2021

Created on Dec 1, 2021

Forked from Powers Scatterplot with Veroni (Character Show Me)

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.

AI-generated description

The plots overall detail information from a Marvel Dataset. Each of the various characters are given a score for the 6 different traits and then one total score value.

Data from: https://gist.github.com/LeahMitchell/8ad46fbcac8d7420bcd5b97b1a245f43#file-readme-md

Code References:

Veroni Graph: https://bl.ocks.org/Fil/f49b5cf943a0210212994aa5860ac4a8

https://observablehq.com/@didoesdigital/9-may-2020-d3-scatterplot-with-voronoi-tooltips

Tool Tip:

https://www.d3-graph-gallery.com/graph/interactivity_tooltip.html

https://chartio.com/resources/tutorials/how-to-show-data-on-mouseover-in-d3js/

Radar chart design created by Nadieh Bremer - VisualCinnamon.com

MIT Licensed

Similar vizzes

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

94% 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

85% 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

85% match

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

82% match

Loading thumbnail…

Multiple Radar Charts

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`.

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…

Marvel Characters | Force layout with images

The visualization shows Marvel characters in a force-directed graph, where each hero is represented by an image node. Users can click a character to display their secret identity and a link to their Marvel web page, while hovering enlarges the image and reveals the character’s name. Built with D3 v3, the layout uses force simulation to position nodes, with images as nodes and curved links between them. The chart is interactive, allowing users to explore character connections through a collapsible tree structure.

CCBasis

80% match

Loading thumbnail…

Marvel Characters | Force layout with images

This interactive force-directed graph visualizes Marvel characters, grouped by Heroes, Villains, and Teams, with each node displaying a character image. The layout uses the `d3.layout.force()` API for physics-based positioning and SVG rendering. Clicking a character reveals their real name and a link to their Marvel webpage, while hovering temporarily enlarges the image. The visualization also includes draggable nodes and animated transitions between states, powered by D3.js v3.

FFrissAnalytics

80% match