Skip to content

Instantly share code, notes, and snippets.

@PBrockmann

PBrockmann/README.md

Last active August 29, 2015 14:01
Show Gist options
  • Save PBrockmann/09571d7326e2ca057ede to your computer and use it in GitHub Desktop.
Save PBrockmann/09571d7326e2ca057ede to your computer and use it in GitHub Desktop.
Download ZIP
ESGF Data Visibility
Raw
README.md
Raw
datavisibility_CMIP5.json
{
"Datanodes": {
"CMIP5": {
"adm07.cmcc.it": 697,
"bcccsm.cma.gov.cn": 3796,
"bmbf-ipcc-ar5.dkrz.de": 6490,
"cmip-dn1.badc.rl.ac.uk": 10255,
"cmip5.fio.org.cn": 185,
"dapp2p.cccma.ec.gc.ca": 9297,
"dias-esg-nd.tkl.iis.u-tokyo.ac.jp": 7584,
"esg-dn1.nsc.liu.se": 1840,
"esg.bnu.edu.cn": 241,
"esg.cnrm-game-meteo.fr": 2877,
"esg.lasg.ac.cn": 1090,
"esg01.nersc.gov": 110,
"esg2.e-inis.ie": 2913,
"esgdata.gfdl.noaa.gov": 5723,
"esgdata1.nccs.nasa.gov": 4450,
"esgf.extra.cea.fr": 690,
"esgnode2.nci.org.au": 1565,
"noresg.norstore.uio.no": 617,
"pcmdi7.llnl.gov": 186,
"pcmdi9.llnl.gov": 243,
"tds.ucar.edu": 5528,
"vesg.ipsl.fr": 3765
},
"CORDEX": {
"carbon.dkrz.de": 4701,
"cordexesg.dmi.dk": 5394,
"data.meteo.unican.es": 228,
"esg-dn1.nsc.liu.se": 27804,
"esgf-data1.ceda.ac.uk": 1004,
"esgf-node.ipsl.fr": 0,
"esgf.extra.cea.fr": 200,
"noresg.norstore.uio.no": 0
},
"ana4MIPs": {
"esgdata1.nccs.nasa.gov": 8,
"hydra.fsl.noaa.gov": 76
},
"obs4MIPs": {
"esg-datanode.jpl.nasa.gov": 7,
"esgdata1.nccs.nasa.gov": 10,
"esgf-data1.ceda.ac.uk": 1,
"plot1.ornl.gov": 0,
"vesg.ipsl.polytechnique.fr": 8
}
},
"Indexes": {
"CMIP5": {
"adm07.cmcc.it": 64361,
"cordexesg.dmi.dk": 70142,
"dev.esg.anl.gov": 57539,
"esg-datanode.jpl.nasa.gov": 70084,
"esg-dn1.nsc.liu.se": 70142,
"esg.bnu.edu.cn": 64672,
"esg.ccs.ornl.gov": "Node Down",
"esg.pik-potsdam.de": 68519,
"esg2.e-inis.ie": "Node Down",
"esg2.nci.org.au": 57029,
"esgdata.gfdl.noaa.gov": 70142,
"esgf-data.dkrz.de": 70142,
"esgf-index1.ceda.ac.uk": 70142,
"esgf-node.ipsl.fr": 70142,
"esgf.nccs.nasa.gov": 70142,
"hydra.fsl.noaa.gov": 70062,
"noresg.norstore.uio.no": 44291,
"pcmdi11.llnl.gov": 70084,
"pcmdi9.llnl.gov": 70142
},
"CORDEX": {
"adm07.cmcc.it": 39331,
"cordexesg.dmi.dk": 39331,
"dev.esg.anl.gov": 39331,
"esg-datanode.jpl.nasa.gov": 39331,
"esg-dn1.nsc.liu.se": 39331,
"esg.bnu.edu.cn": 39331,
"esg.ccs.ornl.gov": "Node Down",
"esg.pik-potsdam.de": 39331,
"esg2.e-inis.ie": "Node Down",
"esg2.nci.org.au": 38903,
"esgdata.gfdl.noaa.gov": 39331,
"esgf-data.dkrz.de": 39331,
"esgf-index1.ceda.ac.uk": 39331,
"esgf-node.ipsl.fr": 39331,
"esgf.nccs.nasa.gov": 39331,
"hydra.fsl.noaa.gov": 33937,
"noresg.norstore.uio.no": 32933,
"pcmdi11.llnl.gov": 39331,
"pcmdi9.llnl.gov": 39331
},
"ana4MIPs": {
"adm07.cmcc.it": 8,
"cordexesg.dmi.dk": 84,
"dev.esg.anl.gov": 0,
"esg-datanode.jpl.nasa.gov": 84,
"esg-dn1.nsc.liu.se": 84,
"esg.bnu.edu.cn": 8,
"esg.ccs.ornl.gov": "Node Down",
"esg.pik-potsdam.de": 84,
"esg2.e-inis.ie": "Node Down",
"esg2.nci.org.au": 8,
"esgdata.gfdl.noaa.gov": 84,
"esgf-data.dkrz.de": 84,
"esgf-index1.ceda.ac.uk": 84,
"esgf-node.ipsl.fr": 84,
"esgf.nccs.nasa.gov": 84,
"hydra.fsl.noaa.gov": 84,
"noresg.norstore.uio.no": 0,
"pcmdi11.llnl.gov": 8,
"pcmdi9.llnl.gov": 84
},
"obs4MIPs": {
"adm07.cmcc.it": 26,
"cordexesg.dmi.dk": 26,
"dev.esg.anl.gov": 16,
"esg-datanode.jpl.nasa.gov": 74,
"esg-dn1.nsc.liu.se": 26,
"esg.bnu.edu.cn": 19,
"esg.ccs.ornl.gov": "Node Down",
"esg.pik-potsdam.de": 26,
"esg2.e-inis.ie": "Node Down",
"esg2.nci.org.au": 26,
"esgdata.gfdl.noaa.gov": 26,
"esgf-data.dkrz.de": 26,
"esgf-index1.ceda.ac.uk": 26,
"esgf-node.ipsl.fr": 74,
"esgf.nccs.nasa.gov": 74,
"hydra.fsl.noaa.gov": 26,
"noresg.norstore.uio.no": 15,
"pcmdi11.llnl.gov": 26,
"pcmdi9.llnl.gov": 74
}
},
"Last Updated": "Wed May 21 12:45:50 CEST 2014"
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
.node {
cursor: pointer;
}
.node:hover {
stroke: #000;
stroke-width: 1.5px;
}
.node--leaf {
fill: white;
}
.label {
font: 20px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
}
.date {
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: left;
}
.node--root, .node--leaf {
pointer-events: none;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = 20,
diameter = 960;
var color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(12,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
var pack = d3.layout.pack()
.padding(2)
.size([diameter - margin, diameter - margin])
.value(function(d) { return d.size; })
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
// If esg-dn1.nsc.liu.se would allow CORS (https://github.com/mbostock/d3/wiki/Requests)
//d3.json("https://esg-dn1.nsc.liu.se:8843/api/datavisibility", function(error, dataRead) {
d3.json("datavisibility_CMIP5.json", function(error, dataRead) {
if (error) return console.error(error);
//##########################################################################
// [email protected]
//##########################################################################
// References
// https://github.com/mbostock/d3/wiki/Pack-Layout
// http://bl.ocks.org/mbostock/7607535
// http://bl.ocks.org/mbostock/1628131
console.log(dataRead);
// Transform original JSON data to hierarchical JSON data
console.log("------------------");
var data={};
data["name"] = "datavisibility_CMIP5";
data["children"] = [];
var childn=0;
for(var key1 in dataRead){
if (key1 == "Last Updated") {
var dataDate = dataRead[key1];
continue;
}
//console.log(key1);
data["children"].push({
"name": key1,
"children": []
});
cursor = data["children"][childn]["children"];
for(var key in dataRead[key1]){
//console.log(" ", key);
a=dataRead[key1][key];
c = [];
for(var k in a) {
//console.log(" ", k, a[k]);
if (a[k] != 0 && a[k] != "Node Down") { // filter 0 or node down
c.push({
"name": k,
"size": a[k]
});
}
}
cursor.push({
"name": key,
"children": c
});
}
childn++;
}
console.log(data);
console.log(dataDate);
console.log("------------------");
var focus = data,
nodes = pack.nodes(data),
view;
var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.style("fill", function(d) { return d.children ? color(d.depth) : null; })
.on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });
var text = svg.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.style("fill-opacity", function(d) { return d.parent === data ? 1 : 0; })
.style("font-size", function(d) { return d.parent === data ? "20px" : "12px"; })
.style("display", function(d) { return d.parent === data ? null : "none"; })
.text(function(d) { return d.name; })
.on('mouseover', function(d) {
d3.select(this).style("font-weight","bold");
})
.on('mouseout', function(d) {
d3.select(this).style("font-weight","normal");
})
.append("tspan")
.text(function(d) { return d.size; })
.attr('x', '0')
.attr('dy', '1.2em')
.style("font-size", "16px");
var node = svg.selectAll("circle,text");
d3.select("body")
.style("background", color(-1))
.on("click", function() { zoom(data); });
zoomTo([data.x, data.y, data.r * 2 + margin]);
svg.append("rect")
.attr("x", -(diameter/2 - margin) - 10)
.attr("y", -(diameter/2 - margin) - 10)
.attr("rx", 5)
.attr("ry", 5)
.attr("width", 235)
.attr("height", 30)
.attr("fill", "white")
.attr("stroke", "black")
.attr("stroke-width", "2")
.attr("opacity", "0.5");
svg.append("text")
.attr("class", "date")
.attr("x", -(diameter/2 - margin))
.attr("y", -(diameter/2 - margin) + 10)
.text(dataDate);
function zoom(d) {
var focus0 = focus; focus = d;
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", function(d) {
var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
return function(t) { zoomTo(i(t)); };
});
transition.selectAll(".label")
.filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
.style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
.each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
.each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
}
function zoomTo(v) {
var k = diameter / v[2]; view = v;
node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
circle.attr("r", function(d) { return d.r * k; });
}
});
d3.select(self.frameElement).style("height", diameter + "px");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment