Motion Flow Chart

a Sankey Particles visualization of patient flow through an orthopaedic clinic

paper Enabling measuring of the patient flow in an orthopaedic clinic [abstract] [pdf] [data]

This research enables measuring of the patient flow in the orthopaedic clinic
in the Sint Maartenskliniek (SMK). An in-depth understanding of
the patient flow process is required in order to identify areas for improvement
and by that make the patient flow process more efficient.

Figure 17 presents the Sankey diagram of the patient flow. Data from the period
2012-2016 is used.

100% of the patients is initially referred to the first consult outpatient clinic
where the 100% arrives.

64% of the patients do not receive an OR-receipt against the other
36% of patients that receive an OR-receipt.

From the patients that receive an OR-receipt only 67% percent receives surgery.
The other 33% cannot receive surgery based on the results of the screening.

16% of the patients that receive surgery are patients within one of the
four emergency categories.

84% of the patients that receive surgery are not emergency patients.

this bl.ock forks the City of Oakland Budget Proposal Sankey Particles bl.ock which in turn is an iteration on the bl.ock Sankey Particles III by @Elijah_Meeks

Original `README.md`:

Using particles to indicate flow between reservoirs in a sankey diagram. This time with particles moving at varying speeds and maintaining the color of the source node. You can drag the reservoirs (the rectangles) to adjust the path of the flows.

Other examples of sankeys with particles:

<!DOCTYPE html>

<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Sankey Particles</title>
</head>
<body>
<canvas width='1000' height='1000' ></canvas>
<svg width='1000' height='1000' ></svg>

const margin = { top: 1, right: 1, bottom: 6, left: 1 };
  const width = 960 - margin.left - margin.right;
  const height = 500 - margin.top - margin.bottom;

const formatNumber = d3.format('.0%');
  const format = d => `${formatNumber(d)}`;
  const color = d3.scale.category20();

const svg = d3.select('svg')
    .style('position', 'absolute')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`);

const sankey = d3.sankey()
    .nodeWidth(15)
    .nodePadding(10)
    .size([width, height]);

const path = sankey.link();

/* let freqCounter = 1; */

d3.json('graph.json', graph => {
    sankey
      .nodes(graph.nodes)
      .links(graph.links)
      .layout(32);

const link = svg.append('g').selectAll('.link')
      .data(graph.links)
      .enter().append('path')
        .attr('class', 'link')
        .attr('d', path)
        .style('stroke-width', d => Math.max(1, d.dy))
        .style({
          fill: 'none',
          stroke: '#000',
          'stroke-opacity': 0.15
        })
        .sort((a, b) => b.dy - a.dy)

link
      .on('mouseover', function () {
        d3.select(this)
          .style('stroke-opacity', 0.25);
      })
      .on('mouseout', function () {
        d3.select(this)
          .style('stroke-opacity', 0.15);
      });

link.append('title')
      .text(d => `${format(d.label)} of ${d.source.name} → ${d.target.name}\n${format(d.value)} of ${graph.nodes[0].name}`)

const node = svg.append('g').selectAll('.node')
      .data(graph.nodes)
      .enter().append('g')
        .attr('class', 'node')
        .attr('transform', d => `translate(${d.x}, ${d.y})`)
        .call(d3.behavior.drag()
        .origin(d => d)
        .on('dragstart', function () { this.parentNode.appendChild(this); })
        .on('drag', dragmove));

node.append('rect')
      .attr('height', d => d.dy)
      .attr('width', sankey.nodeWidth())
      .style('fill', (d, i) => {
        // d.color = color(d.name.replace(/ .*/, ''));
        d.color = color(i);
        return d.color;
      })
      .style({
        stroke: 'none',
        cursor: 'move',
        'fill-opacity': 0.9,
        'shape-rendering': 'crispEdges'
      })
      .append('title')
        .text(d => `${format(d.value)} ${d.name}`);

node.append('text')
      .attr('x', -6)
      .attr('y', d => d.dy / 2)
      .attr('dy', '.35em')
      .attr('text-anchor', 'end')
      .attr('transform', null)
      .style({
        'pointer-events': 'none',
        'text-shadow': '0 1px 0 #fff',
        'font-size': '12px'

})
      .text(d => d.name)
      .filter(d => d.x < width / 2)
        .attr('x', 6 + sankey.nodeWidth())
        .attr('text-anchor', 'start')
        .style('font-size', '12px');

const linkExtent = d3.extent(graph.links, d => d.value);

const frequencyScale = d3.scale.linear()
      .domain(linkExtent)
      .range([0.05, 1]);

/* const particleSize = */ d3.scale.linear()
      .domain(linkExtent)
      .range([1, 5]);

graph.links.forEach(currentLink => {
      currentLink.freq = frequencyScale(currentLink.value);
      currentLink.particleSize = 2;
      currentLink.particleColor = d3.scale.linear().domain([0, 1])
      .range([currentLink.source.color, currentLink.target.color]);
    });

/* const t = */ d3.timer(tick, 1000);
    let particles = [];

function tick(elapsed /* , time */) {
      particles = particles.filter(d => d.current < d.path.getTotalLength());

d3.selectAll('path.link')
      .each(
        function (d) {
  //        if (d.freq < 1) {
          for (let x = 0; x < 2; x++) {
            const offset = (Math.random() - 0.5) * (d.dy - 4);
            if (Math.random() < d.freq) {
              const length = this.getTotalLength();
              particles.push({
                link: d,
                time: elapsed,
                offset,
                path: this,
                length,
                animateTime: length,
                speed: 0.5 + (Math.random())
              });
            }
          }
  //        }
  /*        else {
            for (let x = 0; x<d.freq; x++) {
              let offset = (Math.random() - .5) * d.dy;
              particles.push({link: d, time: elapsed, offset: offset, path: this})
            }
          } */
        });

particleEdgeCanvasPath(elapsed);
    }

function particleEdgeCanvasPath(elapsed) {
      const context = d3.select('canvas').node().getContext('2d');

context.clearRect(0, 0, 1000, 1000);

context.fillStyle = 'gray';
      context.lineWidth = '1px';
      for (const x in particles) {
        if ({}.hasOwnProperty.call(particles, x)) {
          const currentTime = elapsed - particles[x].time;
  //        let currentPercent = currentTime / 1000 * particles[x].path.getTotalLength();
          particles[x].current = currentTime * 0.15 * particles[x].speed;
          const currentPos = particles[x].path.getPointAtLength(particles[x].current);
          context.beginPath();
          context.fillStyle = particles[x].link.particleColor(0);
          context.arc(
            currentPos.x,
            currentPos.y + particles[x].offset,
            particles[x].link.particleSize,
            0,
            2 * Math.PI
          );
          context.fill();
        }
      }
    }
  });
</script>
</body>
</html>

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

https://npmcdn.com/babel-core@5.8.34/browser.min.js