d3-nelson-rules example

d3-nelson-rules

This is a library that applies Nelson's Rules of process control to a data set in d3.

<!DOCTYPE html>
<meta charset='utf-8'>
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

circle {
  display: none;
}

circle[marked] {
  display: block;
}

circle[rule_1] {
  fill: #1f77b4;
}

circle[rule_2] {
  fill: #ff7f0e;
}

circle[rule_3] {
  fill: #2ca02c;
}

circle[rule_4] {
  fill: #d62728;
}

circle[rule_5] {
  fill: #9467bd;
}

circle[rule_6] {
  fill: #8c564b;
}

circle[rule_7] {
  fill: #e377c2;
}

circle[rule_8] {
  fill: #7f7f7f;
}

</style>
<body>
<script src='https://d3js.org/d3.v3.min.js'></script>
<script src='./d3-nelson-rules.min.js'></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format('%d-%b-%y').parse;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom');

var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left');

var line = d3.svg.line()
    .x(function(d, i) { return x(i); })
    .y(function(d) { return y(d); });

var svg = d3.select('body').append('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 data = [];
var rand = d3.random.normal();
var current_val = 0;
var next_val = rand();
// turns this into a path
for (var i = 0; i < 100; i++) {
  current_val += next_val;
  data.push(current_val);
  next_val = rand();
}

x.domain(d3.extent(data, function(d, i) { return i; }));
y.domain(d3.extent(data, function(d) { return d; }));

svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis);

svg.append('g')
    .attr('class', 'y axis')
    .call(yAxis)
  .append('text')
    .attr('transform', 'rotate(-90)')
    .attr('y', 6)
    .attr('dy', '.71em')
    .style('text-anchor', 'end')
    .text('Value');

svg.append('path')
    .datum(data)
    .attr('class', 'line')
    .attr('d', line);

// nelson rules magic
var nelson = d3_nelson_rules.nelson().value(function(d) { return d; });

svg.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .call(nelson)
    .attr('r', 5)
    .attr('cx', function(d, i) { return x(i); })
    .attr('cy', function(d) { return y(d); });

</script>

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