Arc Bubble Connector Chart

Arc Bubble Connection Chart displaying graph data.

The data is a small sample of Lobbyist Activity from http://sfgov.org.

https://data.sfgov.org/City-Management-and-Ethics/Lobbyist-Activity-Contacts-of-Public-Officials/hr5m-xnxc

forked from mattdh666's block: Arc Bubble Connector Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="d3.promise.min.js"></script>
  <script src="arcBubbleConnector.js"></script>
  <style>
    body { 
      margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
      font-family: "Avenir", "Proxima Nova", "Museo Sans", Helvetica;
    }
    svg { width: 100%; height: 100%; }
    .arc { cursor: pointer; }
    .arcOutline { pointer-events: none; }
    text.arc {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 1px;
    }
    .bubble { cursor: pointer; }
    .bubbleCenter, .bubbleCenterHighlight, .bubbleLabel { pointer-events: none; }
    .bubbleLabels > text {
      text-transform: uppercase;
      font-size: 10px;
      font-weight: bold;
      fill: #231f20;
      pointer-events: none;
    }
  </style>
</head>

<body>
  <script>
    var margin = {top: 0, right: 0, bottom: 0, left: 0};
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom);

var connectorsSvg = svg.append('g').attr('class', 'connectors');
    var arcsSvg = svg.append('g').attr('class', 'arcs');
    var bubblesSvg = svg.append('g').attr('class', 'bubbles');
    var bubbleLabelsSvg = svg.append('g').attr('class', 'bubbleLabels');
    
    //Create Layouts
    function packSort(a, b) {
      return b.value - a.value;
    }
    
    var bubbleLayout = d3.layout.pack()
      .sort(packSort)
      .padding(2.5);

var chordLayout = d3.layout.chord()
      .padding(0.06);

var diagonal = d3.svg.diagonal.radial();
    
    //Size Everything
    var outerRadius = (width > height ? height / 1.7 : width / 1.7);
    var innerRadius = outerRadius - 120;
    var bubbleRadius = innerRadius - 50;
    var connectorRadius = innerRadius - 20;

var bubblesTranslateX = (outerRadius - innerRadius) + (innerRadius - bubbleRadius);
    var bubblesTranslateY = (outerRadius - innerRadius) + (innerRadius - bubbleRadius);
    var arcsTranslateX = outerRadius;
    var arcsTranslateY = outerRadius;

//Move to middle of X.
    var middle = width / 2;
    var xOffset = 0,
        yOffset = -50;

if(arcsTranslateX < middle) {
      xOffset = middle - arcsTranslateX;
    }

bubblesTranslateX += xOffset;
    bubblesTranslateY += yOffset;
    arcsTranslateX += xOffset;
    arcsTranslateY += yOffset;

arcsSvg.attr('transform', 'translate(' + arcsTranslateX + ',' + arcsTranslateY + ')');
    connectorsSvg.attr('transform', 'translate(' + arcsTranslateX + ',' + arcsTranslateY + ')');
    bubblesSvg.attr('transform', 'translate(' + bubblesTranslateX + ',' + bubblesTranslateY + ')');
    bubbleLabelsSvg.attr('transform', 'translate(' + bubblesTranslateX + ',' + bubblesTranslateY + ')');

bubbleLayout.size([bubbleRadius * 2, bubbleRadius * 2]);
 
    var promises = [];

//Load Preprocessed Data
    promises.push(d3.promise.json('arcData.json', 
      function(data) { arcData = data; }));
    promises.push(d3.promise.json('arcDataById.json',
      function(data) { arcDataById = data; }));
    promises.push(d3.promise.json('bubbleData.json',
      function(data) {
      	bubbleData = data;
      	bubblesById = {};
      	bubbleData.forEach(function(b) {
          bubblesById[b.id] = b;
        });
      }));
    promises.push(d3.promise.json('relationships.json', 
      function(data) { relationships = data; }));
    promises.push(d3.promise.json('relationshipsByArcId.json', 
      function(data) { relationshipsByArcId = data; }));
    promises.push(d3.promise.json('relationshipsByBubbleId.json',
      function(data) { relationshipsByBubbleId = data; }));
    
    function drawChart() {
      //For some reason, not waiting for promises...
      if(arcData.length === 0 || bubbleData.length === 0 || relationships.length === 0) {
        console.log('waiting...');
        setTimeout(drawChart, 100);
      }
      else {
        prepareArcs();
        prepareBubbles();

updateArcs();
        updateConnectors(relationships);
        updateBubbles();
        updateBubbleLabels();
      }
    };   
    
    //Wait for all data to be loaded
    $.when.apply($, promises).done(function() {
      drawChart();
    });

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js