Skip to content

Instantly share code, notes, and snippets.

@jeremiaheb

jeremiaheb/EcosystemCirclePack.md

Last active March 7, 2016 18:29
Show Gist options
  • Save jeremiaheb/f0b49875b31c972b3198 to your computer and use it in GitHub Desktop.
Save jeremiaheb/f0b49875b31c972b3198 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Gulf of Mexico Ecosystem Circle Pack

Raw
chart.js
Circle Pack
Raw
data.json
{
"name": "GOM",
"children": [
{
"name": "COMMERCIAL",
"children": [
{
"name": "Baitfishes",
"children": [
{
"name": "Baitfish",
"dollarValue": 1691792,
"pounds": 6479532
},
{
"name": "Menhaden",
"dollarValue": 85890336,
"pounds": 1102538824
}
]
},
{
"name": "Crustaceans",
"children": [
{
"name": "Crabs",
"dollarValue": 76995743,
"pounds": 61321113
},
{
"name": "Lobster",
"dollarValue": 10422173,
"pounds": 1797411
},
{
"name": "Molluscs",
"dollarValue": 43851,
"pounds": 76169
},
{
"name": "Shrimps",
"dollarValue": 405689411,
"pounds": 210575363
}
]
},
{
"name": "Molluscs",
"children": [
{
"name": "Molluscs",
"dollarValue": 1125011,
"pounds": 2378644
},
{
"name": "Oysters",
"dollarValue": 76046409,
"pounds": 21201146
}
]
},
{
"name": "Ornamentals",
"children": [
{
"name": "Ornamental",
"dollarValue": 1016870,
"pounds": 1634654
}
]
},
{
"name": "Perciformes",
"children": [
{
"name": "Angelfishes",
"dollarValue": 52827,
"pounds": 3906
},
{
"name": "Barracuda",
"dollarValue": 8100,
"pounds": 7779
},
{
"name": "Bluefish",
"dollarValue": 67815,
"pounds": 168011
},
{
"name": "Bream",
"dollarValue": 13,
"pounds": 10
},
{
"name": "Cobia",
"dollarValue": 143774,
"pounds": 53539
},
{
"name": "Cutlassfish",
"dollarValue": 10223,
"pounds": 12540
},
{
"name": "Dorado",
"dollarValue": 168330,
"pounds": 84497
},
{
"name": "Drums",
"dollarValue": 6129271,
"pounds": 6720548
},
{
"name": "Eels",
"dollarValue": 5086,
"pounds": 3169
},
{
"name": "Escolar",
"dollarValue": 151231,
"pounds": 168600
},
{
"name": "Flatfishes",
"dollarValue": 965446,
"pounds": 400733
},
{
"name": "Grouper/Bass",
"dollarValue": 25218886,
"pounds": 9002679
},
{
"name": "Grunts",
"dollarValue": 582930,
"pounds": 581585
},
{
"name": "Hakes",
"dollarValue": 5667,
"pounds": 4863
},
{
"name": "Harvestfishes",
"dollarValue": 391181,
"pounds": 1220876
},
{
"name": "Jacks",
"dollarValue": 1009735,
"pounds": 817507
},
{
"name": "Ladyfish",
"dollarValue": 833841,
"pounds": 1118847
},
{
"name": "Mackerels",
"dollarValue": 5619580,
"pounds": 4597654
},
{
"name": "Mullet",
"dollarValue": 8765710,
"pounds": 12203363
},
{
"name": "Octopus",
"dollarValue": 123906,
"pounds": 72471
},
{
"name": "Other",
"dollarValue": 308257,
"pounds": 1172631
},
{
"name": "Parrotfishes",
"dollarValue": 2700,
"pounds": 127
},
{
"name": "Porgies",
"dollarValue": 1401663,
"pounds": 1759524
},
{
"name": "Rays",
"dollarValue": 73550,
"pounds": 97179
},
{
"name": "Reeffishes",
"dollarValue": 22055,
"pounds": 40306
},
{
"name": "Scorpionfishes",
"dollarValue": 11316,
"pounds": 5810
},
{
"name": "Sharks",
"dollarValue": 665951,
"pounds": 1173910
},
{
"name": "Snappers",
"dollarValue": 22741345,
"pounds": 7441099
},
{
"name": "Soles",
"dollarValue": 236,
"pounds": 121
},
{
"name": "Spadefish",
"dollarValue": 23202,
"pounds": 37199
},
{
"name": "Squids",
"dollarValue": 30914,
"pounds": 57279
},
{
"name": "Surgeonfishes",
"dollarValue": 5539,
"pounds": 1300
},
{
"name": "Swordfish",
"dollarValue": 3209741,
"pounds": 1258184
},
{
"name": "Tilefish",
"dollarValue": 977038,
"pounds": 465883
},
{
"name": "Triggerfishes",
"dollarValue": 116256,
"pounds": 72658
},
{
"name": "Tunas",
"dollarValue": 10678070,
"pounds": 2919213
},
{
"name": "Urchins",
"dollarValue": 73409,
"pounds": 23074
},
{
"name": "Wrasses",
"dollarValue": 170109,
"pounds": 43368
}
]
}
]
},
{
"name": "RECREATIONAL",
"children": [
{
"name": "Perciformes",
"children": [
{
"name": "Bluefish",
"dollarValue": 90097,
"pounds": 225244
},
{
"name": "Cobia",
"dollarValue": 2134384,
"pounds": 793451
},
{
"name": "Dorado",
"dollarValue": 3114636,
"pounds": 1314192
},
{
"name": "Drums",
"dollarValue": 30111851,
"pounds": 14203703
},
{
"name": "Eels",
"dollarValue": 52751,
"pounds": 39662
},
{
"name": "Grouper/Bass",
"dollarValue": 10640568,
"pounds": 3522639
},
{
"name": "Grunts",
"dollarValue": 1829929,
"pounds": 2021589
},
{
"name": "Jacks",
"dollarValue": 2508806,
"pounds": 2400018
},
{
"name": "Mackerels",
"dollarValue": 7658212,
"pounds": 7140387
},
{
"name": "Porgies",
"dollarValue": 2829832,
"pounds": 4710608
},
{
"name": "Snappers",
"dollarValue": 26102053,
"pounds": 8528688
},
{
"name": "Spadefish",
"dollarValue": 146476,
"pounds": 47712
},
{
"name": "Tilefish",
"dollarValue": 30471,
"pounds": 23549
},
{
"name": "Triggerfishes",
"dollarValue": 260228,
"pounds": 217953
},
{
"name": "Wrasses",
"dollarValue": 1673390,
"pounds": 430154
}
]
}
]
}
]
}
Raw
EcosystemCirclePack.md

GOM Ecosystem Circle Pack

Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script></script>
<style type="text/css">
html, body {
<!--overflow: scroll;-->
margin: 0;
font-family: "Helvetica Neue", Helvetica;
}
#leafName {
position: absolute;
width: 760px;
text-align: center;
font-family: "Helvetica Neue", Helvetica;
font-size: 25px;
}
#selectionName {
position: absolute;
width: 760px;
text-align: center;
font-family: "Helvetica Neue", Helvetica;
font-size: 25px;
color: #002F2F;
}
text {
font-size: 15px;
pointer-events: none;
}
text.parent {
fill: #002F2F;
}
circle {
<!--fill: #ccc;-->
stroke: #999;
pointer-events: all;
}
circle.parent {
<!--fill: #1f77b4;-->
fill-opacity: .1;
stroke: steelblue;
}
circle.parent:hover {
stroke: #ff7f0e;
stroke-width: .5px;
}
circle.child {
<!--pointer-events: none;-->
}
.bar {
fill: steelblue;
}
<!--.bar:hover {-->
<!--fill: brown;-->
<!--}-->
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
}
</style>
</head>
<body>
<p id="leafName"> </p>
<script type="text/javascript">
var w = 760,
h = 565,
r = 760,
x = d3.scale.linear().range([0, r]),
y = d3.scale.linear().range([0, r]),
node,
root;
var pack = d3.layout.pack()
.padding(1)
.size([r,r])
.value(function(d) { return d.pounds; });
var vis = d3.select("body").insert("svg:svg", "h2")
.attr("width", w)
.attr("height", w)
.append("svg:g")
.attr("transform", "translate(" + (w - r) / 2 + "," + (w - r) / 2 + ")");
var buttonData = ["Pounds", "Value"];
var buttonDiv = d3.select("body").append("svg")
.attr("width", 120)
.attr("height", 760);
var buttons = buttonDiv.selectAll(".updateButton")
.data(buttonData)
.enter()
.append('g')
.attr("class", "updateButton")
.on("click", function(d, i) {
dataSource = i;
updateVis();
});
buttons.append("rect")
.attr("x", 5)
.attr("y", function(d, i) { return (760 - (i + 1)*30); })
.attr("width", 98)
.attr("height", 25)
.attr("ry", 5)
.style("stroke", "#787878")
.style("fill", "tan");
buttons.append("text")
.attr("x", 55)
.attr("y", function(d, i) { return (772 - (i + 1)*30); })
.attr("dy", "0.35em")
.style("text-anchor", "middle")
.style("font-size", "15px")
.text(function(d) { return d; });
var color = d3.scale.ordinal()
.domain(["0", "1", "2", "3"])
.range(["#FCFFF5","#D1DBBD","#91AA9D", "#3E606F"]);
d3.json("data.json", function(data) {
node = root = data;
var nodes = pack.nodes(root);
vis.selectAll("circle")
.data(nodes)
.enter().append("svg:circle")
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("id", function(d) { return d.name })
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.depth); })
.style("fill-opacity", ".3")
.on("click", function(d) { if (d.depth !== 3) {
zoom(d),
d3.event.stopPropagation();
}
else {
zoom(d.parent),
d3.event.stopPropagation();}
})
.on("mouseover", function(d){ d.depth == 3 ?
d3.select("#leafName").text( d.name) : null})
.on("mouseout", function(d){ d.depth == 3 ?
d3.select("#leafName").text(null) : null});
vis.selectAll("text")
.data(nodes)
.enter().append("svg:text")
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.style("opacity", function(d) { return d.depth == 1 ? 1 : 0; })
.text(function(d) {
return d.name;
});
d3.select(window).on("click", function() { zoom(root); });
<!--zoom(root);-->
});
function zoom(d, i) {
var focus0 = focus; focus = d;
var k = r / d.r / 2;
x.domain([d.x - d.r, d.x + d.r]);
y.domain([d.y - d.r, d.y + d.r]);
var t = vis.transition()
.duration(1550);
t.selectAll("circle")
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.attr("r", function(d) { return k * d.r; });
// updateCounter is a hacky way to determine when transition is finished
var updateCounter = 0;
t.selectAll("text")
.style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
<!--.style("display", function(d) { return d.parent === focus ? null : "none";})-->
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.each(function(d, i) {
updateCounter++;
})
.each("end", function(d, i) {
updateCounter--;
if (updateCounter == 0) {
adjustLabels(k);
}
});
node = d;
}
function adjustLabels(k) {
vis.selectAll("text")
.style("opacity", function(d) {
return k * d.r > 20 ? 1 : 0;
})
.text(function(d) {
return d.name;
})
.filter(function(d) {
d.tw = this.getComputedTextLength();
return (Math.PI*(k*d.r)/2) < d.tw;
})
.each(function(d) {
var proposedLabel = d.name;
var proposedLabelArray = proposedLabel.split('');
while ((d.tw > (Math.PI*(k*d.r)/2) && proposedLabelArray.length)) {
// pull out 3 chars at a time to speed things up (one at a time is too slow)
proposedLabelArray.pop();proposedLabelArray.pop(); proposedLabelArray.pop();
if (proposedLabelArray.length===0) {
proposedLabel = "";
} else {
proposedLabel = proposedLabelArray.join('') + "..."; // manually truncate with ellipsis
}
d3.select(this).text(proposedLabel);
d.tw = this.getComputedTextLength();
}
});
};
function updateVis() {
zoom(root);
if (dataSource == 0)
pack.value(function(d) { return d.pounds; }),
d3.select("#selectionName").text("Pounds");
if (dataSource == 1)
pack.value(function(d) { return d.dollarValue; }),
d3.select("#selectionName").text("Value");
var data1 = pack.nodes(node);
};
</script>
<p id="selectionName"> Pounds </p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment