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
xxxxxxxxxx
<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