Skip to main content
SimilarExport ZIP
100%

#HAW Test Benny Pixar 2

✓ Published0🌍 Public
Wwua439@haw-hamburg.de
Last edited Dec 5, 2025
Created on Dec 5, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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
83% match
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
82% 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
80% 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
76% match
Loading thumbnail…

#HAW Benny Test Pixar

This example renders five fixed circles positioned by hard-coded x and y coordinates. The visualization uses d3.v7's selection and join operations within a React 19 application, drawing SVG circles with a radius of 30. The circles are placed at arbitrary points without connecting lines or animation, and the code relies on the `selectAll` and `join` APIs to manage the SVG elements.

Wwua439@haw-hamburg.de
75% match
Loading thumbnail…

Pixar Films

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.

Uudjeffrey.jay@gmail.com
75% match
Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between movie ratings and ranks across a dataset of films, with each circle representing a movie. The visualization uses D3 v5 within a React framework, leveraging `d3.csv` for data loading, `d3.scaleLinear` for axis scaling, and `d3.axisBottom` and `d3.axisLeft` for tick marks and gridlines. Rendered as an SVG, the plot includes axis labels, a title, and red semi-transparent circles. The data comes from an external `movies.csv` file, and the code parses numeric fields before plotting.

AAkhilesh7866
71% match
Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between movie ratings and ranks across a dataset of films, with each circle representing a movie. The visualization uses D3 v5 within a React framework, leveraging `d3.csv` for data loading, `d3.scaleLinear` for axis scaling, and `d3.axisBottom` and `d3.axisLeft` for tick marks and gridlines. Rendered as an SVG, the plot includes axis labels, a title, and red semi-transparent circles. The data comes from an external `movies.csv` file, and the code parses numeric fields before plotting.

AAkhilesh7866
71% match