Bar Chart of Character Alignment

100%

Bar Chart of Character Alignment

✓ Published1🌍 Public

Last edited Oct 13, 2021

Created on Sep 21, 2021

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.

AI-generated description

Bar chart of character alignment counts, colored by alignment for pratice of function based coloring.

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

References:

Stack overflow link for coutning alignment https://stackoverflow.com/questions/38296484/count-text-fields-from-csv-dataset-in-d3-js

MIT Licensed

Similar vizzes

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

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

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

71% match

Loading thumbnail…

Charater Height vs Weight Scatterplot Pt. 2

A scatterplot maps Marvel characters’ weight against height, with each point colored by alignment (green for good, dark red for bad, grey for neutral). Hovering highlights a point in blue, while character names are rendered as labels directly beside each circle. The visualization uses D3 v5 to load CSV data, scale linear axes, and render SVG elements, with axes labeled for pounds and feet. Height values are converted from centimeters to feet before plotting, and the chart applies fixed margins and an interactive hover effect via CSS.

LLeah Mitchell

70% match

Loading thumbnail…

Bar Chart

This bar chart displays the relationships between comic-themed sources and targets, with bar lengths encoding the value of each connection. The visualization uses D3 v5’s `scaleLinear` for horizontal positioning and `scaleBand` for categorical source names on the y-axis, rendering SVG rectangles for each data entry. Data is loaded from a CSV file via `d3.csv`, with values parsed as numbers, and the chart updates dynamically once the data is fetched.

RRochisman Datta

69% match

Loading thumbnail…

Fork of MarvelVsDC Bar Chart

This horizontal bar chart compares revenue figures for Marvel and DC movies, ranking titles by their dollar value. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical y-axis spacing, and `d3.axisBottom` with a custom tick formatter that abbreviates large numbers. Data is loaded from a CSV file via `d3.csv`, with numeric conversion applied to the rate field. The chart demonstrates custom axis styling, including removal of domain lines and addition of axis labels.

Hhappymail6

69% match

Loading thumbnail…

Title

A bar chart displays the relative rank of nine characters from the movie Suicide Squad, with each orange bar labeled by character name and scaled against a linear axis from zero to 100. The visualization uses D3 v5 to load data from a JSON file and render the SVG output. Mouseover events trigger a tooltip that shows the character's name and rank. The chart employs d3.scaleBand for the categorical x-axis, d3.scaleLinear for the quantitative y-axis, and d3.axisBottom with d3.axisLeft for the axes.

LLonwabo11

69% match

Loading thumbnail…

MarvelVsDC Bar Chart

This bar chart displays the top 10 cosmetic products by revenue, using horizontal bars with a steelblue fill. It loads CSV data from a GitHub gist and renders an SVG, with a linear scale for revenue and a band scale for product names. The code customizes D3 axes by removing tick lines and the domain, adding an axis label, and formatting tick values with `d3.format` to abbreviate large numbers. It uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3 v5.

Hhappymail6

69% match