Skip to main content
Log in
L

Leah Mitchell

@LeahMitchell·26 public vizzes

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.

Apr 26, 2022
Loading thumbnail…

Fork of Front-End for IR project

This interactive scatterplot visualizes sentiment analysis across a corpus of text data, with each point representing a word mapped by its sentiment score and frequency. Users can enter two words into text inputs to compare their associated topics and related terms, which display as lists beside the plot. The visualization uses D3 v6 to render SVG points with hover effects that highlight individual data, while color coding indicates positive, negative, or neutral sentiment based on threshold values. The code includes fake sample data for testing, demonstrating word-topic relationships and word-word similarity rankings.

Apr 26, 2022
Loading thumbnail…

Front-End for IR project

This interactive visualization front-end compares Twitter and Reddit sentiment and topic associations for user-entered words. It displays sentiment as colored, neutral, positive, or negative labels alongside word-similarity and topic-term lists. Built with D3.js v6, the interface renders SVG text and labels across a divided screen, with input fields for two words. The implementation uses custom JavaScript helper functions to map sentiment values to colors and mouth-angle symbols, while layout is managed through CSS flexbox and absolute positioning in the grid container.

Apr 26, 2022
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.

Mar 21, 2022
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.

Mar 19, 2022
Loading thumbnail…

Charater Height vs Weight Scatterplot

A scatterplot displays the height and weight of Marvel characters, with each point representing a character. The visualization uses D3 v6 to load CSV data, scale linear axes, and render SVG circles. Axes are positioned using `scaleLinear` and `axisLeft`/`axisBottom`, while a zoom behavior is defined but not applied to the plot. Points are initially placed at the origin and styled with CSS hover effects, which change their fill color and opacity when moused over.

Mar 19, 2022
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.

Dec 9, 2021
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.

Dec 9, 2021
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.

Nov 16, 2021
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.

Nov 16, 2021
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`.

Nov 16, 2021
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.

Nov 2, 2021
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`.

Oct 26, 2021
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`.

Oct 13, 2021
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.

Oct 13, 2021
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis. The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles. The chart is implemented as a reusable function, taking data, dimensions, margins, and accessor functions as configurable properties. It renders full-screen as an SVG, with each data point drawn as a circle with a fixed radius of 5 pixels.

Oct 4, 2021
Loading thumbnail…

World Map

This world map visualizes country boundaries, rendered as SVG paths using D3's `geoPath` and `geoNaturalEarth1` projection. The map loads geographic data from the world-atlas package, combining a TopoJSON file with a TSV file to attach country names to each region. Hovering over a country turns it red, and a native SVG `<title>` element displays the country name. The map also includes a blue sphere background and supports zooming via the `d3.zoom` API, applying transformations to the country group.

Sep 28, 2021
Loading thumbnail…

Scatterplot Chocolate Data

This scatterplot visualizes chocolate data, plotting the count of ingredients against cocoa percentage. Each brown, semi-transparent circle represents a chocolate bar, with its position determined by these two variables. The visualization is built using D3 version 6, leveraging functions like `csv` for data loading, `scaleLinear` for scaling axes, and `axisLeft` and `axisBottom` for generating the axes. The plot renders as an SVG, sized to fill the browser window, and uses data from a raw CSV file hosted on GitHub.

Sep 27, 2021
Loading thumbnail…

Scatterplot of Boston Crime Data

A scatterplot displays Boston crime data for theft-type offenses, plotting the hour of day on the x-axis against the offense code on the y-axis. Each grey, semi-transparent circle represents an individual crime, with opacity revealing overlapping points. The data loads from a CSV file and is processed via `d3.csv` with a parsing function that converts numeric fields. Using d3.v6, the visualization employs `scaleLinear` for the axes, `axisLeft`, `axisBottom`, and SVG `circle` elements within a full-window rendered chart.

Sep 27, 2021
Loading thumbnail…

Summary Statistics for Marvel Power Data

This example displays summary statistics for Marvel power data, showing the file size in kilobytes, row count, and column count in large text. It loads a CSV file from a GitHub gist using `d3.csv` and formats the output with `d3.csvFormat` to measure data size. The visualization also includes commented alternatives using `fetch` with async/await and `d3.csvParse`, demonstrating different loading approaches. The page renders statistics in a styled `<pre>` element using D3 v5.

Sep 27, 2021
Loading thumbnail…

Summary Statistics for Boston Crime Data

This example displays summary statistics for Boston crime data from 2020, showing the dataset’s size in kilobytes, row count, and column count in large text. It loads the CSV from a GitHub gist using `d3.csv`, then calculates the file size by measuring the formatted CSV string length and divides it by 1024. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, demonstrating different approaches to asynchronous data loading. The visualization is minimal, rendering the final message into a `<pre>` element using standard DOM text assignment.

Sep 27, 2021
Loading thumbnail…

Summary Statistics for Weed Prices Data

This visualization displays summary statistics for a weed pricing dataset from New England, showing the file size in kilobytes, total row count, and column count for the CSV data. The example loads the data from a GitHub gist using D3 v5 and presents the statistics in large text within a pre-formatted HTML element. It demonstrates the d3.csv method for fetching and parsing tabular data, along with file size calculation using the d3.csvFormat function to measure the loaded data’s memory footprint.

Sep 27, 2021
Loading thumbnail…

Java Script Arrays

Bouncing, color-shifting circles animate across an SVG canvas generated with D3 v6. The visualization demonstrates D3’s data join pattern using `selection.join`, updating circle positions, radii, and RGB fill colors based on a continuously changing time parameter. It uses `d3.range`, `d3.select`, and `d3.ascending` (commented out) to explore JavaScript array methods like `map`, `sort`, and `reduce`. The example highlights the seamless handling of dynamic arrays in data-driven documents.

Sep 27, 2021
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The React component tracks pointer movement via the `onMouseMove` event handler, updating the circle’s `cx` and `cy` attributes in state. Rendering uses React’s `useState` and `useCallback` hooks, with the coordinate system based on the browser’s `clientX` and `clientY` values.

Sep 27, 2021
Loading thumbnail…

Smiley Face Exercise

A grid of randomly generated smiley faces demonstrates how React components and D3’s arc generator combine to build reusable SVG visuals. Each face is composed of modular React elements—background circle, eyes, and mouth—with randomized props for stroke width, eye offsets, eye radius, mouth width, and mouth radius. The `range` function from D3 creates 18 faces, and `d3.arc` computes the smile path. Rendering uses ReactDOM’s `render` into a single SVG container, with all shapes drawn as SVG elements.

Sep 27, 2021
Loading thumbnail…

SVG Fundamentals: Marvel Logo

This example recreates the Marvel Studios logo using only SVG fundamentals. It demonstrates text styling, gradient fills, and basic shape drawing, with bold serif typography for "MARVEL" and "STUDIOS" set against a gradient background. The code uses SVG `<rect>`, `<line>`, and `<text>` elements, along with `<linearGradient>` definitions, to construct the composition. It relies on CSS font settings and explicit `fill` properties to achieve the iconic look. No external libraries or data sources are involved; the visualization is purely a static SVG rendering.

Sep 27, 2021