TheShetland

@TheShetland·8 public vizzes

DashBoard

This dashboard presents linked views of categorical data, showing a histogram of state totals alongside a pie chart and legend for frequency breakdowns. Users can hover over histogram bars to filter the pie chart and legend for that state, or hover over pie slices to update the histogram accordingly. Built with D3 v3, it uses `d3.scale.ordinal` and `d3.svg.axis` for the bar chart, and SVG transitions (`.transition().duration(500)`) to animate updates between views. The data is embedded in the script as frequency objects per state.

Jul 26, 2018

Loading thumbnail…

Open Chord Shared Ad Blocks

This D3.js chord diagram visualizes how often five soda brands—7-Up, A&W, Coke, Dr Pepper, and Pepsi—share advertising blocks, with the matrix values encoded as chord width and color. Rendered as an animated SVG, the diagram uses `d3.layout.chord()` to position groups and chords, and `d3.scale.ordinal()` with a custom color palette. Hovering over a group fades the others, and tooltips reveal the exact shared-block counts. The visualization uses a viewBox and `preserveAspectRatio` for automatic resizing.

Jul 19, 2018

Loading thumbnail…

Open Chord Shared Ad Blocks

The visualization displays shared ad blocks among five soda brands—7-Up, A&W, Coke, Dr Pepper, and Pepsi—using a chord diagram. Hovering over a group fades the other chords to highlight connections, with tooltips showing the count of shared ad blocks between pairs. Built with D3 v3, the SVG layout uses the `d3.layout.chord` API, along with `d3.svg.arc` and `d3.svg.chord`, and includes animated mouseover and mouseout fades. The dataset is a hardcoded co-occurrence matrix.

Jul 19, 2018

Loading thumbnail…

D3.js: Animating Stacked-to-Grouped Bars

This example demonstrates the transition between stacked and grouped bar charts, allowing viewers to compare categorical data across multiple series. The visualization uses D3.js v3 and jQuery to animate the transformation, with radio button controls to toggle between the two modes, while a tooltip displays precise values for each bar segment on hover. The data is generated procedurally using a bump layer function, and the chart leverages D3's layout stack API to compute the stacked positions before animating the rect elements to their grouped coordinates.

Jul 13, 2018

Loading thumbnail…

Click to Zoom

This interactive map visualizes the countries of the world, rendered as SVG paths using the Natural Earth 1:50m Admin-0 Countries dataset. Each country is hoverable and, upon clicking, the entire map smoothly zooms in on that specific country's geographic center. The view uses a D3.js equirectangular projection with a graticule, and the zoom animation is implemented via a CSS transform applied to a grouped layer, using `d3.geo.path` and `d3.geo.centroid` for geometry handling.

Jul 13, 2018

Loading thumbnail…

Bilevel Partition

This interactive sunburst diagram visualizes the hierarchical structure of the Flare data, where each arc’s angle corresponds to a node’s value and color encodes its category. Clicking an arc zooms into that subtree, while clicking the center zooms back out. Built with D3 v3, it uses the `d3.layout.partition` and `d3.svg.arc` to compute the radial layout, and `transition.attrTween` to animate path geometry between zoom states. Data comes from `flare.json`, a nested tree of software project metrics.

Jul 13, 2018

Loading thumbnail…

CrossFilter, dc.js

This interactive dashboard shows earthquake records for New Zealand, allowing users to filter events by magnitude, depth, time, day of week, and island location through linked bar, line, row, and pie charts. Built with dc.js and crossfilter, it displays a data table and aggregate counts that update dynamically when selections are made. The charts use D3.js for rendering and load data from a CSV file containing earthquake attributes like location, magnitude, and depth.

Jul 13, 2018

Loading thumbnail…

Collaborations between MCU Avengers

This chord diagram visualizes how often the original six Avengers appear together in MCU movies up to Thor: Ragnarok. Each chord’s thickness reflects the number of co-appearances, with a gradient from one Avenger’s color to the other’s. Built with D3.js 3.5.6, it uses a custom `customChordLayout` (adapted from `d3.layout.chord`) to reduce chord overlap, `d3.svg.arc` and `d3.svg.chord` for rendering, and SVG `linearGradient` elements to color each link. Tooltips are powered by Bootstrap and jQuery.

Jul 13, 2018