Pixar Films

100%

✓ Published0🌍 Public

Last edited Dec 5, 2025

Created on Dec 5, 2025

A dark, poster-style visualization presents song fingerprint data for "Ethereal Echoes," combining a central frequency amplitude ring with surrounding time-series rings for streams, chart position, playlist adds, and video views. Built with React and D3 v7, it uses SVG elements, `lineRadial`, and `scaleLinear` to render heatmap-like concentric layers, while hover and click interactions trigger a custom tooltip showing detailed values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Pixar Films Rating Version 2

This interactive visualization presents Pixar films as a garden of SVG flowers, where each flower’s petal lengths and colors encode four weighted metrics: runtime, rating score, year relevance, and sequel factor. Users adjust slider weights to recalculate each film’s aggregate score, trigger re-sorting, and click to inspect individual film details. Built with React and D3 v7, the visualization uses `<path>` elements to construct petal shapes and dynamic rotation transforms driven by film indices. The dataset loads from a local CSV file parsed with D3’s `csv` function.

Uudjeffrey.jay@gmail.com

80% match

Loading thumbnail…

Pixar Films Rating Version 2 (Matthias)

A radial bar chart shows Pixar films arranged as flower-like glyphs around a central point, with each film's aggregate score determining bar length. User-adjustable sliders weight runtime, rating, year relevance, and sequel status in the score calculation, while buttons sort films by score, name, or year. Colors encode MPAA ratings, and clicking a film reveals a details panel. The React implementation uses D3 v7's `scaleLinear` for positioning and renders everything as SVG.

MMatthias Stahl

78% match

Loading thumbnail…

Pixar Films Rating Version 3

A grid of petal-shaped charts compares ten films across eight weighted dimensions, with each flower's petal length encoding a normalized metric and its width reflecting the user-assigned weight. Petal color intensity scales with film rating, and a center label shows the overall score. Built with React and D3 v7, the visualization uses `scaleLinear`, `extent`, and `interpolateRgb` utilities within `flowerUtils.js`, while `renderFlowers.js` constructs each SVG petal path. Interactive sliders on the right adjust dimension weights, and clicking a flower displays a details tooltip.

Uudjeffrey.jay@gmail.com

77% match

Loading thumbnail…

#HAW Test Benny Pixar 2

This interactive parallel coordinates chart compares 23 Pixar films across four critic rating scales: Rotten Tomatoes, Metacritic, Cinema Score, and Critics' Choice. Built with React and D3 v7, the visualization renders SVG paths using line generators with cardinal curve interpolation. Users select films through a clickable legend, which highlights corresponding lines in distinct colors while dimming others. The code maps Cinema Score letter grades to numeric values for proper scaling, and includes hover-sensitive transparent paths that allow users to identify specific films across all axes.

Wwua439@haw-hamburg.de

75% match

Loading thumbnail…

Fork of Pixar Films Rating Version 2

A fork of the Pixar Films Rating visualization, this example renders each film as a flower whose petal lengths encode normalized scores for runtime, rating, year relevance, and sequel factor. Users adjust slider weights for each dimension, which recompute an aggregate score and re-sort the flowers. React state and D3's `csv` loader process data from `data.csv`, while SVG paths and `ResizeObserver` handle responsive rendering.

MMatthias Stahl

71% match

Loading thumbnail…

Untitled

This interactive parallel coordinates chart visualizes audio features of songs by selected artists, including energy, liveness, valence, speechiness, and danceability. Users click buttons to load CSV data for different artists, which triggers a D3 v6 animation that redraws the plot lines. The SVG rendering uses d3.scaleLinear for axes, d3.scalePoint for positioning, and d3.scaleOrdinal to color lines by playlist genre, with a legend displayed on the right. The data is sourced from GitHub-hosted CSV files.

Vvedant74

70% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 100 songs on Spotify as a horizontal bar chart, showing the duration of each track. The code uses React hooks (useState, useEffect) to load and manage CSV data from a GitHub gist, while D3 v5 provides scales (scaleBand, scaleLinear) and axis generation. SVG rectangles render the bars, with x-axis ticks drawn manually. The chart only plots the first 20 songs from the dataset, with tempo mapped to the y-axis and duration to the x-axis.

99176371431

69% match

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the top 15 Spotify songs from 2010-2019 as a horizontal bar chart, displaying danceability scores. The chart uses a pink background with purple accents and includes axis tick marks and labels. Built with React and D3 v5, the code leverages `d3.csv` for data loading, `scaleBand` and `scaleLinear` for scales, and renders SVG rectangles as marks. Data comes from a gist-hosted CSV file containing Spotify track metadata.

PPrathyusha Jampala

69% match