MakeOver Monday - White House Salaries

MakeOver Monday - White House Salaries

This interactive D3.js (v4) beeswarm chart compares White House staff salaries between the Obama and Trump administrations, using data from Makeover Monday 2017 week 29. Circle areas encode salary values in addition to the y-axis position, highlighting the salary differences between the two groups. The visualization uses the d3-beeswarm plugin to prevent overlapping circles, with hover tooltips showing individual salaries, while the chart also displays mean and median salary lines. The SVG rendering includes a transition that swaps between the two administrations to emphasize the distribution differences.

96% match

Custom Beeswarm II (perf. enhancement)

This interactive beeswarm chart visualizes the distribution of 150 French word stems along a horizontal axis, with the y-position optimized to avoid overlapping circles while preserving exact x-coordinates. The D3.js v3 and SVG implementation animates circle placement using an efficient collision-detection algorithm that estimates candidate positions against already-placed neighbors, skipping checks when a better placement is found. Circles are colored along a lightgreen-to-pink scale by rank, and hovering reveals tooltips with stem, rank, and trend data from an external CSV. The code includes dat.gui controls to adjust point density and radius.

63% match

Beeswarm

A beeswarm plot displays the distribution of numeric values from a CSV dataset, with each circle representing a data point positioned along a logarithmic x-axis. The circles are arranged using d3.forceSimulation with forceX, forceY, and forceCollide to prevent overlap. A Voronoi overlay via d3.voronoi improves hover interaction: hovering over any cell highlights the corresponding circle in red, and a tooltip shows the data point’s ID and value. The visualization renders in SVG with an axis label and tick formatting.

FFrissAnalytics

62% match

Project 10/24: added tooltip for each dot; will try to convert into a beeswarm

This scatter plot visualizes the earnings and labor force data of college graduates by major, sourced from FiveThirtyEight. Each dot represents a major, positioned by its category on the x-axis and a selected metric (e.g., median earnings) on the y-axis. Hovering over a dot displays a tooltip with the major’s name. The visualization uses d3’s `scaleOrdinal`, `scaleLinear`, and `scalePoint` for scaling, with dropdown menus to change the y-axis metric. Colors encode major categories, and clicking a legend entry highlights that group while dimming others.

YYF

62% match

Salary scatter plot

This scatter plot displays individual member salaries as yellow circles, with a single dark blue circle representing the current user's salary for comparison. The y-axis shows salary amounts in dollars, while the x-axis positions are randomized. When hovering over a circle, it enlarges, changes color, and displays a yellow tooltip with the exact salary value. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for scales, `d3.axisLeft` for the y-axis, and event handlers for mouse interactions, with data sourced from a JSON array.

FFernando Guillen

Fork of beeswarm

This visualization displays a beeswarm plot of honey bee colony loss percentages across different U.S. states in 2015, with each circle representing a reported cause of loss positioned along a logarithmic x-axis. The chart uses d3.forceSimulation with forceX and forceCollide to arrange the data points, while d3.voronoi polygons provide hover detection and interactive highlighting. The code uses d3.csv to load data_2015.csv and renders the results as an SVG with a logarithmic scale axis.

Rryan-dirajlal

Histo-packing with d3-beeswarm

A rework of John Burn-Murdoch’s Histo-packing block, this visualization shows 5,000 numeric values from a JSON file arranged as a vertical histogram—a beeswarm of individual circles stacked and packed from the center outward. Each circle’s final vertical position reflects its value, while its color encodes the distance from 50, creating a gradient from orange to red. The d3-beeswarm plugin computes the collision-free arrangement, and d3 transitions animate circles from a starting line down to their packed destinations with staggered delays and durations. The chart uses d3 scales, axes, and SVG rendering.

Custom Beeswarm & ForceLayout

This beeswarm chart visualizes the rank and trend of 150 French words from customer feedback, plotting each word as a circle along the x-axis while preserving its exact position. A custom placement algorithm initially arranges the circles to avoid overlap, then a force-directed layout is applied for a few iterations to reduce extreme accumulations, balancing precision with fast computation. The visualization uses d3.v3 with SVG rendering and supports hover interactions to reveal each word’s data. The code accesses the csv data through the D3 library and includes a dat.gui control panel for adjusting parameters like radius and iteration count.