Skip to main content
SimilarExport ZIP
100%

Powers Scatterplot with Veroni

✓ Published3🌍 Public
LLeah Mitchell
Last edited Nov 16, 2021
Created on Oct 3, 2021

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.

AI-generated description

Powers Scatterplot for Marvel Data

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/

MIT Licensed

Similar vizzes

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

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
81% match
Loading thumbnail…

Scatterplot w/Brushing

A scatterplot explores whether taller Marvel characters are inherently stronger, plotting Strength against Height for each character. The visualization uses D3 v5 to render SVG circles, with point size reflecting a character’s total stats and color indicating alignment (good, bad, or neutral). A brush interaction filters the x-axis values, updating the chart’s visible points. React structures the application, while the data comes from a CSV file of Marvel character attributes loaded via `d3.csv`.

LLeah Mitchell
75% match
Loading thumbnail…

Fix of Scatterplot Marvel Data

This scatterplot displays the relationship between Height and Weight for Marvel characters, with each point representing a character. The visualization uses D3.js v6 to load CSV data from a GitHub Gist, scale the axes with `scaleLinear`, and render SVG circles. Points are styled with a grey fill and black stroke, and hovering changes their appearance to red, enhancing interactivity through CSS `.point:hover` rules.

CCurran Kelleher
75% match
Loading thumbnail…

Powers Donut Graph

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.

LLeah Mitchell
75% 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
72% match
Loading thumbnail…

Scatterplot for ICE6

A scatterplot visualizes the relationship between character Strength and Height, addressing whether taller characters are inherently stronger. Each circle represents a Marvel character, with position encoding both attributes, fill color indicating alignment (good, bad, or neutral), and radius scaled by total power score. The visualization supports brushing interactions on the x-axis to filter data. Built with React and D3 v5, it uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.brush functions, rendering as SVG with animated transitions.

Vvenkatajayanth03
72% match