Skip to main content
SimilarExport ZIP
100%

Bubbly Jobs Chart

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 9, 2017
Created on Mar 9, 2017

Each bubble represents an occupation in the US, with size encoding employment numbers for 2014 and horizontal position approximating median annual wage. Occupations are grouped vertically by major job category, and hovering reveals details. The chart uses the `d3.forceChart()` plugin to position bubbles via a force layout with custom gravity, while an x-axis shows wages in dollars. Data comes from the Bureau of Labor Statistics, and the design is inspired by a New York Times graphic.

AI-generated description

Each bubble is an occupation. Hover bubbles to see info on that occupation

The size of the bubble shows how many jobs in this occupation there are in the US in 2014. Bubbles on the left are lower paying occupations and bubbles on the right are higher paying jobs. Bubbles are bunched vertically into larger occupation categories (management occupations, production occupations, etc.).

Uses the d3.forceChart() plugin to draw the bubble layout. Design inspired by this graphic from the New York Times. Data source: Bureau of Labor Statistics.

Notes: Because this uses a force layout for bubble positioning, the x-axis only approximates where an occupation's bubble should be based on its wage. Wages from this dataset are top-coded at $187,000. Wages for jobs at this top-coded level may, in reality, have higher median annual wages.

forked from <a href='http://bl.ocks.org/armollica/'>armollica</a>'s block: <a href='http://bl.ocks.org/armollica/93491e923d72e81df769'>Bubbly Jobs Chart</a>

Similar vizzes

Loading thumbnail…

Bubbly Jobs Chart

Each bubble represents an occupation in the US, with size encoding employment numbers for 2014 and horizontal position approximating median annual wage. Occupations are grouped vertically by major job category, and hovering reveals details. The chart uses the `d3.forceChart()` plugin to position bubbles via a force layout with custom gravity, while an x-axis shows wages in dollars. Data comes from the Bureau of Labor Statistics, and the design is inspired by a New York Times graphic.

TThanaporn-sk
100% match
Loading thumbnail…

Bubbly Jobs Chart

This interactive chart displays U.S. occupations as bubbles, with bubble size representing 2014 employment numbers and horizontal position indicating median annual wage. Vertical grouping separates occupations into major categories like management and production. The visualization uses the d3.forceChart plugin, which wraps d3.layout.force to position bubbles with custom gravity and collision detection in an SVG rendered with D3 v3. Hovering reveals occupation details via a tooltip. Data comes from the Bureau of Labor Statistics, with wages top-coded at $187,000.

AAjayyy
96% match
Loading thumbnail…

Fork of bubble chart

This interactive bubble chart compares unemployment rates over time across ten selected U.S. states. Each circle’s position encodes the year and unemployment percentage, while its size and color map to the rate and state, respectively, using d3.scaleLinear, d3.scaleOrdinal, and d3.schemeCategory10. The visualization includes a legend and interactive tooltips, rendering SVG elements with axis functions d3.axisBottom and d3.axisLeft. Data comes from the @oabouhas/unemployment package.

Oomniaabouhassan@gmail.com
69% match
Loading thumbnail…

Org Bubbles

Org Bubbles visualizes an organizational hierarchy as a force-directed bubble chart, with circles representing employees connected by lines to their managers. Users can group all bubbles together or split them by location, organizational unit, or employee type via toolbar buttons. The code uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceCollide`, and `d3.forceX`/`forceY` to position nodes, while drag events and a “selected” class toggle circle fill styles. Data comes from a CSV file containing ID, parent ID, level, position, and type fields.

TThanaporn-sk
68% match
Loading thumbnail…

Fork of Fork of Circles with D3

This bubble chart visualizes the relationship between salary and employee residence place, with bubble size representing population and color indicating job title. It is rendered as an SVG using D3 v7, employing `d3.scaleLinear` for axes, `d3.scaleSqrt` for radius encoding, and `d3.scaleOrdinal` with `d3.schemeCategory10` for categorical coloring. The chart includes interactive tooltips on circle hover, axis labels, and a categorical legend. Data comes from merged JSON containing salary, population, and job title information.

Ssanjanadadi19@gmail.com
68% match
Loading thumbnail…

Org Bubbles

Org Bubbles visualizes an organizational hierarchy as a force-directed bubble chart. It shows 13 employee nodes connected by parent-child links, with buttons to group or split the bubbles by organizational unit, location, or employee type. The visualization uses d3.forceSimulation with forces for collision, charge, and positioning, while drag events let users select individual nodes. Node colors come from a categorical color scale, and the code loads data from a CSV file and relies on SVG rendering and transitions for animations.

SSpaceActuary
68% match
Loading thumbnail…

Force-Directed Bubble Chart: Age vs. Balance

This force-directed bubble chart visualizes the relationship between age and financial balance for individual records, using bubble size to encode balance magnitude and color to represent job categories. The chart employs a physics-based layout where circles repel and attract each other using `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` forces, settling into a non-overlapping arrangement after 120 simulation ticks. Data is fetched from a remote CSV file, parsed into objects, and rendered as SVG circles with interactive tooltips that display the exact age and balance on hover. The visualization uses D3 v7 loaded from UNPKG, with circle positions driven by the simulation's x and y coordinates.

Ssrikkanth05
67% match
Loading thumbnail…

Bubble Chart

This bubble chart maps countries by cost of living on the x-axis and population on the y-axis, with bubble radius encoding population using a square-root scale. The visualization uses d3.scaleLinear for axes, d3.scaleSqrt for bubble size, and d3.scaleOrdinal with d3.schemeCategory10 for categorical coloring. SVG circles and text labels are positioned via xScale and yScale, with d3.axisBottom and d3.axisLeft rendering the axes. The data is a static array of five country records, rendered as semi-transparent colored bubbles to compare living expenses against population size.

VVenkat-Sumith-Thota
67% match