Tell us what works and what could be better. We read every submission.
@albertojg·5 public vizzes
Film Flowers visualizes the ratings and popularity of movies as a grid of multicolored flower glyphs, one per film. Each flower’s size encodes the movie’s IMDB rating (via a linear scale), while the number of petals encodes the number of IMDB votes using a quantize scale. Petal shape is determined by the MPAA rating (G, PG, PG-13, R), and petal color is assigned using `d3.interpolateRainbow` based on petal position. The SVG is generated with D3 v4, with each flower transformed and scaled as a group, and petals rotated and blended with `mix-blend-mode: multiply`. The code loads movie data from a JSON file and uses lodash for data mapping.
This visualization renders a single film as a "flower" of SVG paths, where each petal’s shape, size, and count encode the movie’s MPAA rating, IMDb score, and vote count. The code maps the first movie’s rating to a petal scale, its votes to a petal count between 5 and 9, and its rating category (G, PG, PG-13, R) to one of four predefined petal path shapes. The flower is drawn by binding petal data and appending rotated, scaled `<path>` elements, all centered at a fixed point. Only one movie is displayed to demonstrate the data transformation and drawing pipeline before scaling to the full dataset. The SVG canvas is sized 600 by 20000 pixels, though only the initial flower is rendered in this starter example.
Film Flowers, Single Starter Code is a D3.js v4 SVG visualization that renders movie data as individual flower glyphs. Each flower represents a film, with petals drawn using SVG paths that are scaled and rotated based on the movie's metadata. The code defines four distinct petal shapes mapped to MPAA film ratings (G, PG, PG-13, R) and uses lodash for data manipulation. The visualization loads movie data from a JSON file and prepares scales for size and petal count, though the current iteration focuses on a single movie's petal construction. The SVG canvas is sized at 600 pixels wide and 20,000 pixels tall, suggesting the full design would display flowers vertically for each film in the dataset. This is starter code that sets up the petal path definitions, scales, and data loading, with the drawing logic left incomplete.
A grid of seven distinct SVG petal shapes is displayed, each drawn as a separate path with a black outline and no fill. The example shows how multiple predefined path strings can be rendered side-by-side using D3 v4’s data join and the `attr('d', …)` method. Each petal’s position is set via `attr('transform', …)` with a computed `translate` based on its index, placing them in a three-column layout. The code uses only D3 selection and data-binding APIs, with no external data source or interaction.
This example shows a code-modification workflow that rewrites JavaScript import statements by mapping component names to their file paths. It uses jscodeshift to parse source files into abstract syntax trees, filter import declarations from `components` or `component-library`, and replace them with direct path imports. The process generates path mappings from export declarations in index files, combines them into a single JSON dictionary, and then applies the transformation via the `transform-import.js` script, which leverages `jscodeshift`’s `ImportDeclaration` finder and `replaceWith` API. The run.sh script orchestrates the entire pipeline using npm scripts and Node.js file operations.