Copied in part from https://bl.ocks.org/emeeks/21f99959d48dd0d0c746
This is a high level visualization of NEON's data flow for Barometric Pressure at Sea Level and the data products it is dependent on.
This was done in a few hours to get an idea of the scope of the processing needed to get data from sensor to the portal. It does not include data access sub-systems, asset tracking, calibration, etc.
xxxxxxxxxx<html><body><script></script></body></html><html lang="en"><head> <meta charset="utf-8" /> <title>Sankey Particles</title> <style> .node rect { cursor: move; fill-opacity: .9; shape-rendering: crispEdges; } .node text { pointer-events: none; text-shadow: 0 1px 0 #fff; } .link { fill: none; stroke: #000; stroke-opacity: .05; } .link:hover { stroke-opacity: .25; } svg { position: absolute; } canvas { position: absolute; } </style></head><body><canvas width="2000" height="2000" ></canvas><svg width="2000" height="2000" ></svg><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script><script src="d3.sankey.js" charset="utf-8" type="text/javascript"></script><script type="text/javascript"> var margin = {top: 1, right: 1, bottom: 6, left: 1}, width = 1500 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; var formatNumber = d3.format(",.0f"), format = function(d) { return formatNumber(d) + " TWh"; }, color = d3.scale.category20(); var svg = d3.select("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var sankey = d3.sankey() .nodeWidth(15) .nodePadding(50) .size([width, height]); var path = sankey.link(); var freqCounter = 1; d3.csv("flow.csv", function(error, data) { //set up graph in same style as original example but empty graph = {"nodes": [], "links": []}; data.forEach(function (d) { graph.nodes.push({"name": d.source}); graph.nodes.push({"name": d.target}); graph.links.push({ "source": d.source, "target": d.target, "value": +d.value, "text": d.text, }); }); // return only the distinct / unique nodes graph.nodes = d3.keys(d3.nest() .key(function (d) { return d.name; }) .map(graph.nodes)); // loop through each link replacing the text with its index from node graph.links.forEach(function (d, i) { graph.links[i].source = graph.nodes.indexOf(graph.links[i].source); graph.links[i].target = graph.nodes.indexOf(graph.links[i].target); }); //now loop through each nodes to make nodes an array of objects // rather than an array of strings graph.nodes.forEach(function (d, i) { graph.nodes[i] = {"name": d}; }); sankey .nodes(graph.nodes) .links(graph.links) .layout(32); var link = svg.append("g").selectAll(".link") .data(graph.links) .enter().append("path") .attr("class", "link") .attr("d", path) .style("stroke-width", function(d) { return Math.max(1, d.dy); }) .sort(function(a, b) { return b.dy - a.dy; }); link.append("title") .text(function(d) { return d.text; }); var node = svg.append("g").selectAll(".node") .data(graph.nodes) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) .call(d3.behavior.drag() .origin(function(d) { return d; }) .on("dragstart", function() { this.parentNode.appendChild(this); }) .on("drag", dragmove)); node.append("rect") .attr("height", function(d) { return d.dy; }) .attr("width", sankey.nodeWidth()) .style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); }) .style("stroke", "none") .append("title") .text(function(d) { return d.name + "\n" + format(d.value); }); node.append("text") .attr("x", -6) .attr("y", function(d) { return d.dy / 2; }) .attr("dy", ".35em") .attr("text-anchor", "end") .attr("transform", null) .text(function(d) { return d.name; }) .filter(function(d) { return d.x < width / 2; }) .attr("x", 6 + sankey.nodeWidth()) .attr("text-anchor", "start"); function dragmove(d) { d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")"); sankey.relayout(); link.attr("d", path); } var linkExtent = d3.extent(graph.links, function (d) {return d.value}); var frequencyScale = d3.scale.linear().domain(linkExtent).range([1,100]); var particleSize = d3.scale.linear().domain(linkExtent).range([1,5]); graph.links.forEach(function (link) { link.freq = frequencyScale(link.value); link.particleSize = particleSize(link.value); link.particleColor = d3.scale.linear().domain([1,1000]).range([link.source.color, link.target.color]); }) var t = d3.timer(tick, 1000); var particles = []; function tick(elapsed, time) { particles = particles.filter(function (d) {return d.time > (elapsed - 1000)}); if (freqCounter > 100) { freqCounter = 1; } d3.selectAll("path.link") .each( function (d) { if (d.freq >= freqCounter) { var offset = (Math.random() - .5) * d.dy; particles.push({link: d, time: elapsed, offset: offset, path: this}) } }); particleEdgeCanvasPath(elapsed); freqCounter++; } function particleEdgeCanvasPath(elapsed) { var context = d3.select("canvas").node().getContext("2d") context.clearRect(0,0,2000,2000); context.fillStyle = "gray"; context.lineWidth = "1px"; for (var x in particles) { var currentTime = elapsed - particles[x].time; var currentPercent = currentTime / 1000 * particles[x].path.getTotalLength(); var currentPos = particles[x].path.getPointAtLength(currentPercent) context.beginPath(); context.fillStyle = particles[x].link.particleColor(currentTime); context.arc(currentPos.x,currentPos.y + particles[x].offset,particles[x].link.particleSize,0,2*Math.PI); context.fill(); } } });</script></body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js