Skip to content

Instantly share code, notes, and snippets.

@jeremiaheb

jeremiaheb/EcosystemSunburst.md

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

Gulf Of Mexico Ecosystem Sunburst

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

GOM Ecosystem Sunburst

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: #fff;
fill-rule: evenodd;
}
text {
font-family: Arial, sans-serif;
font-size: 12px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function makeAbundance() {
var width = 960,
height = 700,
radius = Math.min(width, height) / 2;
var x = d3.scale.linear()
.range([0, 2 * Math.PI]);
var y = d3.scale.linear()
.range([0, radius]);
var color = d3.scale.ordinal()
.range( ["#C0CECB","#D3CF89"] );
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
var partition = d3.layout.partition()
.value(function(d) { return d.pounds; });
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
d3.json("biomass.json", function(error, root) {
var g = svg.selectAll("g")
.data(partition.nodes(root))
.enter().append("g");
var path = g.append("path")
.attr("d", arc)
.attr("class", function(d){ return d.name; })
.style("stroke", "#fff")
.style("fill", function(d) {
switch(d.depth){
case 3:
endColor = d3.rgb(color(d.parent.parent.name));
return endColor.darker(1);
break;
case 2:
endColor = d3.rgb(color(d.parent.name));
return endColor.darker(.5);
break;
case 1:
endColor = d3.rgb(color(d.name));
return endColor.darker(.25);
break;
case 0:
return color(d.name);
break;
}
})
.on("click", click)
.on("mouseover", function(d){ return MouseOver(d) } )
.on("mouseout", function(d){ return MouseOut(d) } );
var text = g.append("text")
.attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
.attr("x", function(d) { return y(d.y); })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d) { return d.name; });
function click(d) {
// fade out all text elements
text.transition().attr("opacity", 0);
path.transition()
.duration(750)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
// check if the animated element's data e lies within the visible angle span given in d
if (e.x >= d.x && e.x < (d.x + d.dx)) {
// get a selection of the associated text element
var arcText = d3.select(this.parentNode).select("text");
// fade in the text element and recalculate positions
arcText.transition().duration(750)
.attr("opacity", 1)
.attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
.attr("x", function(d) { return y(d.y); });
}
});
}
});
d3.select(self.frameElement).style("height", height + "px");
// Interpolate the scales!
function arcTween(d) {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d, i) {
return i
? function(t) { return arc(d); }
: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
function computeTextRotation(d) {
return (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
}
};
function makeBiomass() {
var width = 960,
height = 700,
radius = Math.min(width, height) / 2;
var x = d3.scale.linear()
.range([0, 2 * Math.PI]);
var y = d3.scale.linear()
.range([0, radius]);
var color = d3.scale.ordinal()
.range( ["#C0CECB","#D3CF89"] );
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ")");
var partition = d3.layout.partition()
.value(function(d) { return d.value; });
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
d3.json("biomass.json", function(error, root) {
var g = svg.selectAll("g")
.data(partition.nodes(root))
.enter().append("g");
var path = g.append("path")
.attr("d", arc)
.attr("class", function(d){ return d.name; })
.style("stroke", "#fff")
.style("fill", function(d) {
switch(d.depth){
case 3:
endColor = d3.rgb(color(d.parent.parent.name));
return endColor.darker(1);
break;
case 2:
endColor = d3.rgb(color(d.parent.name));
return endColor.darker(.5);
break;
case 1:
endColor = d3.rgb(color(d.name));
return endColor.darker(.25);
break;
case 0:
return color(d.name);
break;
}
})
.on("click", click)
.on("mouseover", function(d){ return MouseOver(d) } )
.on("mouseout", function(d){ return MouseOut(d) } );
var text = g.append("text")
.attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
.attr("x", function(d) { return y(d.y); })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d) { return d.name; });
function click(d) {
// fade out all text elements
text.transition().attr("opacity", 0);
path.transition()
.duration(750)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
// check if the animated element's data e lies within the visible angle span given in d
if (e.x >= d.x && e.x < (d.x + d.dx)) {
// get a selection o) the associated text element
var arcText = d3.select(this.parentNode).select("text");
// fade in the text element and recalculate positions
arcText.transition().duration(750)
.attr("opacity", 1)
.attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
.attr("x", function(d) { return y(d.y); });
}
});
}
});
d3.select(self.frameElement).style("height", height + "px");
// Interpolate the scales!
function arcTween(d) {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d, i) {
return i
? function(t) { return arc(d); }
: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
function computeTextRotation(d) {
return (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180;
}
};
function MouseOver(d){
var mine = "." + d.name;
d3.selectAll(mine).style({ stroke: "yellow", "stroke-width": "6px" })
}
function MouseOut(d){
var mine = "." + d.name;
d3.selectAll(mine).style({ stroke: "#fff", "stroke-width": "" })
}
jQuery.fn.d3Click = function () {
this.each(function (i, e) {
var evt = new MouseEvent("click");
e.dispatchEvent(evt);
});
};
makeAbundance();
makeBiomass();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment