NEON IS data flow visualization

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.

</script>

</body>

</html><!DOCTYPE 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>

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