Fork of Pixar Films Rating Version 2

100%

Fork of Pixar Films Rating Version 2

✓ Published0🌍 Public

Last edited Dec 5, 2025

Created on Dec 5, 2025

Forked from 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.

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

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

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

81% match

Loading thumbnail…

Film Flowers, Single Complete

This visualization displays a single film as a flower composed of animated petals, with each petal's shape, size, and color encoding the film's MPAA rating, IMDB rating, and vote count. The code uses D3 v4 to map data to SVG paths, scaling petal size by rating and the number of petals by votes, with rating-specific path definitions. Petals animate via chained `.transition()` calls, scaling up and down over time. The visualization reads from a local `movies.json` file and uses `d3.scaleLinear` and `d3.scaleQuantize` to handle data mapping.

PPanJ

78% match

Loading thumbnail…

Film Flowers, Single Scaled Complete

This visualization represents individual films as stylized flowers, where each bloom's petal shape corresponds to the film’s MPAA rating, the number of petals reflects its IMDb vote count, and the petal size encodes its IMDb rating. The example uses D3 v4 to map data to scales and renders the flowers with SVG paths and transformations. Data is loaded from a local `movies.json` file, and a `setInterval` timer is present, though its animation function is not fully implemented in the provided code.

MMichaelCalmbach

77% match

Loading thumbnail…

Film Flowers, Single Scaled Starter

A D3.js visualization renders a single movie from a JSON dataset as a stylized flower. Each film is represented by a set of SVG petal paths, whose quantity corresponds to the movie's vote count and whose scale encodes its IMDB rating. The code uses `d3.scaleLinear` and `d3.scaleQuantize` to map these values, with petal shape determined by the film's rating category (G, PG, PG-13, R). The flower is drawn at a fixed position using SVG transformations and rainbow-colored fills.

SSirDieter

77% match

Loading thumbnail…

Film Flowers, Single Scaled Starter

This example visualizes the relationship between a movie’s IMDB rating and its number of votes by encoding each film as a flower. The number of petals corresponds to the number of votes, and the size of each petal is scaled by the movie's rating. The flower is drawn using SVG paths, with each petal rotated around the center based on its index, creating a radial layout for a single movie. The code uses D3 v4 and lodash to manage the data and rendering, with movie data loaded from a JSON file.

EEelsie

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

76% match