Pixar Films Rating Version 3

100%

Pixar Films Rating Version 3

✓ Published0🌍 Public

Last edited Dec 5, 2025

Created on Dec 5, 2025

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.

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

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

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

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

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

80% match

Loading thumbnail…

Film Flowers, Single Complete

This visualization displays a single movie as a flower, using a radial petal diagram to encode the film's data. Each flower represents one movie, with the number of petals mapped to the movie’s IMDB vote count and the size of the petals scaled by the IMDB rating. The shape of each petal is determined by the movie's rating category (G, PG, PG-13, R). The example, titled "Film Flowers, Single Complete," renders one flower in an SVG canvas using D3 v4 and lodash, with the flower centered and scaled based on the movie's rating. The code defines petal paths for each rating category, scales for size and petal count, and draws the flower by rotating and scaling the path for each petal.

5534N

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

79% match

Loading thumbnail…

Untitled

Each summer blockbuster from 1990 onward is drawn as a flower, with bloom size mapped to IMDb rating and petal count to vote totals, while petal shape and color encode the film’s MPAA rating and genre. The SVG scene is built with D3 v4 inside a React page, using cubic Bézier path definitions for petals and leaves, a Gaussian blur filter for subtle motion, and multiply blend modes for overlapping color mixing. Movie metadata comes from the bundled `movies.json` file, with each flower positioned chronologically down a tall scrolling canvas.

Ppcsong33

78% match