Small Multiples

100%

Small Multiples

✓ Published0🌍 Public

Last edited Sep 2, 2017

Created on Sep 2, 2017

This example visualizes fantasy football draft picks as small multiples, with each of the 14 teams shown in its own panel. The visualization displays player names, positions, and team affiliations across 40 draft rounds, using SVG text elements. The data is loaded from an inline JavaScript array and rendered with D3 v4, with a simple mapping of draft rounds to coordinate positions. The animation component suggests interactive or sequential highlighting of picks, though the specific transitions are not explicitly defined in the visible code.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/mforando/'>mforando</a>'s block: <a href='http://bl.ocks.org/mforando/73c734dc198397095ada01da4ad6935d'>Small Multiples</a>

mit Licensed

Similar vizzes

Loading thumbnail…

nfl-draft-order

This visualization compares ESPN's expert rankings against the aggregated "users' picks" for the top 50 NFL fantasy football players. Each player is represented by a line connecting their position on the left (ESPN Pick) to their position on the right (Users' Pick), with players ordered by their median pick. The graphic highlights standout deviations, like Patrick Mahomes, whose ESPN rank of 43 contrasts sharply with his user median, making his line prominently darker and thicker. The code uses D3.js (`d3.select`, `c.svg.appendMany`) to render SVG paths and text, drawing data from a TSV file containing each player's average, median, and expert pick positions.

11wheel

72% match

Loading thumbnail…

ice8.1

This example shows a static hierarchical tree of football teams and their players, grouping 11 clubs by playing position. The visualization displays the data as a vertical dendrogram with circular, green-filled nodes connected by dotted green links, using the D3.js library’s tree layout. Each team branches into positional categories like Forward, Midfielder, or Defender, with individual player names as leaf nodes. The SVG rendering applies custom CSS styling for node radii, stroke colors, and font properties, while the animation metadata suggests potential interactive or transitional behaviors not implemented in the visible code.

Kktvgs25@gmail.com

71% match

Loading thumbnail…

A7 Small Multiples

This visualization uses small multiples to compare four World Cup metrics—goals scored, teams, games, and attendance—as line charts over time. Each metric gets its own SVG chart with shared axes, making trends easy to scan. The code loads data from a CSV via `d3.csv`, parses numeric fields, and uses `d3.line` with linear scales for each chart. A color-coded legend, created with `d3.legendColor`, maps the four categories, while titles label each small multiple. The layout relies on D3 v7’s axis generators and a fixed SVG structure for consistent comparison.

SShazil Taqi

70% match

Loading thumbnail…

8.2

This example shows a static hierarchical tree diagram of football teams, their player positions, and individual players, organized in a top-down layout. It uses the D3.js library (version 3.5) to generate the SVG-based visualization, with clickable nodes and dashed link lines connecting parent and child elements. The tree data is hard-coded in JavaScript, and the layout is computed using D3’s tree layout functions. Interactive node styling is applied through CSS classes, though no animation is present.

Kktvgs25@gmail.com

70% match

Loading thumbnail…

Gist 7980cfcf9d877376466041d669ec7237

This interactive visualization displays NBA team performance metrics as sortable rows, with each unit representing a team and its starting five players. Clicking toggle buttons reorders the teams by statistics such as offensive rating, defensive rating, and rebounding percentages, while the panel updates with player names and detailed stats. The code uses D3 v3 with SVG, binding data from a local JSON file and applying `transition.attr` for animated reordering. Sorting logic relies on custom accessor functions and `d3.descending` to compare values.

TThanaporn-sk

69% match

Loading thumbnail…

Small multiples

This example demonstrates small multiples by rendering five separate line charts, one for each month, showing sales trends across the years 2011 to 2015. Each chart displays an area, line, and point series created with d3fc series components, alongside an average annotation line. The charts are generated using the d3fc chartSvgCartesian component, which is applied to each group of data via a data-join. The y-axis is hidden on all but the first chart using CSS, and the chart height adapts to screen width through a media query.

KKuerzibe

69% match

Loading thumbnail…

Digital & Data Literacy Task 4

This interactive data visualization uses a D3.js v3 force-directed tree layout to display a hierarchical breakdown of a fictional football league’s results. The tree shows team statistics, including total points, win/draw/loss counts, goal difference, and games played, with data sourced from a JSON file. Users can click on parent nodes to expand or collapse branches, revealing child details. The rendering relies on SVG paths and circles, with the visualization overlaid on a football pitch background image. The code uses `d3.layout.tree`, `d3.svg.diagonal`, and `transition` methods to animate node position changes smoothly.

GGravyGames

69% match

Loading thumbnail…

Linked small multiple area charts with focus hovers

The visualization presents a grid of small multiples, each charting the frequency of an NBA player name over time. Although data spans from 1950 to 2015, most names show negligible values until their player’s career start year, after which trends become visible. Built with D3.js, the SVG charts share a synchronized hover interaction: moving the mouse across one chart updates a focus line and value label across all charts simultaneously. Each area chart uses distinct axes and styling, with the data loaded from a CSV file and parsed using `d3.time.format`.

KKuerzibe

68% match