Skip to content

Instantly share code, notes, and snippets.

@jeremiaheb
Last active October 30, 2015 13:28
Show Gist options
  • Save jeremiaheb/8849c7ce5a2de1d97ef4 to your computer and use it in GitHub Desktop.
Save jeremiaheb/8849c7ce5a2de1d97ef4 to your computer and use it in GitHub Desktop.

Histogram by species by year

Histogram by species by year
{
"analis": {
"1994": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "0"
},
{
"lengthCat": "18",
"frequency": "0"
},
{
"lengthCat": "23",
"frequency": "0"
},
{
"lengthCat": "28",
"frequency": "85631"
},
{
"lengthCat": "33",
"frequency": "119487"
},
{
"lengthCat": "38",
"frequency": "16928"
},
{
"lengthCat": "43",
"frequency": "34735"
},
{
"lengthCat": "48",
"frequency": "0"
},
{
"lengthCat": "53",
"frequency": "879"
},
{
"lengthCat": "58",
"frequency": "0"
},
{
"lengthCat": "63",
"frequency": "0"
},
{
"lengthCat": "68",
"frequency": "17807"
},
{
"lengthCat": "73",
"frequency": "0"
},
{
"lengthCat": "78",
"frequency": "0"
}
],
"1995": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "0"
},
{
"lengthCat": "18",
"frequency": "0"
},
{
"lengthCat": "23",
"frequency": "432"
},
{
"lengthCat": "28",
"frequency": "432"
},
{
"lengthCat": "33",
"frequency": "5352"
},
{
"lengthCat": "38",
"frequency": "6215"
},
{
"lengthCat": "43",
"frequency": "0"
},
{
"lengthCat": "48",
"frequency": "15623"
},
{
"lengthCat": "53",
"frequency": "15192"
},
{
"lengthCat": "58",
"frequency": "5352"
},
{
"lengthCat": "63",
"frequency": "4920"
},
{
"lengthCat": "68",
"frequency": "0"
},
{
"lengthCat": "73",
"frequency": "0"
},
{
"lengthCat": "78",
"frequency": "0"
}
],
"1996": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "0"
},
{
"lengthCat": "18",
"frequency": "450"
},
{
"lengthCat": "23",
"frequency": "450"
},
{
"lengthCat": "28",
"frequency": "0"
},
{
"lengthCat": "33",
"frequency": "0"
},
{
"lengthCat": "38",
"frequency": "0"
},
{
"lengthCat": "43",
"frequency": "0"
},
{
"lengthCat": "48",
"frequency": "0"
},
{
"lengthCat": "53",
"frequency": "0"
},
{
"lengthCat": "58",
"frequency": "13146"
},
{
"lengthCat": "63",
"frequency": "0"
},
{
"lengthCat": "68",
"frequency": "0"
},
{
"lengthCat": "73",
"frequency": "0"
},
{
"lengthCat": "78",
"frequency": "0"
}
],
"1997": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "0"
},
{
"lengthCat": "18",
"frequency": "0"
},
{
"lengthCat": "23",
"frequency": "11141"
},
{
"lengthCat": "28",
"frequency": "39570"
},
{
"lengthCat": "33",
"frequency": "39722"
},
{
"lengthCat": "38",
"frequency": "73873"
},
{
"lengthCat": "43",
"frequency": "606"
},
{
"lengthCat": "48",
"frequency": "0"
},
{
"lengthCat": "53",
"frequency": "303"
},
{
"lengthCat": "58",
"frequency": "0"
},
{
"lengthCat": "63",
"frequency": "0"
},
{
"lengthCat": "68",
"frequency": "0"
},
{
"lengthCat": "73",
"frequency": "0"
},
{
"lengthCat": "78",
"frequency": "0"
}
],
"1998": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "0"
},
{
"lengthCat": "18",
"frequency": "0"
},
{
"lengthCat": "23",
"frequency": "6595"
},
{
"lengthCat": "28",
"frequency": "0"
},
{
"lengthCat": "33",
"frequency": "81690"
},
{
"lengthCat": "38",
"frequency": "20885"
},
{
"lengthCat": "43",
"frequency": "610"
},
{
"lengthCat": "48",
"frequency": "8892"
},
{
"lengthCat": "53",
"frequency": "0"
},
{
"lengthCat": "58",
"frequency": "400"
},
{
"lengthCat": "63",
"frequency": "0"
},
{
"lengthCat": "68",
"frequency": "0"
},
{
"lengthCat": "73",
"frequency": "0"
},
{
"lengthCat": "78",
"frequency": "0"
}
],
"1999": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "0"
},
{
"lengthCat": "18",
"frequency": "26264"
},
{
"lengthCat": "23",
"frequency": "11737"
},
{
"lengthCat": "28",
"frequency": "30608"
},
{
"lengthCat": "33",
"frequency": "53250"
},
{
"lengthCat": "38",
"frequency": "67943"
},
{
"lengthCat": "43",
"frequency": "5253"
},
{
"lengthCat": "48",
"frequency": "21012"
},
{
"lengthCat": "53",
"frequency": "0"
},
{
"lengthCat": "58",
"frequency": "0"
},
{
"lengthCat": "63",
"frequency": "0"
},
{
"lengthCat": "68",
"frequency": "0"
},
{
"lengthCat": "73",
"frequency": "0"
},
{
"lengthCat": "78",
"frequency": "0"
}
],
"2000": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "12214"
},
{
"lengthCat": "18",
"frequency": "83559"
},
{
"lengthCat": "23",
"frequency": "58689"
},
{
"lengthCat": "28",
"frequency": "76448"
},
{
"lengthCat": "33",
"frequency": "109398"
},
{
"lengthCat": "38",
"frequency": "53964"
},
{
"lengthCat": "43",
"frequency": "43570"
},
{
"lengthCat": "48",
"frequency": "24908"
},
{
"lengthCat": "53",
"frequency": "6127"
},
{
"lengthCat": "58",
"frequency": "6127"
},
{
"lengthCat": "63",
"frequency": "4998"
},
{
"lengthCat": "68",
"frequency": "0"
},
{
"lengthCat": "73",
"frequency": "0"
},
{
"lengthCat": "78",
"frequency": "0"
}
],
"2001": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "0"
},
{
"lengthCat": "18",
"frequency": "14389"
},
{
"lengthCat": "23",
"frequency": "38155"
},
{
"lengthCat": "28",
"frequency": "22523"
},
{
"lengthCat": "33",
"frequency": "52515"
},
{
"lengthCat": "38",
"frequency": "119557"
},
{
"lengthCat": "43",
"frequency": "64897"
},
{
"lengthCat": "48",
"frequency": "67546"
},
{
"lengthCat": "53",
"frequency": "42209"
},
{
"lengthCat": "58",
"frequency": "16824"
},
{
"lengthCat": "63",
"frequency": "17069"
},
{
"lengthCat": "68",
"frequency": "10878"
},
{
"lengthCat": "73",
"frequency": "917"
},
{
"lengthCat": "78",
"frequency": "0"
}
],
"2002": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "7031"
},
{
"lengthCat": "18",
"frequency": "23546"
},
{
"lengthCat": "23",
"frequency": "40181"
},
{
"lengthCat": "28",
"frequency": "39899"
},
{
"lengthCat": "33",
"frequency": "97402"
},
{
"lengthCat": "38",
"frequency": "128890"
},
{
"lengthCat": "43",
"frequency": "67486"
},
{
"lengthCat": "48",
"frequency": "41899"
},
{
"lengthCat": "53",
"frequency": "77997"
},
{
"lengthCat": "58",
"frequency": "42542"
},
{
"lengthCat": "63",
"frequency": "27716"
},
{
"lengthCat": "68",
"frequency": "7386"
},
{
"lengthCat": "73",
"frequency": "752"
},
{
"lengthCat": "78",
"frequency": "854"
}
],
"2003": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "3856"
},
{
"lengthCat": "18",
"frequency": "24420"
},
{
"lengthCat": "23",
"frequency": "37780"
},
{
"lengthCat": "28",
"frequency": "30693"
},
{
"lengthCat": "33",
"frequency": "59486"
},
{
"lengthCat": "38",
"frequency": "87165"
},
{
"lengthCat": "43",
"frequency": "65953"
},
{
"lengthCat": "48",
"frequency": "82317"
},
{
"lengthCat": "53",
"frequency": "32286"
},
{
"lengthCat": "58",
"frequency": "61342"
},
{
"lengthCat": "63",
"frequency": "6541"
},
{
"lengthCat": "68",
"frequency": "4106"
},
{
"lengthCat": "73",
"frequency": "25693"
},
{
"lengthCat": "78",
"frequency": "3052"
}
],
"2004": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "0"
},
{
"lengthCat": "18",
"frequency": "2064"
},
{
"lengthCat": "23",
"frequency": "33443"
},
{
"lengthCat": "28",
"frequency": "43922"
},
{
"lengthCat": "33",
"frequency": "114305"
},
{
"lengthCat": "38",
"frequency": "167351"
},
{
"lengthCat": "43",
"frequency": "126916"
},
{
"lengthCat": "48",
"frequency": "98054"
},
{
"lengthCat": "53",
"frequency": "13664"
},
{
"lengthCat": "58",
"frequency": "96916"
},
{
"lengthCat": "63",
"frequency": "15580"
},
{
"lengthCat": "68",
"frequency": "24787"
},
{
"lengthCat": "73",
"frequency": "0"
},
{
"lengthCat": "78",
"frequency": "20167"
}
],
"2005": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "9047"
},
{
"lengthCat": "18",
"frequency": "57520"
},
{
"lengthCat": "23",
"frequency": "45284"
},
{
"lengthCat": "28",
"frequency": "81515"
},
{
"lengthCat": "33",
"frequency": "108656"
},
{
"lengthCat": "38",
"frequency": "104562"
},
{
"lengthCat": "43",
"frequency": "58224"
},
{
"lengthCat": "48",
"frequency": "83987"
},
{
"lengthCat": "53",
"frequency": "36971"
},
{
"lengthCat": "58",
"frequency": "15935"
},
{
"lengthCat": "63",
"frequency": "0"
},
{
"lengthCat": "68",
"frequency": "779"
},
{
"lengthCat": "73",
"frequency": "0"
},
{
"lengthCat": "78",
"frequency": "779"
}
],
"2006": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "619"
},
{
"lengthCat": "18",
"frequency": "17763"
},
{
"lengthCat": "23",
"frequency": "5139"
},
{
"lengthCat": "28",
"frequency": "63773"
},
{
"lengthCat": "33",
"frequency": "53347"
},
{
"lengthCat": "38",
"frequency": "110380"
},
{
"lengthCat": "43",
"frequency": "91363"
},
{
"lengthCat": "48",
"frequency": "60657"
},
{
"lengthCat": "53",
"frequency": "15775"
},
{
"lengthCat": "58",
"frequency": "22573"
},
{
"lengthCat": "63",
"frequency": "4069"
},
{
"lengthCat": "68",
"frequency": "13074"
},
{
"lengthCat": "73",
"frequency": "0"
},
{
"lengthCat": "78",
"frequency": "0"
}
],
"2007": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "0"
},
{
"lengthCat": "18",
"frequency": "9237"
},
{
"lengthCat": "23",
"frequency": "51627"
},
{
"lengthCat": "28",
"frequency": "69321"
},
{
"lengthCat": "33",
"frequency": "114624"
},
{
"lengthCat": "38",
"frequency": "252379"
},
{
"lengthCat": "43",
"frequency": "106301"
},
{
"lengthCat": "48",
"frequency": "121991"
},
{
"lengthCat": "53",
"frequency": "64190"
},
{
"lengthCat": "58",
"frequency": "80598"
},
{
"lengthCat": "63",
"frequency": "17840"
},
{
"lengthCat": "68",
"frequency": "18625"
},
{
"lengthCat": "73",
"frequency": "2767"
},
{
"lengthCat": "78",
"frequency": "10714"
}
],
"2008": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "3191"
},
{
"lengthCat": "13",
"frequency": "0"
},
{
"lengthCat": "18",
"frequency": "15514"
},
{
"lengthCat": "23",
"frequency": "25697"
},
{
"lengthCat": "28",
"frequency": "123572"
},
{
"lengthCat": "33",
"frequency": "147455"
},
{
"lengthCat": "38",
"frequency": "122398"
},
{
"lengthCat": "43",
"frequency": "107932"
},
{
"lengthCat": "48",
"frequency": "62669"
},
{
"lengthCat": "53",
"frequency": "25121"
},
{
"lengthCat": "58",
"frequency": "30397"
},
{
"lengthCat": "63",
"frequency": "11859"
},
{
"lengthCat": "68",
"frequency": "10349"
},
{
"lengthCat": "73",
"frequency": "3068"
},
{
"lengthCat": "78",
"frequency": "0"
}
],
"2009": [
{
"lengthCat": "3",
"frequency": "1572"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "3520"
},
{
"lengthCat": "18",
"frequency": "20700"
},
{
"lengthCat": "23",
"frequency": "52785"
},
{
"lengthCat": "28",
"frequency": "88825"
},
{
"lengthCat": "33",
"frequency": "80190"
},
{
"lengthCat": "38",
"frequency": "113304"
},
{
"lengthCat": "43",
"frequency": "63918"
},
{
"lengthCat": "48",
"frequency": "35820"
},
{
"lengthCat": "53",
"frequency": "18311"
},
{
"lengthCat": "58",
"frequency": "13097"
},
{
"lengthCat": "63",
"frequency": "6459"
},
{
"lengthCat": "68",
"frequency": "5813"
},
{
"lengthCat": "73",
"frequency": "478"
},
{
"lengthCat": "78",
"frequency": "0"
}
],
"2010": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "2574"
},
{
"lengthCat": "18",
"frequency": "2678"
},
{
"lengthCat": "23",
"frequency": "13800"
},
{
"lengthCat": "28",
"frequency": "36034"
},
{
"lengthCat": "33",
"frequency": "69722"
},
{
"lengthCat": "38",
"frequency": "74669"
},
{
"lengthCat": "43",
"frequency": "74274"
},
{
"lengthCat": "48",
"frequency": "38650"
},
{
"lengthCat": "53",
"frequency": "26229"
},
{
"lengthCat": "58",
"frequency": "9035"
},
{
"lengthCat": "63",
"frequency": "3766"
},
{
"lengthCat": "68",
"frequency": "5039"
},
{
"lengthCat": "73",
"frequency": "3075"
},
{
"lengthCat": "78",
"frequency": "0"
}
],
"2011": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "0"
},
{
"lengthCat": "18",
"frequency": "3743"
},
{
"lengthCat": "23",
"frequency": "8809"
},
{
"lengthCat": "28",
"frequency": "30087"
},
{
"lengthCat": "33",
"frequency": "66649"
},
{
"lengthCat": "38",
"frequency": "103323"
},
{
"lengthCat": "43",
"frequency": "69989"
},
{
"lengthCat": "48",
"frequency": "29709"
},
{
"lengthCat": "53",
"frequency": "22491"
},
{
"lengthCat": "58",
"frequency": "34045"
},
{
"lengthCat": "63",
"frequency": "14630"
},
{
"lengthCat": "68",
"frequency": "11304"
},
{
"lengthCat": "73",
"frequency": "0"
},
{
"lengthCat": "78",
"frequency": "0"
}
],
"2012": [
{
"lengthCat": "3",
"frequency": "0"
},
{
"lengthCat": "8",
"frequency": "0"
},
{
"lengthCat": "13",
"frequency": "5016"
},
{
"lengthCat": "18",
"frequency": "5015"
},
{
"lengthCat": "23",
"frequency": "26689"
},
{
"lengthCat": "28",
"frequency": "95108"
},
{
"lengthCat": "33",
"frequency": "117300"
},
{
"lengthCat": "38",
"frequency": "77989"
},
{
"lengthCat": "43",
"frequency": "102345"
},
{
"lengthCat": "48",
"frequency": "51113"
},
{
"lengthCat": "53",
"frequency": "34638"
},
{
"lengthCat": "58",
"frequency": "38736"
},
{
"lengthCat": "63",
"frequency": "13316"
},
{
"lengthCat": "68",
"frequency": "13778"
},
{
"lengthCat": "73",
"frequency": "9773"
},
{
"lengthCat": "78",
"frequency": "0"
}
]
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://www.billdwhite.com/wordpress/wp-content/js/d3/d3.js"></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>
<script type="text/javascript">
var margin = {top: 20, right: 20, bottom: 60, left: 80},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .25);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "%");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "lengthFreq")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("sppHist.json", function(error, json) {
if (error) throw error;
var data = json[spp]
var sum = d3.sum(data, function(d){ return d.frequency});
x.domain(data.map(function(d) { return d.LengthCat; }));
y.domain([0, d3.max(data, function(d) { return (d.frequency / sum); })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("display", function(d,i) { return i % 2 === 0 ? null : "none" });
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.LengthCat); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency/sum); })
.attr("height", function(d) { return height - y(d.frequency/sum); });
svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", "translate("+ (-margin.left/1.5) +","+(height/2)+")rotate(-90)")
.text(spp + " Frequency");
svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", "translate("+ (width/2) +","+(height+(margin.bottom/1.5))+")")
.text("Length(cm)");
});
function type(d) {
d.frequency = +d.frequency;
return d;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment