Bubbly Jobs Chart

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.).

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 armollica's block: Bubbly Jobs Chart

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Occupation Bubbles</title>
    <style>
      body {
        font: 14px monospace;
      }

.axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

.axis path {
        display: none;
      }

.axis .label {
        font-size: 12px;
      }

.tooltip {
        width: 200px;
        background-color: rgba(255, 255, 255, 0.9);
        border: 1px solid rgb(203, 203, 203);
        padding: 0px 20px;
      }

.tooltip h4 {
        margin-top: 10px;
      }

.tooltip p {
        margin: 10px 0px;
      }

.tooltip.hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
      var margin = { top: 20, left: 200, bottom: 30, right: 70 },
          width = 960 - margin.right - margin.left,
          height = 2000 - margin.top - margin.bottom,
          padding = 3;

var majorGroups = {
        "11": "Management",
        "13": "Business and financial operations",
        "15": "Computer and mathematical",
        "17": "Architecture and engineering",
        "19": "Life, physical, and social science",
        "21": "Community and social service",
        "23": "Legal",
        "25": "Education, training, and library",
        "27": "Art, design, entertainment, sport and media",
        "29": "Healthcare practitioners and technical",
        "31": "Healthcare support",
        "33": "Protective service",
        "35": "Food preparation and serving related",
        "37": "Building and ground cleaning and maintenance",
        "39": "Personal care and service",
        "41": "Sales and related",
        "43": "Office and administration",
        "45": "Farming, fishing, and forestry",
        "47": "Construction and extraction",
        "49": "Installation, maintenance, and repair",
        "51": "Production",
        "53": "Transportation and material moving"
      };

var scale = {
        x: d3.scale.linear().domain([0, 200000]).range([0, width]),
        y: d3.scale.ordinal().rangeBands([height, 0]),
        area: d3.scale.linear().range([25, 750]),
        color: d3.scale.category20()
      };

var dollarFormat = d3.format("$,");
      var thousandFormat = d3.format(",");

var axis = {
        x: d3.svg.axis().scale(scale.x).orient("bottom")
            .tickFormat(dollarFormat),
        y: d3.svg.axis().scale(scale.y).orient("left")
            .tickFormat(function(d) { return majorGroups[d]; })
      };

var force = d3.layout.force()
        .charge(0)
        .gravity(0)
        .size([width, height]);

var body = d3.select("body");

var svg = body.append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g").attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")");
      svg.append("g").attr("class", "y axis");

var tooltip = body.append("div")
        .attr("class", "tooltip")
        .style("position", "absolute")
        .classed("hidden", true);
      tooltip.append("h4").attr("class", "title")
      tooltip.append("p").attr("class", "employment")
      tooltip.append("p").attr("class", "wage");

d3.json("occupation.json", ready);

function ready(error, nodes) {
        if (error) throw error;

scale.y.domain(nodes
          .map(function(d) { return d.majorGroup; })
          .sort(d3.descending)
        );
        scale.area.domain([0, d3.max(nodes, function(d) { return d.employment; })]);

svg.select(".x.axis").call(axis.x)
          .append("text")
            .attr("class", "label")
            .attr("x", width)
            .attr("y", -6)
            .style("text-anchor", "end")
            .text("Median Annual Wage");

svg.select(".y.axis").call(axis.y)
          .selectAll(".tick text")
            .call(wrap, 180)
              .selectAll("tspan")
              .attr("x", -9);

nodes.forEach(function(d) {
          d.x = scale.x(d.wage);
          d.y = scale.y(d.majorGroup) + scale.y.rangeBand()/2 + 10*Math.random() - 5;
          d.x0 = d.x;
          d.y0 = scale.y(d.majorGroup) + scale.y.rangeBand()/2;
          var area = scale.area(d.employment);
          d.r = Math.sqrt(area / Math.PI);
        });

force
          .nodes(nodes)
          .on("tick", tick)
          .start();

// shift left if mouse is too far right
              x = x > (960 - 300) ? mouse[0] - 300 : x;

tooltip
                .classed("hidden", false)
                .style("left", x + "px")
                .style("top", y + "px");
              tooltip.select(".title").text(d.title);
              tooltip.select(".employment")
                .text(thousandFormat(d.employment*1000) + " jobs");
              tooltip.select(".wage")
                .text("Wage: " + dollarFormat(d.wage));
            })
            .on("mouseleave", function() {
              tooltip.classed("hidden", true);
            });

function gravity(k) {
          return function(d) {
            d.x += (d.x0 - d.x) * k;
            d.y += (d.y0 - d.y) * k;
          };
        }

https://d3js.org/d3.v3.min.js