Idyll Dynamic format array

array-dynamic.js

const React = require('react');
const ReactDOM = require('react-dom');
const Format = require('d3-format');
const Drag = require('d3-drag');
const Selection = require('d3-selection');

class ArrayDynamic extends React.PureComponent {

  componentDidMount() {
    let node;
    try {
      node = ReactDOM.findDOMNode(this);
    } catch(e) {};
    if (!node) {
      return;
    }
    this.drag = Drag.drag().on('drag', () => {
      const dx = Selection.event.dx;
      var { step, value, interval, array, min, max } = this.props;
      min = Math.min(min, 0);
      max = Math.min(max, array.length - 1);
      step = Math.round(step); // Must be an integer
      const newValue = Math.max(Math.min(value + (step || interval) * dx, max), min);
      this.props.updateProps({ value: newValue });
    });
    this.drag(Selection.select(node));
  }

  render() {
    const { format, value, array } = this.props;
    const formatter = Format.format(format);
    return (
      <span className="idyll-dynamic">
        {array[value]}
      </span>
    );
  }
}

probability-of-a-spill.md

Risky Business: What risk of an oil spill are you comfortable with?

[var name:'p_f_values' value:[0.001, 0.0012, 0.0014, 0.0016, 0.0018, 0.002, 0.0025, 0.003, 0.0035, 0.004, 0.0045, 0.005, 0.0055, 0.006, 0.0065, 0.007, 0.0075, 0.008, 0.0085, 0.009, 0.0095, 0.01, 0.0105, 0.011, 0.0115, 0.012, 0.0125, 0.013, 0.0135, 0.014, 0.0145, 0.015, 0.0155, 0.016, 0.0165, 0.017, 0.0175, 0.018, 0.0185, 0.019, 0.0195, 0.02, 0.025, 0.03, 0.035, 0.04, 0.045, 0.05, 0.055, 0.06, 0.065, 0.07, 0.075, 0.08, 0.085, 0.09, 0.095, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55] /] [var name:'p_f_pick' value:5 /] [var name:'beta' value:0.85 /] [derived name:'p_f' value:p_f_values[p_f_pick] /] [derived name:'p_s' value:1 - p_f /] [derived name:'years2fail' value:1 / p_f /] [derived name:'et2fail' value:Math.log(beta)/Math.log(p_s) /] [derived name:'chance_spill' value:1 - Math.pow(p_s, years2fail) /]

In order to gain insight into the potential risk of an oil spill, you can play with the parameters below! You can drag the blue highlighted numbers to adjust the interactive graph.

Let's say the probability of a spill is [ArrayDynamic value:p_f_pick format:",.2%" array:p_f_values /] per year (Use Table 1). Let's say you are comfortable with a [Dynamic value:beta min:0.01 max:0.99 step:0.01 format:",.0%"/] probability of not having a spill. With your risk tolerance and this probability, the pipeline should not be operated longer than [Display value:et2fail format:".1f" /] years.