MichaelCalmbach

@MichaelCalmbach·8 public vizzes

class and id

Two tiny circles demonstrate D3’s selection behavior with the `class` and `id` attributes. The SVG shows one red and one blue circle, each drawn from a hardcoded data array of coordinates. The code uses `d3.select` and `d3.append` with `selectAll('g')` and `selectAll('circle')`, assigning a fixed `class` and `id` to every circle, though only one shape appears visually. The example highlights how D3 groups and styling via `attr('fill')` work, but does not use any data-driven differentiation beyond the two constant color values.

Jun 22, 2018

Loading thumbnail…

fresh block wesnet

Animated bar chart cycles among four data arrays, encoding values as bar heights while bars enter, exit, and transition between states. Built with D3 v4, it uses `d3.transition` to animate attribute changes, `d3.select` for SVG element selection, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color assignment. The code updates every two seconds via `setInterval`, and the data arrays are defined inline, with one array effectively skipped due to the modulo operator.

Jun 22, 2018

Loading thumbnail…

Film Flowers, Single Update Complete

A flower drawn from SVG paths represents a single film, with its petal count and size encoding vote tally and IMDb rating, respectively. The shape of each petal varies according to the film’s MPAA rating. The code uses D3 v4’s data join with enter-update-exit to update the visualization, along with `d3.scaleLinear`, `d3.scaleQuantize`, and `d3.json` to load the movie data. An animation loop that would cycle through films is present but commented out.

Jun 22, 2018

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.

Jun 22, 2018

Loading thumbnail…

Film Flowers, Single Scaled Starter

A flower-like glyph represents a single movie from the IMDB dataset, with each petal encoding a movie attribute such as IMDB rating, vote count, year, and MPAA rating. The visualization renders the starter case of only the first movie, drawing its custom petal shapes as SVG paths. It uses D3 v4’s linear scale for size, a quantize scale for petal count, and a lookup table mapping ratings to petal geometries, with data binding and enter-append to draw the flower from the JSON source.

Jun 22, 2018

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.

Jun 22, 2018

Loading thumbnail…

Film Flowers, Single Complete

This example visualizes a single film as a flower-like glyph, where each of six petals represents one rotation step and its shape encodes the movie’s MPAA rating. The flower is drawn with SVG paths, using `d3.selectAll` and data binding to append each petal, with `transform` attributes for translation and rotation. Data comes from a local `movies.json` file, and the code relies on D3 v4 and Lodash’s `_.times` and `_.map` to prepare the ratings and petal geometry.

Jun 22, 2018

Loading thumbnail…

fresh block

This example displays two SVG petal shapes repeated in a grid across a 900-pixel canvas. The code defines each petal as a collection of SVG path commands, using cubic Bézier curves (`C`) and line segments (`L`). It employs the D3.js v4 library, specifically calling `d3.select` to target the SVG element, then chaining `.selectAll('path')`, `.data()`, and `.enter()` to append paths. The petal paths are drawn with a black stroke and no fill, and positioned via the `transform` attribute using computed translation values based on array indices. The dataset originates from a gist by MichaelCalmbach.

Jun 22, 2018