patient flow

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>SCCA Clinic Patient Flow</title>
        <script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // svg dimensions
            var w = 1200;
            var h =  800;

// node variables
            var node_radius = 5;
            var num_nodes = 514;

// strength of force
            var forceStrength = 0.03;

// foci of the central forces
            var foci = {
                "launchpad": { x: 250, y: 350, color: "gray"},
                "homebase": { x: 750, y: 350, color: "gray" },
                "lab": { x: 450, y: 600, color: "pink" },
                "radiationoncology": { x: 550, y: 600, color: "aqua" },
                "radiology": { x: 500, y: 500, color: "purple" },
                "clinic3": { x: 500, y: 400, color: "fuchsia" },
                "clinic4": { x: 500, y: 300, color: "fuchsia" },
                "infusion": { x: 550, y: 200, color: "green" },
                "apheresiscellulartherapy": { x: 450, y: 200, color: "blue" },
                "clinic6": { x: 500, y: 100, color: "fuchsia" }   
            };

// create nodes
            var nodes = d3.range(0, num_nodes).map(function(o, i) {
                return {
                    id: "node" + i,
                    x: foci.launchpad.x + Math.random(),
                    y: foci.launchpad.y + Math.random(),
                    place: "launchpad"
                }
            });

// amount of "charge" for each node
            var charge = function(d) {
                return -Math.pow(d.radius, 2) * forceStrength;
            };

// force layout
            var simulation = d3.forceSimulation(nodes)
                .velocityDecay(0.2)
                .force("x", d3.forceX().strength(forceStrength).x(foci.launchpad.x))
                .force("y", d3.forceY().strength(forceStrength).y(foci.launchpad.y))
                .force("collide", d3.forceCollide().radius(node_radius))
                .on("tick", tick);

// draw svg element
            var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);
          
            // draw date text
            svg.append("text")
              .attr("x", foci.launchpad.x)
              .attr("y", foci.radiology.y)
              .style("font-family", "futura")
              .style("font-size", 18)
              .style("text-anchor", "middle")
              .text("October 4, 2017");

// draw circle for each node
            var circle = svg.selectAll("circle")
                .data(nodes)
                .enter()
                .append("circle")
                .attr("id", function(d) { return d.patID; })
                .attr("class", "node")
                .attr("fill", function(d) { return foci[d.place].color; })
                .attr("r", 5);

// for smoother initial transition to settling spots
            circle.transition()
                .duration(900)
                .delay(function(d, i) { return i * 5; });
            
            
            // function to draw end location circles
            var drawEndPtCirc = function(location, rad, opac, loc_text) {
                svg.append("circle")
                    .attr("cx", foci[location].x)
                    .attr("cy", foci[location].y)
                    .attr("r", rad)
                    .style("stroke", "black")
                    .style("stroke-width", 3)
                    .style("fill", "gray")
                    .style("opacity", 0.5);
                
                svg.append("text")
                    .attr("x", foci[location].x)
                    .attr("y", foci[location].y)
                    .style("font-family", "sans-serif")
                    .style("text-anchor", "middle")
                    .text(loc_text);
            }
            
            // function to draw clinic location circles
            var drawLocCirc = function(location, rad, loc_text) {
                svg.append("circle")
                    .attr("cx", foci[location].x)
                    .attr("cy", foci[location].y)
                    .attr("r", rad)
                    .style("stroke", "black")
                .style("stroke-width", 2)
                .style("fill", "none");

svg.append("text")
                    .attr("x", foci[location].x)
                    .attr("y", foci[location].y + 55)
                    .style("font-family", "sans-serif")
                    .style("font-size", 12)
                    .style("text-anchor", "middle")
                    .text(loc_text);
            }

drawEndPtCirc("launchpad", 100, 0.5, "Future Patients");
            
            drawEndPtCirc("homebase", 100, 0.5, "Past Patients");
            
            drawLocCirc("radiationoncology", 40, "RadOnc");
            
            drawLocCirc("lab", 40, "Lab");
            
            drawLocCirc("radiology", 40, "Radiology");
            
            drawLocCirc("clinic3", 40, "3rd Floor Clinic");
            
            drawLocCirc("clinic4", 40, "4th Floor Clinic");
            
            drawLocCirc("infusion", 40, "Infusion");
            
            drawLocCirc("apheresiscellulartherapy", 40, "Apheresis");
            
            drawLocCirc("clinic6", 40, "6th Floor Clinic");

d3.csv("patient_flow_data.csv", function(data) {

console.table(data);
                
                // run function periodically to make things move
                var timeout;

var hour = 5;
                var minute = 57;

var i = 0;
                var timer = function() {

// random place for a node to go
                    var choices = d3.keys(foci);
                    var foci_index = Math.floor( Math.random() * choices.length );
                    var choice = d3.keys(foci)[foci_index];

function checkTime(i) {
                        if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
                        return i;
                    }

// check if we're at the end of the line
                    if (i == data.length) {
                        i = 0;
                        minute = 57;
                        hour = 5;
                    }

minute = +minute + 1;

if (minute % 60 == 0) {
                        minute = 0;
                        hour = +hour + 1;
                    }

minute = checkTime(+minute);
                    hour = checkTime(+hour);

// update nodes
                    for (var j = 0; j < num_nodes; j++) {
                        
                        //console.log(j);
                        nodes[j].cx = foci[data[i]["node"+j]].x;
                        nodes[j].cy = foci[data[i]["node"+j]].y;
                        nodes[j].place = data[i]["node"+j];

}

simulation.alpha(.01).restart();

svg.append("text")
                    .attr("x", foci.launchpad.x)
                    .attr("y", foci.radiology.y + 25)
                    .style("font-family", "futura")
                    .style("font-size", 18)
                    .style("text-anchor", "middle")
                    .transition()
                    .duration(400)
                    .text(function() { 
                        return "Time of Day: " + hour + ":" + minute; })
                    .remove();

i += 1;

// run it again in a few seconds
                    timeout = setTimeout(timer, 400);

};

timeout = setTimeout(timer, 400);

});

function tick(e) {

circle.each(gravity(0.05))
                    .style("fill", function(d) { return foci[d.place].color; })
                    .attr("cx", function(d) { return d.x; })
                    .attr("cy", function(d) { return d.y; });
            
            };

function gravity(alpha) {
                return function(d) {
                    d.y += (foci[d.place].y - d.y) * alpha;
                    d.x += (foci[d.place].x - d.x) * alpha;
                };
            }

</script>
    </body>
</ht

https://d3js.org/d3.v4.min.js