rowanc1

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;

rowanc1

<ink-var name="r" value="0.35"></ink-var>
<ink-var name="theta" value="0" format=".1f"></ink-var>
<ink-var name="xC" :value="Math.cos(theta)*r-0.5"></ink-var>
<ink-var name="yC" :value="Math.sin(theta)*r+0.5"></ink-var>

<h3>Sin and Cos</h3>
<ink-dynamic bind="theta" min="0" step="0.01" :max="Math.PI*2" periodic="true" :transform="value*180/Math.PI" after="º"></ink-dynamic>
<ink-chart xlim="[-1, 2]" ylim="[-1, 1]" height="400" width="600" xAxisLocation="hidden" yAxisLocation="hidden">
  <ink-chart-path :data="[[-1,0],[2, 0],[],[0, -1], [0, 1]]" stroke="#ddd" strokewidth="2"></ink-chart-path>
  <ink-chart-path :data="[[-1, 0.5-r],[2, 0.5-r],[],[-1, 0.5], [2, 0.5],[],[-1, 0.5+r],[2, 0.5+r]]" stroke="#ddd" strokewidth="0.5"></ink-chart-path>

rowanc1

<ink-var name="r" value="0.35"></ink-var>
<ink-var name="points" value="5"></ink-var>
<ink-var name="inset" value="2.5"></ink-var>
<ink-var name="theta" value="0" format=".1f"></ink-var>
<ink-var name="xC" :value="getCoord(0, theta, 'x', 0, draw)[1] || (-0.5 + r)"></ink-var>
<ink-var name="yC" :value="getCoord(0, theta, 'y', 0, draw)[1] || 0.5"></ink-var>
<ink-var name="uX" value="-0.5"></ink-var>
<ink-var name="uY" value="0.5"></ink-var>
<ink-var name="zeroX" :value="getCoord(0, theta, 'x', 0, draw)[0]"></ink-var>
<ink-var name="zeroY" :value="getCoord(0, theta, 'y', 0, draw)[0]"></ink-var>

rowanc1

/**
 * Extension for adding up points in an assignment.
 *
 * No more need to stress that point totals don't add up!! 😰
 *
 * Defines one role:
 *
 *   - `points` displays points and records number in total
 *
 * And one directives: