D3.Unconf 2016 Badge

100%

D3.Unconf 2016 Badge

✓ Published0🌍 Public

Last edited Mar 31, 2017

Created on Mar 31, 2017

A flower-shaped badge encodes movie metadata from a JSON dataset, with each flower's petal count, size, and colors mapping to IMDb votes, ratings, and genres. The visualization uses D3 v4 to generate SVG paths for petals and applies a multiply blend mode for overlapping color effects, while D3 scales and Lodash handle data binning and aggregation. A motion blur filter on the SVG defs adds a subtle animated quality to the static rendering.

AI-generated description

Edited for my D3.Unconf 2016 badge :D

Code is horrendously ugly and hacky because it was made in a rush, please don't judge.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/461a2519c23e3e5f46045d45cb4dbf98'>DS July: Code 1</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/c53524fa80d7016dee869537375679e7'>DS July: Code 2</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/269e3ab4053c08ac122ee2a9db0d61a2'>DS July: Code 3</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/2e7f74c469f7f204a32d5afa5e0369e5'>DS July: Code 4</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/0013618f4dedd57fd41baf1892b364d6'>DS July: Code 5</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/9297ed439247fcdadf8f0f47066b37e1'>DS July: Code 6</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/d612c6c653fb8b4d7ff3d422be164a5d'>DS July: Code 7</a>

forked from <a href='http://bl.ocks.org/sxywu/'>sxywu</a>'s block: <a href='http://bl.ocks.org/sxywu/a8e3ea4d62c78f1fdccc941900ee61e0'>D3.Unconf 2016 Badge</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

D3 Unconf Badge

A black canvas displays an animated cluster of concentric, rotating square outlines that continuously enlarge and shift. The visualization updates every four seconds, generating a new set of 60 layered rectangles that scale and rotate around the center, creating a pulsing, geometric badge effect. Built with D3 v4, the code uses `d3.transition` for smooth 4-second animations, `d3.interval` to trigger periodic updates, and SVG `rect` elements with CSS transforms for rotation. Each frame recalculates rectangle positions via scaling and rotation math, producing an evolving spiral-like pattern on a stark black background.

KKevinGutowski

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

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

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

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

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

74% match

Loading thumbnail…

Film Flowers, Single Starter Code

This visualization shows a single movie's data rendered as an SVG flower, with each petal representing a different attribute. The starter code defines four petal path shapes and maps movie ratings (G, PG, PG-13, R) to different petal paths, while size and petal count scales are set up but not yet applied to the data. The example uses D3 v4 data-binding to append paths, and the current incomplete implementation leaves the flower undrawn, serving as a template for rendering one movie's statistics as a stylized bloom.

5534N

74% match

Loading thumbnail…

Film Flowers, Single Starter

A single film flower visualizes one movie's metadata as a six-petaled SVG shape, with each petal drawn from a hard-coded path and rotated evenly around a central point. The code loads movie data from a local `movies.json` file, maps fields like rating, votes, and year, then uses the first movie's PG rating to select a petal path from a lookup table. Petals are rendered via D3 v4's data join and enter-append pattern, with transforms for translation and rotation, while Lodash handles array generation and mapping.

MMichaelCalmbach

74% match