2b:null 2c:["$","title",null,{"children":"Plotter | Kjerand Pedersen | Observable"}] 31:T1025,class Plot { constructor(options = {}) { this.items = []; this.options = Object.assign({}, { xDomain: [-10, 10], yDomain: [10, -10], padding: 20, grid: true, axises: true, width: Math.min(width, 400), height: Math.min(width, 400), transitions: true, xLabel: 'X', yLabel: 'Y', onClick: null, onMouseMove: null, }, options); this.setup(); this.idSeq = 0; } positionFromOffset(offsetX, offsetY) { const mx = this.x.invert(offsetX - this.padding); const my = this.y.invert(offsetY - this.padding); const gx = Math.round(mx); const gy = Math.round(my); return { x: mx, y: my, gx, gy }; } setup() { const { padding, width: w, height: h, xDomain, yDomain, grid, axises, onClick, onMouseMove, } = this.options; this.padding = padding; this.innerWidth = w - 2 * padding; this.innerHeight = h - 2 * padding; const x = d3.scaleLinear().domain(xDomain).range([0, this.innerWidth]); const y = d3.scaleLinear().domain(yDomain).range([0, this.innerHeight]); const svg = d3.select(DOM.svg(w, h)) .style("width", w) .style("height", h); const [xmin, xmax] = x.domain(); const [ymin, ymax] = y.domain(); this.svg = svg; this.x = x; this.y = y; this.xmin = xmin; this.ymin = ymin; this.xmax = xmax; this.ymax = ymax; this.xInverted = xmin > xmax; this.yInverted = ymax > ymin; this.xFactor = this.xInverted ? x(xmin - 1) : x(xmin + 1) this.yFactor = this.yInverted ? y(ymin + 1) : y(ymin - 1); this.sizeFactor = (this.xFactor + this.yFactor) / 2; const centerX = padding + x(0); const centerY = padding + y(0); this.gGrid = svg.append('g') .attr('transform', `translate(${padding},${padding})`); this.gAxisX = svg.append('g') .attr('transform', `translate(${padding},${centerY})`); this.gAxisY = svg.append('g') .attr('transform', `translate(${centerX},${padding})`); this.g = svg.append('g') .attr('transform', `translate(${padding},${padding})`); if (grid) { this.grid = new Grid(this); this.grid.render(); } if (axises) { this.axises = new Axises(this); this.axises.render(); } svg.selectAll('text').style('pointer-events', 'none').style('user-select', 'none'); if (onClick) { svg.on('click', () => { const { offsetX, offsetY } = d3.event; onClick(this.positionFromOffset(offsetX, offsetY), this); }); } if (onMouseMove) { svg.on('mousemove', () => { const { offsetX, offsetY } = d3.event; onMouseMove(this.positionFromOffset(offsetX, offsetY), this); }); } } render() { const { x, y, g, } = this; // console.log(this.items); const selection = g.selectAll('g.item').data(this.items, d => d._id); selection.enter().append('g').attr('class', 'item').each((d, i, nodes) => { const n = d3.select(nodes[i]); d.enter(n); }); selection.each((d, i, nodes) => { const n = d3.select(nodes[i]); d.update(n); }); const toRemove = selection.exit(); toRemove.each(d => d.gUI && d.gUI.remove()); toRemove.remove(); } clear() { this.items.splice(0, this.items.length); this.render(); } getDOMNode() { return this.svg.node(); } add(item) { this.idSeq += 1; item._id = this.idSeq; this.items.push(item); this.render(); return item; } remove(item) { const idx = this.items.findIndex(d => d._id === item._id); this.items.splice(idx, 1); this.render(); } getItemByKey(keyValue, unwrap = true) { const matches = this.items.filter(d => d.options.key === keyValue); if (unwrap) { if (matches.length > 0) { return matches[0]; } else if (matches.length === 0) { return null; } } return matches; } }32:T425,class Axises { constructor(plot, options = {}) { this.plot = plot; this.options = Object.assign({}, options); } render() { const { gAxisX: gx, gAxisY: gy, x, y, } = this.plot; gx.selectAll('*').remove(); gy.selectAll('*').remove(); const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y); gx.call(xAxis.ticks()); gy.call(yAxis.ticks()); gx.selectAll('.tick').filter(d => d === 0).remove(); gy.selectAll('.tick').filter(d => d === 0).remove(); // axis labels gx.append('text') .attr('transform', `translate(${-20}, 12)`) .attr('fill', 'black') .style('text-anchor', 'start') .style('font-size', '12px') .style('font-weight', '600') .text(this.plot.options.xLabel); gy.append('text') .attr('transform', `translate(${0}, -10)`) .attr('fill', 'black') .style('text-anchor', 'middle') .style('font-size', '12px') .style('font-weight', '600') .text(this.plot.options.yLabel); } }33:T51d,class Grid { constructor(plot, options = {}) { this.plot = plot; this.options = Object.assign({}, { color: '#ddd' }, options); } render() { const { gGrid: g, xInverted, yInverted, innerWidth, innerHeight, xmin, xmax, ymin, ymax, x, y, } = this.plot; const { color, } = this.options; g.selectAll('*').remove(); const xTicks = xInverted ? xmin - xmax : xmax - xmin; const yTicks = yInverted ? ymax - ymin : ymin - ymax; x.ticks(xTicks).forEach(d => g.append('line') .attr('x1', x(d)) .attr('y1', 0) .attr('x2', x(d)) .attr('y2', innerHeight) .attr('stroke', color) .attr('fill', 'none') ); y.ticks(yTicks).forEach(d => g.append('line') .attr('x1', 0) .attr('y1', y(d)) .attr('x2', innerWidth) .attr('y2', y(d)) .attr('stroke', color) .attr('fill', 'none') ); } }34:Tbf2,class Point { constructor(plot, px, py, options = {}) { this.plot = plot; this.px = px; this.py = py; this.options = Object.assign({}, defaults, { size: 3, width: 1, opacity: 1 }, options); } getPosition() { const { x, y, } = this.plot; const px = x(this.px); const py = y(this.py); return { px, py }; } enter(g) { const { px, py, } = this.getPosition(); const { stroke, dash, width, interactive, color, fill, opacity, size, } = this.options; const r = size || width; g.append('circle') .attr('class', 'shape') .attr('cx', px) .attr('cy', py) .attr('r', r) .attr('stroke', stroke || color) .attr('stroke-dasharray', dash || null) .attr('fill', fill || color || stroke) .attr('fill-opacity', opacity) .attr('stroke-width', width || size); if (interactive) { this.createUI(g); } } update(g) { const { px, py, } = this.getPosition(); const t = this.plot.options.transitions; const { stroke, dash, width, fill, color, size, opacity, interactive, } = this.options; const shape = t ? g.select('.shape').transition() : g.select('.shape'); shape .attr('cx', px) .attr('cy', py) .attr('stroke', stroke || color) .attr('stroke-dasharray', dash || null) .attr('fill', fill || color || stroke) .attr('fill-opacity', opacity) .attr('stroke-width', width || size); } // for interactive points onChange() { if (this.options.onChange) { this.options.onChange({ x: this.px, y: this.py, }); } } createUI(container) { const { x, y, } = this.plot; this.gUI = createUIContainer(container); const { px, py, } = this.getPosition(); // move handle addUIHandler( this, this.gUI.select('.ghost'), 'move_handle', () => { const ghost = this.gUI.select('.ghost'); this.px = x.invert(+ghost.attr('cx')); this.py = y.invert(+ghost.attr('cy')); this.plot.render(); this.onChange(); }, ); } refreshUI(key, dx, dy) { const g = this.gUI; const ghost = g.select('.ghost'); let px = +ghost.attr('cx'); let py = +ghost.attr('cy'); if (key === 'move_handle') { px += dx; py += dy; } else if (key === 'reset') { const p = this.getPosition(); px = p.px; py = p.py; } ghost.attr('cx', px) .attr('cy', py); } }35:T11a0,class LineSegment { constructor(plot, x1, y1, x2, y2, options = {}) { this.plot = plot; this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2; this.options = Object.assign({}, defaults, options); } getPositions() { const { x, y, } = this.plot; const x1 = x(this.x1); const y1 = y(this.y1); const x2 = x(this.x2); const y2 = y(this.y2); return { x1, y1, x2, y2 }; } enter(g) { const { x1, y1, x2, y2, } = this.getPositions(); const { stroke, dash, width, interactive, } = this.options; g.append('line') .attr('class', 'shape') .attr('x1', x1) .attr('y1', y1) .attr('x2', x2) .attr('y2', y2) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', 'none') .attr('stroke-width', width); if (interactive) { this.createUI(g); } } update(g) { const { x1, y1, x2, y2, } = this.getPositions(); const t = this.plot.options.transitions; const { stroke, dash, width, interactive, } = this.options; const shape = t ? g.select('.shape').transition() : g.select('.shape'); shape .attr('x1', x1) .attr('y1', y1) .attr('x2', x2) .attr('y2', y2) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', 'none') .attr('stroke-width', width); } // for interactive line segments onChange() { if (this.options.onChange) { this.options.onChange({ x1: this.x1, y1: this.y1, x2: this.x2, y2: this.y2, }); } } createUI(container) { const { x, y, } = this.plot; this.gUI = createUIContainer(container); const { x1, y1, x2, y2, } = this.getPositions(); // move handle addUIHandler( this, this.gUI.select('.ghost'), 'move_handle', () => { const ghost = this.gUI.select('.ghost'); this.x1 = x.invert(+ghost.attr('x1')); this.y1 = y.invert(+ghost.attr('y1')); this.x2 = x.invert(+ghost.attr('x2')); this.y2 = y.invert(+ghost.attr('y2')); this.plot.render(); this.onChange(); }, ); // p1 handle const p1Handle = createUIHandle( this, 'p1_handle', (dx, dy) => { const { x1, y1, } = this.getPositions(); this.x1 = x.invert(x1 + dx); this.y1 = y.invert(y1 + dy); this.plot.render(); this.onChange(); }, ); p1Handle.attr('cx', x1).attr('cy', y1); // p2 handle const p2Handle = createUIHandle( this, 'p2_handle', (dx, dy) => { const { x2, y2, } = this.getPositions(); this.x2 = x.invert(x2 + dx); this.y2 = y.invert(y2 + dy); this.plot.render(); this.onChange(); }, ); p2Handle.attr('cx', x2).attr('cy', y2); } refreshUI(key, dx, dy) { const g = this.gUI; const ghost = g.select('.ghost'); let x1 = +ghost.attr('x1'); let y1 = +ghost.attr('y1'); let x2 = +ghost.attr('x2'); let y2 = +ghost.attr('y2'); if (key === 'move_handle') { x1 += dx; y1 += dy; x2 += dx; y2 += dy; } else if (key === 'p1_handle') { x1 += dx; y1 += dy; } else if (key === 'p2_handle') { x2 += dx; y2 += dy; } else if (key === 'reset') { const p = this.getPositions(); x1 = p.x1; y1 = p.y1; x2 = p.x2; y2 = p.y2; } ghost.attr('x1', x1) .attr('y1', y1) .attr('x2', x2) .attr('y2', y2) g.select('.p1_handle') .attr('cx', x1) .attr('cy', y1); g.select('.p2_handle') .attr('cx', x2) .attr('cy', y2); } }36:Tec0,class PolyLine { constructor(plot, vertices, options = {}) { this.plot = plot; this.vertices = vertices; this.options = Object.assign({}, defaults, { curve: false }, options); this.lineFunc = d3.line().x(d => d.x).y(d => d.y); } getPositions() { const { x, y, } = this.plot; return this.vertices.map(v => ({ x: x(v.x), y: y(v.y)})); } enter(g) { const positions = this.getPositions(); const { stroke, dash, width, interactive, curve, } = this.options; g.append('path') .attr('d', curve ? this.lineFunc.curve(d3.curveCatmullRom)(positions) : this.lineFunc(positions) ) .attr('class', 'shape') .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', 'none') .attr('stroke-width', width); if (interactive) { this.createUI(g); } } update(g) { const positions = this.getPositions(); const t = this.plot.options.transitions; const { stroke, dash, width, curve, interactive, } = this.options; const shape = t ? g.select('.shape').transition() : g.select('.shape'); shape .attr('d', curve ? this.lineFunc.curve(d3.curveCatmullRom)(positions) : this.lineFunc(positions) ) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', 'none') .attr('stroke-width', width); } // for interactive line segments onChange() { if (this.options.onChange) { this.options.onChange(this.vertices); } } createUI(container) { const { x, y, } = this.plot; this.gUI = createUIContainer(container); const positions = this.getPositions(); this._points = [...positions]; // vertice handles positions.forEach((p, i) => { const h = createUIHandle( this, `v${i}_handle`, (dx, dy, px, py) => { const hp = this._points[i]; hp.x = px; hp.y = py; this.vertices[i].x = x.invert(hp.x); this.vertices[i].y = y.invert(hp.y); this.plot.render(); this.onChange(); }, ); h.attr('cx', p.x).attr('cy', p.y); }); addUIHandler( this, this.gUI.select('.ghost'), 'move_handle', () => { this._points.forEach((p, i) => { this.vertices[i].x = x.invert(p.x); this.vertices[i].y = y.invert(p.y); }); this.plot.render(); this.onChange(); }, ); } refreshUI(key, dx, dy, px ,py) { const g = this.gUI; const ghost = g.select('.ghost'); let points = this._points; if (key === 'move_handle') { points.forEach((v, i) => { v.x += dx; v.y += dy; g.select(`.v${i}_handle`) .attr('cx', v.x) .attr('cy', v.y); }); } else if (key === 'reset') { points = this.getPositions(); } else { const index = +key.substring(1, key.indexOf('_')); points[index].x = px; points[index].y = py; g.select(`.${key}`) .attr('cx', px) .attr('cy', py); } ghost.attr('d', this.options.curve ? this.lineFunc.curve(d3.curveCatmullRom)(points) : this.lineFunc(points)); } }37:T1514,class Line { constructor(plot, slope, intersect, options = {}) { this.plot = plot; this.slope = slope; this.intersect = intersect; this.options = Object.assign({}, defaults, options); } getPositions(slope = this.slope, intersect = this.intersect) { const { x, y, } = this.plot; const [x1, x2] = x.domain(); const y1 = slope * x1 + intersect; const y2 = slope * x2 + intersect; return { x1: x(x1), y1: y(y1), x2: x(x2), y2: y(y2) }; } getCoefficients(x1, y1, x2, y2) { const { x, y, } = this.plot; const slope = (y.invert(y2) - y.invert(y1)) / (x.invert(x2) - x.invert(x1)); const intersect = y.invert(y1) - (slope * x.invert(x1)); // console.log(slope, intersect) return { slope, intersect }; } enter(g) { const { stroke, dash, width, interactive, color, size, } = this.options; const { x1, y1, x2, y2, } = this.getPositions(); g.append('line') .attr('class', 'shape') .attr('x1', x1) .attr('y1', y1) .attr('x2', x2) .attr('y2', y2) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', 'none') .attr('stroke-width', width); if (interactive) { this.createUI(g); } } update(g) { const { x1, y1, x2, y2, } = this.getPositions(); const t = this.plot.options.transitions; const { stroke, dash, width, color, size, interactive, } = this.options; const shape = t ? g.select('.shape').transition() : g.select('.shape'); shape .attr('x1', x1) .attr('y1', y1) .attr('x2', x2) .attr('y2', y2) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', 'none') .attr('stroke-width', width); } // for interactive lines onChange() { if (this.options.onChange) { this.options.onChange({ slope: this.slope, intersect: this.intersect, }); } } createUI(container) { const { x, y, } = this.plot; this.gUI = createUIContainer(container); const { x1, y1, x2, y2, } = this.getPositions(); const { uiDisableMove, uiDisableRotate, } = this.options; // move handle if (!uiDisableMove) { const mHandle = createUIHandle( this, 'move_handle', () => { const ghost = this.gUI.select('.ghost'); const x1 = +ghost.attr('x1'); const y1 = +ghost.attr('y1'); const x2 = +ghost.attr('x2'); const y2 = +ghost.attr('y2'); const { slope, intersect } = this.getCoefficients(x1, y1, x2, y2); this.slope = slope; this.intersect = intersect; this.plot.render(); this.onChange(); }, 'white', ); mHandle.attr('cx', x(0)).attr('cy', y(this.intersect)); } if (!uiDisableRotate) { addUIHandler( this, this.gUI.select('.ghost'), 'rotate_handle', () => { const ghost = this.gUI.select('.ghost'); const x1 = +ghost.attr('x1'); const y1 = +ghost.attr('y1'); const x2 = +ghost.attr('x2'); const y2 = +ghost.attr('y2'); const { slope, intersect } = this.getCoefficients(x1, y1, x2, y2); this.slope = slope; this.intersect = intersect; this.plot.render(); this.onChange(); }, ); } } refreshUI(key, dx, dy, px, py) { const g = this.gUI; const ghost = g.select('.ghost'); const { x, y, yInverted: yi, xInverted: xi, } = this.plot; let x1 = +ghost.attr('x1'); let y1 = +ghost.attr('y1'); let x2 = +ghost.attr('x2'); let y2 = +ghost.attr('y2'); if (key === 'move_handle') { y1 += dy; y2 += dy; } else if (key === 'rotate_handle') { const cx = x(0); const cy = y(this.intersect); const dy = yi ? py - cy : cy - py; const dx = xi ? cx - px : px - cx; const newSlope = dy / dx; if (newSlope !== Infinity && newSlope !== -Infinity) { const pos = this.getPositions(newSlope, this.intersect); x1 = pos.x1; y1 = pos.y1; x2 = pos.x2; y2 = pos.y2; } } else if (key === 'reset') { const pos = this.getPositions(); x1 = pos.x1; y1 = pos.y1; x2 = pos.x2; y2 = pos.y2; } ghost.attr('x1', x1) .attr('y1', y1) .attr('x2', x2) .attr('y2', y2) const { intersect } = this.getCoefficients(x1, y1, x2, y2); g.select('.move_handle') .attr('cy', this.plot.y(intersect)); } }38:Tf2e,class Polygon { constructor(plot, vertices, options = {}) { this.plot = plot; this.vertices = vertices; this.options = Object.assign({}, defaults, options); this.lineFunc = d3.line().x(d => d.x).y(d => d.y); } getPositions(concat = false) { const { x, y, } = this.plot; let verts = [...this.vertices]; if (concat) { verts = verts.concat([this.vertices[0]]); } return verts.map(v => ({ x: x(v.x), y: y(v.y)})); } enter(g) { const positions = this.getPositions(true); const { stroke, fill, opacity, dash, width, interactive, } = this.options; g.append('path') .attr('d', this.lineFunc(positions)) .attr('class', 'shape') .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', fill || 'none') .attr('fill-opacity', opacity) .attr('stroke-width', width) .style('pointer-events', 'none'); if (interactive) { this.createUI(g); } } update(g) { const positions = this.getPositions(true); const t = this.plot.options.transitions; const { stroke, fill, opacity, dash, width, interactive, } = this.options; const shape = t ? g.select('.shape').transition() : g.select('.shape'); shape .attr('d', this.lineFunc(positions)) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', fill || 'none') .attr('fill-opacity', opacity) .attr('stroke-width', width); } // for interactive line segments onChange() { if (this.options.onChange) { this.options.onChange(this.vertices); } } createUI(container) { const { x, y, } = this.plot; this.gUI = createUIContainer(container); const positions = this.getPositions(); this._points = [...positions]; // vertice handles positions.forEach((p, i) => { const h = createUIHandle( this, `v${i}_handle`, (dx, dy, px, py) => { const hp = this._points[i]; hp.x = px; hp.y = py; this.vertices[i].x = x.invert(hp.x); this.vertices[i].y = y.invert(hp.y); this.plot.render(); this.onChange(); }, ); h.attr('cx', p.x).attr('cy', p.y); }); addUIHandler( this, this.gUI.select('.ghost'), 'move_handle', () => { this._points.forEach((p, i) => { this.vertices[i].x = x.invert(p.x); this.vertices[i].y = y.invert(p.y); }); this.plot.render(); this.onChange(); }, ); } refreshUI(key, dx, dy, px, py) { const g = this.gUI; const ghost = g.select('.ghost'); const points = this._points; if (key === 'move_handle') { points.forEach((v, i) => { v.x += dx; v.y += dy; g.select(`.v${i}_handle`) .attr('cx', v.x) .attr('cy', v.y); }); } else if (key === 'reset') { points = this.getPositions(); } else { const index = +key.substring(1, key.indexOf('_')); points[index].x = px; points[index].y = py; g.select(`.${key}`) .attr('cx', px) .attr('cy', py); } ghost.attr('d', this.options.curve ? this.lineFunc.curve(d3.curveCatmullRom)(points.concat(points[0])) : this.lineFunc(points.concat(points[0]))); } }39:T1826,class Arrow { constructor(plot, x1, y1, x2, y2, options = {}) { this.plot = plot; this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2; this.options = Object.assign({}, defaults, { size: 10 }, options); } getPositions() { const { x, y, } = this.plot; const x1 = x(this.x1); const y1 = y(this.y1); const x2 = x(this.x2); const y2 = y(this.y2); return { x1, y1, x2, y2 }; } createArrowHead(x1, y1, x2, y2, size) { const dx = x2 - x1; const dy = y2 - y1; const l = Math.sqrt(dx**2 + dy**2); if (l === 0) return []; const uv = { x: dx/l, y: dy/l }; const n = { x: -dy/l, y: dx/l }; const p1 = { x: x2 - uv.x * size, y: y2 - uv.y * size, }; const p2 = { x: p1.x + n.x * (size / 2), y: p1.y + n.y * (size / 2), }; const p3 = { x: p1.x - n.x * (size / 2), y: p1.y - n.y * (size / 2), }; const arrowhead = [ p1, p2, { x: x2, y: y2 }, p3, p1 ]; return arrowhead; } enter(g) { const { x1, y1, x2, y2, } = this.getPositions(); const { stroke, dash, width, interactive, size, } = this.options; g.append('line') .attr('class', 'shape') .attr('x1', x1) .attr('y1', y1) .attr('x2', x2) .attr('y2', y2) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', 'none') .attr('stroke-width', width) .style('pointer-events', 'none'); const arrowhead = this.createArrowHead(x1, y1, x2, y2, size); g.append('path') .attr('d', d3.line().x(d => d.x).y(d => d.y)(arrowhead)) .attr('class', 'arrowhead') .attr('fill', stroke) .attr('stroke', stroke) .attr('stroke-linecap', 'butt') .attr('stroke-width', width) .style('pointer-events', 'none'); if (interactive) { this.createUI(g); } } update(g) { const { x1, y1, x2, y2, } = this.getPositions(); const t = this.plot.options.transitions; const { stroke, dash, width, interactive, size, } = this.options; const shape = t ? g.select('.shape').transition() : g.select('.shape'); shape .attr('x1', x1) .attr('y1', y1) .attr('x2', x2) .attr('y2', y2) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', 'none') .attr('stroke-width', width); const arrowhead = this.createArrowHead(x1, y1, x2, y2, size); g.select('path.arrowhead') .attr('d', d3.line().x(d => d.x).y(d => d.y)(arrowhead)) .attr('fill', stroke) .attr('stroke', stroke) .attr('stroke-width', width); } // for interactive line segments onChange() { if (this.options.onChange) { this.options.onChange({ x1: this.x1, y1: this.y1, x2: this.x2, y2: this.y2, }); } } createUI(container) { const { x, y, } = this.plot; this.gUI = createUIContainer(container); const { uiDisableMove, uiDisableP1, uiDisableP2, } = this.options; const { x1, y1, x2, y2, } = this.getPositions(); // move handle if (!uiDisableMove) { addUIHandler( this, this.gUI.select('.ghost'), 'move_handle', () => { const ghost = this.gUI.select('.ghost'); this.x1 = x.invert(+ghost.attr('x1')); this.y1 = y.invert(+ghost.attr('y1')); this.x2 = x.invert(+ghost.attr('x2')); this.y2 = y.invert(+ghost.attr('y2')); this.plot.render(); this.onChange(); }, ); } // p1 handle if (!uiDisableP1) { const p1Handle = createUIHandle( this, 'p1_handle', (dx, dy) => { const { x1, y1, } = this.getPositions(); this.x1 = x.invert(x1 + dx); this.y1 = y.invert(y1 + dy); this.plot.render(); this.onChange(); }, ); p1Handle.attr('cx', x1).attr('cy', y1); } // p2 handle if (!uiDisableP2) { const p2Handle = createUIHandle( this, 'p2_handle', (dx, dy) => { const { x2, y2, } = this.getPositions(); this.x2 = x.invert(x2 + dx); this.y2 = y.invert(y2 + dy); this.plot.render(); this.onChange(); }, ); p2Handle.attr('cx', x2).attr('cy', y2); } } refreshUI(key, dx, dy) { const g = this.gUI; const ghost = g.select('.ghost'); let x1 = +ghost.attr('x1'); let y1 = +ghost.attr('y1'); let x2 = +ghost.attr('x2'); let y2 = +ghost.attr('y2'); if (key === 'move_handle') { x1 += dx; y1 += dy; x2 += dx; y2 += dy; } else if (key === 'p1_handle') { x1 += dx; y1 += dy; } else if (key === 'p2_handle') { x2 += dx; y2 += dy; } else if (key === 'reset') { const p = this.getPositions(); x1 = p.x1; y1 = p.y1; x2 = p.x2; y2 = p.y2; } ghost.attr('x1', x1) .attr('y1', y1) .attr('x2', x2) .attr('y2', y2) g.select('.p1_handle') .attr('cx', x1) .attr('cy', y1); g.select('.p2_handle') .attr('cx', x2) .attr('cy', y2); } }3a:T128e,class Ellipse { constructor(plot, cx, cy, rx, ry, options = {}) { this.plot = plot; this.cx = cx; this.cy = cy; this.rx = rx; this.ry = ry; this.options = Object.assign({}, defaults, options); } getPosition() { const { x, y, xFactor, yFactor, } = this.plot; const cx = x(this.cx); const cy = y(this.cy); const rx = this.rx * xFactor; const ry = this.ry * yFactor; return { cx, cy, rx, ry }; } enter(g) { const { cx, cy, rx, ry, } = this.getPosition(); const { stroke, dash, width, interactive, color, size, fill, opacity, } = this.options; const r = size || width; g.append('ellipse') .attr('class', 'shape') .attr('cx', cx) .attr('cy', cy) .attr('rx', rx) .attr('ry', ry) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', fill || 'none') .attr('fill-opacity', opacity) .attr('stroke-width', width); if (interactive) { this.createUI(g); } } update(g) { const { cx, cy, rx, ry, } = this.getPosition(); const t = this.plot.options.transitions; const { stroke, dash, width, color, size, fill, opacity, interactive, } = this.options; const shape = t ? g.select('.shape').transition() : g.select('.shape'); shape .attr('cx', cx) .attr('cy', cy) .attr('rx', rx) .attr('ry', ry) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', fill || 'none') .attr('fill-opacity', opacity) .attr('stroke-width', width); } // for interactive points onChange() { if (this.options.onChange) { this.options.onChange({ cx: this.cx, cy: this.cy, rx: this.rx, ry: this.ry, }); } } createUI(container) { const { x, y, xFactor, yFactor, } = this.plot; this.gUI = createUIContainer(container); const { cx, cy, } = this.getPosition(); // move handle addUIHandler( this, this.gUI.select('.ghost'), 'move_handle', () => { const ghost = this.gUI.select('.ghost'); this.cx = x.invert(+ghost.attr('cx')); this.cy = y.invert(+ghost.attr('cy')); this.rx = +ghost.attr('rx') / xFactor; this.ry = +ghost.attr('ry') / yFactor; this.plot.render(); this.onChange(); }, ); const rxHandle = createUIHandle( this, 'rx_handle', () => { const ghost = this.gUI.select('.ghost'); this.rx = +ghost.attr('rx') / xFactor; this.plot.render(); this.onChange(); }, ); const rx = this.rx * xFactor; rxHandle.attr('cx', cx + rx).attr('cy', cy); const ryHandle = createUIHandle( this, 'ry_handle', () => { const ghost = this.gUI.select('.ghost'); this.ry = +ghost.attr('ry') / yFactor; this.plot.render(); this.onChange(); }, ); const ry = this.ry * yFactor; ryHandle.attr('cy', cy - ry).attr('cx', cx); } refreshUI(key, dx, dy) { const g = this.gUI; const ghost = g.select('.ghost'); let cx = +ghost.attr('cx'); let cy = +ghost.attr('cy'); let rx = +ghost.attr('rx'); let ry = +ghost.attr('ry'); if (key === 'move_handle') { cx += dx; cy += dy; } else if (key === 'rx_handle') { rx += dx; } else if (key === 'ry_handle') { ry -= dy; } else if (key === 'reset') { const p = this.getPosition(); cx = p.cx; cy = p.cy; rx = p.rx; ry = p.ry; } if (rx <= 0 || ry <= 0) return; ghost.attr('cx', cx) .attr('cy', cy) .attr('rx', rx) .attr('ry', ry); g.select('.rx_handle') .attr('cx', cx + rx) .attr('cy', cy); g.select('.ry_handle') .attr('cy', cy - ry) .attr('cx', cx); } }3b:Ted9,class Circle { constructor(plot, cx, cy, r, options = {}) { this.plot = plot; this.cx = cx; this.cy = cy; this.r = r; this.options = Object.assign({}, defaults, options); } getPosition() { const { x, y, sizeFactor, } = this.plot; const cx = x(this.cx); const cy = y(this.cy); const r = this.r * sizeFactor; return { cx, cy, r }; } enter(g) { const { cx, cy, r, } = this.getPosition(); const { stroke, dash, width, interactive, color, size, fill, opacity, } = this.options; g.append('circle') .attr('class', 'shape') .attr('cx', cx) .attr('cy', cy) .attr('r', r) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', fill || 'none') .attr('fill-opacity', opacity) .attr('stroke-width', width); if (interactive) { this.createUI(g); } } update(g) { const { cx, cy, r, } = this.getPosition(); const t = this.plot.options.transitions; const { stroke, dash, width, color, size, fill, opacity, interactive, } = this.options; const shape = t ? g.select('.shape').transition() : g.select('.shape'); shape .attr('cx', cx) .attr('cy', cy) .attr('r', r) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', fill || 'none') .attr('fill-opacity', opacity) .attr('stroke-width', width); } // for interactive points onChange() { if (this.options.onChange) { this.options.onChange({ cx: this.cx, cy: this.cy, r: this.r, }); } } createUI(container) { const { x, y, sizeFactor, } = this.plot; this.gUI = createUIContainer(container); const { cx, cy, } = this.getPosition(); // move handle addUIHandler( this, this.gUI.select('.ghost'), 'move_handle', () => { const ghost = this.gUI.select('.ghost'); this.cx = x.invert(+ghost.attr('cx')); this.cy = y.invert(+ghost.attr('cy')); this.r = +ghost.attr('r') / sizeFactor; this.plot.render(); this.onChange(); }, ); const rHandle = createUIHandle( this, 'r_handle', () => { const ghost = this.gUI.select('.ghost'); this.r = +ghost.attr('r') / sizeFactor; this.plot.render(); this.onChange(); }, ); const r = this.r * sizeFactor; rHandle.attr('cx', cx + r).attr('cy', cy); } refreshUI(key, dx, dy) { const g = this.gUI; const ghost = g.select('.ghost'); let cx = +ghost.attr('cx'); let cy = +ghost.attr('cy'); let r = +ghost.attr('r'); if (key === 'move_handle') { cx += dx; cy += dy; } else if (key === 'r_handle') { r += dx; } else if (key === 'reset') { const p = this.getPosition(); cx = p.cx; cy = p.cy; r = p.r; } if (r <= 0) return; ghost.attr('cx', cx) .attr('cy', cy) .attr('r', r); g.select('.r_handle') .attr('cx', cx + r) .attr('cy', cy); } }3c:T149a,class Rectangle { constructor(plot, x1, y1, x2, y2, options = {}) { this.plot = plot; this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2; this.options = Object.assign({}, defaults, { rx: 0, ry: 0 }, options); } getPositions() { const { x, y, } = this.plot; let x1 = x(this.x1); let y1 = y(this.y1); let x2 = x(this.x2); let y2 = y(this.y2); let tmp; if (x1 > x2) { tmp = x1; x1 = x2; x2 = x1; } if (y1 > y2) { tmp = y1; y1 = y2; y2 = y1; } return { x1, y1, x2, y2 }; } enter(g) { const { x1, y1, x2, y2, } = this.getPositions(); const { xFactor, yFactor, } = this.plot; const { stroke, fill, opacity, dash, width, interactive, rx, ry, } = this.options; g.append('rect') .attr('class', 'shape') .attr('x', x1) .attr('y', y1) .attr('rx', rx * xFactor) .attr('ry', ry * yFactor) .attr('width', x2 - x1) .attr('height', y2 - y1) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', fill || 'none') .attr('fill-opacity', opacity) .attr('stroke-width', width); if (interactive) { this.createUI(g); } } update(g) { const { x1, y1, x2, y2, } = this.getPositions(); const { xFactor, yFactor, } = this.plot; const t = this.plot.options.transitions; const { stroke, fill, opacity, dash, width, interactive, rx, ry, } = this.options; const shape = t ? g.select('.shape').transition() : g.select('.shape'); shape .attr('x', x1) .attr('y', y1) .attr('rx', rx * xFactor) .attr('ry', ry * yFactor) .attr('width', x2 - x1) .attr('height', y2 - y1) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', fill || 'none') .attr('fill-opacity', opacity) .attr('stroke-width', width); } // for interactive line segments onChange() { if (this.options.onChange) { this.options.onChange({ x1: this.x1, y1: this.y1, x2: this.x2, y2: this.y2, }); } } copyFromGhost() { const { x, y, } = this.plot; const ghost = this.gUI.select('.ghost'); const w = +ghost.attr('width'); const h = +ghost.attr('height'); const px = +ghost.attr('x'); const py = +ghost.attr('y'); this.x1 = x.invert(px); this.y1 = y.invert(py); this.x2 = x.invert(px + w); this.y2 = y.invert(py + h); } createUI(container) { const { x, y, } = this.plot; this.gUI = createUIContainer(container); const { x1, y1, x2, y2, } = this.getPositions(); // move handle addUIHandler( this, this.gUI.select('.ghost'), 'move_handle', () => { this.copyFromGhost(); this.plot.render(); this.onChange(); }, ); // size handles const p1Handle = createUIHandle( this, 'p1_handle', () => { this.copyFromGhost(); this.plot.render(); this.onChange(); }, ); p1Handle.attr('cx', x1).attr('cy', y1); const p2Handle = createUIHandle( this, 'p2_handle', () => { this.copyFromGhost(); this.plot.render(); this.onChange(); }, ); p2Handle.attr('cx', x2).attr('cy', y2); } refreshUI(key, dx, dy) { const g = this.gUI; const ghost = g.select('.ghost'); const w = +ghost.attr('width'); const h = +ghost.attr('height'); let x1 = +ghost.attr('x'); let y1 = +ghost.attr('y'); let x2 = x1 + w; let y2 = y1 + h; if (key === 'move_handle') { x1 += dx; y1 += dy; x2 += dx; y2 += dy; } else if (key === 'p1_handle') { x1 += dx; y1 += dy; } else if (key === 'p2_handle') { x2 += dx; y2 += dy; } else if (key === 'reset') { const p = this.getPositions(); x1 = p.x1; y1 = p.y1; x2 = p.x2; y2 = p.y2; } if (x2 <= x1 || y2 <= y1) return; ghost.attr('x', x1) .attr('y', y1) .attr('width', Math.abs(x2-x1)) .attr('height', Math.abs(y2-y1)) g.select('.p1_handle') .attr('cx', x1) .attr('cy', y1); g.select('.p2_handle') .attr('cx', x2) .attr('cy', y2); } }3d:T76a,class Square extends Rectangle { constructor(plot, cx, cy, sl, options = {}) { const half = sl / 2; super(plot, cx - half, cy + half, cx + half, cy - half, options); } createUI(container) { const { x, y, } = this.plot; this.gUI = createUIContainer(container); const { x1, y1, x2, y2, } = this.getPositions(); // move handle addUIHandler( this, this.gUI.select('.ghost'), 'move_handle', () => { this.copyFromGhost(); this.plot.render(); this.onChange(); }, ); const sHandle = createUIHandle( this, 'side_handle', () => { this.copyFromGhost(); this.plot.render(); this.onChange(); }, ); sHandle.attr('cx', x2).attr('cy', y2); } refreshUI(key, dx, dy) { const g = this.gUI; const ghost = g.select('.ghost'); const w = +ghost.attr('width'); const h = +ghost.attr('height'); let x1 = +ghost.attr('x'); let y1 = +ghost.attr('y'); let x2 = x1 + w; let y2 = y1 + h; if (key === 'move_handle') { x1 += dx; y1 += dy; x2 += dx; y2 += dy; } else if (key === 'side_handle') { x1 -= dx; y1 -= dx; x2 += dx; y2 += dx; } else if (key === 'reset') { const p = this.getPositions(); x1 = p.x1; y1 = p.y1; x2 = p.x2; y2 = p.y2; } if (x2 <= x1 || y2 <= y1) return; ghost.attr('x', x1) .attr('y', y1) .attr('width', Math.abs(x2-x1)) .attr('height', Math.abs(y2-y1)) g.select('.side_handle') .attr('cx', x2) .attr('cy', y2); } }3e:Te0c,class Text { constructor(plot, text, px, py, options = {}) { this.plot = plot; this.px = px; this.py = py; this.text = text; this.options = Object.assign({}, defaults, { width: 1, size: 14, weight: 300, opacity: 1, anchor: 'middle', baseline: 'baseline', angle: 0, font: 'sans-serif, verdana, arial', }, options); } getPosition() { const { x, y, } = this.plot; const px = x(this.px); const py = y(this.py); return { px, py }; } enter(g) { const { px, py, } = this.getPosition(); const { stroke, fill, opacity, anchor, baseline, weight, font, width, angle, interactive, size, color, } = this.options; g.append('text') .attr('class', 'shape') .attr('fill', color || fill || stroke) .attr('fill-opacity', opacity) .attr('stroke-width', width) .attr('dominant-baseline', baseline) .style('text-anchor', anchor) .style('font-size', size + 'px') .style('font-weight', weight) .style('font-family', font) .attr('transform', `translate(${px},${py}) rotate(${angle})`) .text(this.text); if (interactive) { this.createUI(g); } } update(g) { const { px, py, } = this.getPosition(); const t = this.plot.options.transitions; const { stroke, fill, opacity, anchor, baseline, weight, font, width, angle, interactive, size, color, } = this.options; const shape = t ? g.select('.shape').transition() : g.select('.shape'); shape .attr('fill', color || fill || stroke) .attr('fill-opacity', opacity) .attr('stroke-width', width) .attr('dominant-baseline', baseline) .style('text-anchor', anchor) .style('font-size', size + 'px') .style('font-weight', weight) .style('font-family', font) .attr('transform', `translate(${px},${py}) rotate(${angle})`) .text(this.text) } // for interactive points onChange() { if (this.options.onChange) { this.options.onChange({ x: this.px, y: this.py, }); } } createUI(container) { const { x, y, } = this.plot; this.gUI = createUIContainer(container); this._translate = this.getPosition(); // move handle const mHandle = addUIHandler( this, this.gUI.select('.ghost'), 'move_handle', () => { this.px = x.invert(this._translate.px); this.py = y.invert(this._translate.py); this.plot.render(); this.onChange(); }, ); } refreshUI(key, dx, dy) { const g = this.gUI; const ghost = g.select('.ghost'); if (key === 'move_handle') { this._translate.px += dx; this._translate.py += dy; } else if (key === 'reset') { const p = this.getPositions(); this._translate.px = p.px; this._translate.py = p.py; } const { px, py } = this._translate; ghost.attr('transform', `translate(${px},${py})`); } }3f:T22af,class Arc { constructor(plot, cx, cy, start = 0, end = Math.PI / 2, options = {}) { this.options = Object.assign({}, defaults, { r1: 1, r2: 0 }, options); this.plot = plot; this.cx = cx; this.cy = cy; this.r1 = this.options.r1; this.r2 = this.options.r2; this.startAngle = start; this.endAngle = end; if (this.options.startDeg !== undefined) { this.startAngle = this.convertAngle(this.options.startDeg); } if (this.options.endDeg !== undefined) { this.endAngle = this.convertAngle(this.options.endDeg); } this.normalizeAngles(this.startAngle, this.endAngle); this._nextStart = this.startAngle; this._nextEnd = this.endAngle; } set start(angle) { if (this.plot.options.transitions) { this._nextStart = angle; } else { this.startAngle = angle; } } set end(angle) { if (this.plot.options.transitions) { this._nextEnd = angle; } else { this.endAngle = angle; } } set startDeg(angle) { if (this.plot.options.transitions) { this._nextStart = this.convertAngle(angle); } else { this.startAngle = this.convertAngle(angle); } } set endDeg(angle) { if (this.plot.options.transitions) { this._nextEnd = this.convertAngle(angle); } else { this.endAngle = this.convertAngle(angle); } } convertAngle(radAngle) { return degToRad(radAngle + 90); } arcFunc(d) { const { r1, r2, startAngle, endAngle, } = d; const { sizeFactor } = d.plot; return d3.arc().innerRadius(r2 * sizeFactor) .outerRadius(r1 * sizeFactor) .startAngle(startAngle) .endAngle(endAngle); } arcTween() { return (d, i, attr) => { const newstart = d._nextStart; const newend = d._nextEnd; const iStart = d3.interpolate(d.startAngle, newstart); const iEnd = d3.interpolate(d.endAngle, newend); // console.log(d.endAngle, newend); return t => { d.startAngle = iStart(t); d.endAngle = iEnd(t); return this.arcFunc(d)(); }; }; } getPosition() { const { x, y, } = this.plot; const cx = x(this.cx); const cy = y(this.cy); return { cx, cy }; } enter(g) { const { cx, cy, } = this.getPosition(); const { sizeFactor, } = this.plot; const { stroke, width, fill, opacity, size, dash, interactive, } = this.options; const r = size || width; g.append('path') .attr('class', 'shape') .attr('d', this.arcFunc(this)) .attr('fill', fill || stroke) .attr('fill-opacity', opacity) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('stroke-width', width) .attr('transform', `translate(${cx},${cy})`) .style('pointer-events', 'none'); if (interactive) { this.createUI(g); } } update(g) { const { cx, cy, } = this.getPosition(); const { sizeFactor, } = this.plot; const t = this.plot.options.transitions; const { stroke, width, fill, opacity, size, dash, } = this.options; const shape = t ? g.select('.shape').transition().attrTween('d', this.arcTween()) : g.select('.shape').attr('d', this.arcFunc(this)); shape .attr('fill', fill || stroke) .attr('fill-opacity', opacity) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('stroke-width', width) .attr('transform', `translate(${cx},${cy})`); } // for interactive points onChange() { if (this.options.onChange) { this.options.onChange({ x: this.cx, y: this.cy, start: this._nextStart, end: this._nextEnd, }); } } getAngle(x3, y3) { const x1 = this._translate.cx; const y1 = this._translate.cy - (this.r1 * this.plot.sizeFactor); const x2 = this._translate.cx; const y2 = this._translate.cy; const ux = x1 - x2; const uy = y1 - y2; const vx = x3 - x2; const vy = y3 - y2; const rad = Math.atan2(vy, vx) - Math.atan2(uy, ux); const norm = rad < 0 ? (2 * Math.PI) + rad : rad; return Math.max(0, Math.min(Math.PI * 2, norm)); } normalizeAngles(start, end) { const tau = Math.PI * 2; start = start % tau; end = end % tau; if (end < start) { end += tau; } } applyAnglesFromUI() { this.normalizeAngles(this._angles.start, this._angles.end); this._nextStart = this._angles.start; this._nextEnd = this._angles.end; } createUI(container) { const { x, y, sizeFactor, } = this.plot; const { r1, startAngle, endAngle, } = this; const { uiDisableMove, uiDisableStart, uiDisableEnd, } = this.options; this.gUI = createUIContainer(container); this._translate = this.getPosition(); this._angles = { start: startAngle, end: endAngle }; // move handle if (!uiDisableMove) { addUIHandler( this, this.gUI.select('.ghost'), 'move_handle', () => { this.cx = x.invert(this._translate.cx); this.cy = y.invert(this._translate.cy); this.plot.render(); this.onChange(); }, ); } if (!uiDisableStart) { const startHandle = createUIHandle( this, 'start_handle', (dx, dy, px, py) => { this._angles.start = this.getAngle(px, py); this.applyAnglesFromUI(); this.plot.render(); this.onChange(); }, ); const scx = x(this.cx) + r1 * sizeFactor * Math.sin(this._angles.start); const scy = y(this.cy) - r1 * sizeFactor * Math.cos(this._angles.start); startHandle.attr('cx', scx).attr('cy', scy); } if (!uiDisableEnd) { const endHandle = createUIHandle( this, 'end_handle', (dx, dy, px, py) => { this._angles.end = this.getAngle(px, py); this.applyAnglesFromUI(); this.plot.render(); this.onChange(); }, ); const ecx = x(this.cx) + (r1 * sizeFactor * Math.sin(this._angles.end)); const ecy = y(this.cy) - (r1 * sizeFactor * Math.cos(this._angles.end)); endHandle.attr('cx', ecx).attr('cy', ecy); } } refreshUI(key, dx, dy, px, py) { const g = this.gUI; const ghost = g.select('.ghost'); const { r1, r2, } = this; const { x, y, sizeFactor, } = this.plot; if (key === 'move_handle') { this._translate.cx += dx; this._translate.cy += dy; } else if (key === 'start_handle') { this._angles.start = this.getAngle(px, py); } else if (key === 'end_handle') { this._angles.end = this.getAngle(px, py); } else if (key === 'reset') { const p = this.getPosition(); this._translate.cx = p.cx; this._translate.cy = p.cy; this._angles.start = this.startAngle; this._angles.end = this.endAngle; } this.applyAnglesFromUI(); const { cx, cy } = this._translate; const scx = cx + (r1 * sizeFactor * Math.sin(this._angles.start)); const scy = cy - (r1 * sizeFactor * Math.cos(this._angles.start)); this.gUI.select('.start_handle') .attr('cx', scx).attr('cy', scy); const ecx = cx + r1 * sizeFactor * Math.sin(this._angles.end); const ecy = cy - r1 * sizeFactor * Math.cos(this._angles.end); this.gUI.select('.end_handle') .attr('cx', ecx).attr('cy', ecy); // console.log(this._angles.start, this._angles.end); ghost .attr('d', d3.arc() .innerRadius(r2 * sizeFactor) .outerRadius(r1 * sizeFactor) .startAngle(this._angles.start) .endAngle(this._angles.end)) .attr('transform', `translate(${cx},${cy})`); } }40:T852,class Func { constructor(plot, func, options) { this.plot = plot; this.func = func; this.options = Object.assign({}, defaults, { variable: 'x', defined: () => true }, options); this.lineFunc = d3.line().x(d => this.plot.x(d.x)).y(d => this.plot.y(d.y)); } enter (g) { const { x, y, } = this.plot; const { func: f, lineFunc, } = this; const { stroke, width, dash, defined, variable, } = this.options; const isY = variable === 'y'; const [min, max] = isY ? y.range() : x.range(); const range = d3.range(min, max); const points = isY ? range.map(v => ({ x: f(y.invert(v)), y: y.invert(v) })) .filter((v, i) => defined(v.y, i)) : range.map(v => ({ x: x.invert(v), y: f(x.invert(v)) })) .filter((v, i) => defined(v.x, i)); g.append('path') .attr('class', 'shape') .attr('d', lineFunc(points)) .attr('stroke', stroke) .attr('fill', 'none') .attr('stroke-width', width) .attr('stroke-dasharray', dash || null) .attr('stroke-linecap', 'butt'); } update (g) { const { x, y, } = this.plot; const t = this.plot.options.transitions; const { func: f, lineFunc, } = this; const { stroke, width, dash, defined, variable, } = this.options; const isY = variable === 'y'; const [min, max] = isY ? y.range() : x.range(); const range = d3.range(min, max); const points = isY ? range.map(v => ({ x: f(y.invert(v)), y: y.invert(v) })) .filter((v, i) => defined(v.y, i)) : range.map(v => ({ x: x.invert(v), y: f(x.invert(v)) })) .filter((v, i) => defined(v.x, i)); const shape = t ? g.select('.shape').transition() : g.select('.shape'); shape .attr('d', lineFunc(points)) .attr('stroke', stroke) .attr('fill', 'none') .attr('stroke-width', width) .attr('stroke-dasharray', dash || null) .attr('stroke-linecap', 'butt'); } }41:T296b,plotter_old = (options = {}) => { const { padding, xDomain, yDomain, grid, axises, width: w, height: h, } = Object.assign({}, { xDomain: [-10, 10], yDomain: [10, -10], padding: 20, grid: true, axises: true, width: Math.min(width, 400), height: Math.min(width, 400), }, options); const xInverted = xDomain[0] > xDomain[1]; const yInverted = yDomain[0] < yDomain[1]; const innerWidth = w - 2 * padding; const innerHeight = h - 2 * padding; const x = d3.scaleLinear().domain(xDomain).range([0, innerWidth]); const y = d3.scaleLinear().domain(yDomain).range([0, innerHeight]); const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y); const svg = d3.select(DOM.svg(w, h)) .style("width", w) .style("height", h); const centerX = padding + x(0); const centerY = padding + y(0); const ggrid = svg.append('g') .attr('transform', `translate(${padding},${padding})`); if (axises) { const gx = svg.append('g') .attr('transform', `translate(${padding},${centerY})`) .call(xAxis.ticks()); const gy = svg.append('g') .attr('transform', `translate(${centerX},${padding})`) .call(yAxis.ticks()); gx.selectAll('.tick').filter(d => d === 0).remove(); gy.selectAll('.tick').filter(d => d === 0).remove(); // axis labels gx.append('text') .attr('transform', `translate(${-20}, 12)`) .attr('fill', 'black') .style('text-anchor', 'start') .style('font-size', '12px') .style('font-weight', '600') .text('X'); gy.append('text') .attr('transform', `translate(${0}, -10)`) .attr('fill', 'black') .style('text-anchor', 'middle') .style('font-size', '12px') .style('font-weight', '600') .text('Y'); } if (grid) { const xTicks = xInverted ? xDomain[0] - xDomain[1] : xDomain[1] - xDomain[0]; const yTicks = yInverted ? yDomain[1] - yDomain[0] : yDomain[0] - yDomain[1]; x.ticks(xTicks).forEach(d => ggrid.append('line') .attr('x1', x(d)) .attr('y1', 0) .attr('x2', x(d)) .attr('y2', innerHeight) .attr('stroke', '#ddd') .attr('fill', 'none') ); y.ticks(yTicks).forEach(d => ggrid.append('line') .attr('x1', 0) .attr('y1', y(d)) .attr('x2', innerWidth) .attr('y2', y(d)) .attr('stroke', '#ddd') .attr('fill', 'none') ); } const g = svg.append('g').attr('transform', `translate(${padding},${padding})`); const defaults = { stroke: 'black', width: 1.5, opacity: 0.5, dash: null, }; const xFactor = xInverted ? x(xDomain[0] - 1) : x(xDomain[0] + 1); const yFactor = yInverted ? y(yDomain[0] + 1) : y(yDomain[0] - 1); const sizeFactor = (xFactor + yFactor) / 2; const degToRad = deg => deg * (Math.PI / 180); const lineFunc = d3.line().x(d => x(d.x)).y(d => y(d.y)); // plot functions const rectangle = (x1, y1, x2, y2, options = {}) => { const { stroke, width, fill, opacity, rx, ry, dash, } = Object.assign({}, defaults, { rx: 0, ry: 0 }, options); g.append('rect') .attr('x', x(x1)) .attr('y', y(y1)) .attr('rx', rx * xFactor) .attr('ry', ry * yFactor) .attr('width', x(x2) - x(x1)) .attr('height', y(y2) - y(y1)) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', fill || 'none') .attr('fill-opacity', opacity) .attr('stroke-width', width); }; const square = (cx, cy, length, options = {}) => { const sl = length / 2; rectangle( cx - sl, cy + sl, cx + sl, cy - sl, options, ); }; const func = (f, options = {}) => { const { stroke, width, dash, defined, variable, } = Object.assign({}, defaults, { variable: 'x', defined: () => true }, options); const isY = variable === 'y'; const [min, max] = isY ? y.range() : x.range(); const range = d3.range(min, max); const points = isY ? range.map(v => ({ x: f(y.invert(v)), y: y.invert(v) })) .filter((v, i) => defined(v.y, i)) : range.map(v => ({ x: x.invert(v), y: f(x.invert(v)) })) .filter((v, i) => defined(v.x, i)); g.append('path') .attr('d', lineFunc(points)) .attr('stroke', stroke) .attr('fill', 'none') .attr('stroke-width', width) .attr('stroke-dasharray', dash || null) .attr('stroke-linecap', 'butt'); }; const line = (m = 0, b = 0, options = {}) => { const [x1, x2] = xDomain; const y1 = m * x1 + b; const y2 = m * x2 + b; const { stroke, width, dash, } = Object.assign({}, defaults, options); g.append('line') .attr('x1', x(x1)) .attr('y1', y(y1)) .attr('x2', x(x2)) .attr('y2', y(y2)) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', 'none') .attr('stroke-width', width); }; const line_segment = (x1, y1, x2, y2, options = {}) => { const { stroke, width, fill, opacity, dash, } = Object.assign({}, defaults, options); g.append('line') .attr('x1', x(x1)) .attr('y1', y(y1)) .attr('x2', x(x2)) .attr('y2', y(y2)) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', 'none') .attr('stroke-width', width); }; const circle = (cx, cy, r, options = {}) => { const { stroke, width, fill, opacity, dash, } = Object.assign({}, defaults, options); g.append('circle') .attr('cx', x(cx)) .attr('cy', y(cy)) .attr('r', r * sizeFactor) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', fill || 'none') .attr('fill-opacity', opacity) .attr('stroke-width', width); }; const ellipse = (cx, cy, rx, ry, options = {}) => { const { stroke, width, fill, dash, opacity, } = Object.assign({}, defaults, options); g.append('ellipse') .attr('cx', x(cx)) .attr('cy', y(cy)) .attr('rx', xFactor * rx) .attr('ry', yFactor * ry) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', fill || 'none') .attr('fill-opacity', opacity) .attr('stroke-width', width); }; const polygon = (vertices, options = {}) => { const { stroke, width, fill, dash, opacity, } = Object.assign({}, defaults, options); g.append('path') .attr('d', lineFunc(vertices.concat(vertices[0]))) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', fill || 'none') .attr('fill-opacity', opacity) .attr('stroke-width', width); }; const polyline = (vertices, options = {}) => { const { stroke, width, dash, curve, } = Object.assign({}, defaults, options); g.append('path') .attr('d', curve ? lineFunc.curve(d3.curveCatmullRom)(vertices): lineFunc(vertices)) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', 'none') .attr('stroke-width', width); }; const point = (px, py, options = {}) => { circle( px, py, 2 / sizeFactor, Object.assign( {}, defaults, { opacity: 1, fill: 'black', widht: 1 }, options, )); } const arrow = (x1, y1, x2, y2, options = {}) => { const { stroke, width, fill, opacity, dash, size, } = Object.assign({}, defaults, { size: 10 }, options); g.append('line') .attr('x1', x(x1)) .attr('y1', y(y1)) .attr('x2', x(x2)) .attr('y2', y(y2)) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('fill', 'none') .attr('stroke-width', width); const dx = x(x2) - x(x1); const dy = y(y2) - y(y1); const l = Math.sqrt(dx**2 + dy**2); const uv = { x: dx/l, y: dy/l }; const n = { x: -dy/l, y: dx/l }; const p1 = { x: x(x2) - uv.x * size, y: y(y2) - uv.y * size, }; const p2 = { x: p1.x + n.x * (size / 2), y: p1.y + n.y * (size / 2), }; const p3 = { x: p1.x - n.x * (size / 2), y: p1.y - n.y * (size / 2), }; const arrowhead = [ p1, p2, { x: x(x2), y: y(y2) }, p3, p1 ]; g.append('path') .attr('d', d3.line().x(d => d.x).y(d => d.y)(arrowhead)) .attr('fill', stroke) .attr('stroke', stroke) .attr('stroke-linecap', 'butt') .attr('stroke-width', width); }; const text = (text, px, py, options = {}) => { const { stroke, width, fill, opacity, size, anchor, weight, angle, font, } = Object.assign({}, defaults, { width: 1, size: 14, weight: 300, opacity: 1, anchor: 'middle', angle: 0, font: 'sans-serif, verdana, arial', }, options); g.append('text') .attr('fill', fill || stroke) .attr('fill-opacity', opacity) .attr('stroke-width', width) .style('text-anchor', anchor) .style('font-size', size + 'px') .style('font-weight', weight) .style('font-family', font) .attr('transform', `translate(${x(px)},${y(py)}) rotate(${angle})`) .text(text); } const arc = (cx, cy, options = {}) => { const { stroke, width, fill, opacity, size, start, end, r2, r1, dash, } = Object.assign({}, defaults, { r1: 1, r2: 0, start: 0, end: 90 }, options); g.append('path') .attr('d', d3.arc() .innerRadius(r2 * sizeFactor) .outerRadius(r1 * sizeFactor) .startAngle(degToRad(90 - start)) .endAngle(degToRad(90 - end))) .attr('fill', fill || stroke) .attr('fill-opacity', opacity) .attr('stroke', stroke) .attr('stroke-dasharray', dash || null) .attr('stroke-width', width) .attr('transform', `translate(${x(cx)},${y(cy)})`); } return ({ node: svg.node(), clear: () => g.selectAll('*').remove(), line, line_segment, segment: line_segment, rectangle, square, circle, ellipse, arc, polygon, point, polyline, arrow, text, func, }); }42:T7b0,plotter = (options = {}) => { const plot = new Plot(options); const point = (px, py, options = {}) => { return plot.add(new Point(plot, px, py, options)); } const line = (slope, intersect, options = {}) => { return plot.add(new Line(plot, slope, intersect, options)); }; const segment = (x1, y1, x2, y2, options = {}) => { return plot.add(new LineSegment(plot, x1, y1, x2, y2, options)); }; const polyline = (vertices, options = {}) => { return plot.add(new PolyLine(plot, vertices, options)); }; const polygon = (vertices, options = {}) => { return plot.add(new Polygon(plot, vertices, options)); }; const arrow = (x1, y1, x2, y2, options = {}) => { return plot.add(new Arrow(plot, x1, y1, x2, y2, options)); }; const ellipse = (cx, cy, rx, ry, options = {}) => { return plot.add(new Ellipse(plot, cx, cy, rx, ry, options)); }; const circle = (cx, cy, r, options = {}) => { return plot.add(new Circle(plot, cx, cy, r, options)); }; const rectangle = (x1, y1, x2, y2, options = {}) => { return plot.add(new Rectangle(plot, x1, y1, x2, y2, options)); }; const square = (cx, cy, length, options = {}) => { return plot.add(new Square(plot, cx, cy, length, options)); }; const arc = (cx, cy, start, end, options = {}) => { return plot.add(new Arc(plot, cx, cy, start, end, options)); } const text = (text, px, py, options = {}) => { return plot.add(new Text(plot, text, px, py, options)); } const func = (f, options = {}) => { return plot.add(new Func(plot, f, options)); } return ({ node: plot.getDOMNode(), clear: () => plot.clear(), update: () => plot.render(), remove: item => plot.remove(item), instance: plot, point, line, polyline, polygon, segment, line_segment: segment, arrow, ellipse, circle, rectangle, square, arc, text, func, }); }43:[] 2f:{"id":"10e90724136344c7","slug":"plotter","title":"Plotter","thumbnail":"25ee8cedca803636987bbc81661bdc0ddc82e7f9ef16e2f5d1121cefadcec752","access_level":"public","create_time":"$D2018-09-18T15:46:02.995Z","update_time":"$D2023-03-13T08:56:49.029Z","view_time":null,"first_public_time":"$D2018-09-18T20:46:06.058Z","fork":false,"stars":36,"starred":false,"owner":{"type":"team","id":"455184b0afc7f1fd","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":"starter_2024"},"version":2003,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"00080969d76f924b","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":null}],"members":[{"type":"individual","id":"00080969d76f924b","login":"kjerandp","name":"Kjerand Pedersen","avatar_url":"https://avatars-next.observableusercontent.com/3c52e0775a9b4937e6002e09ca22d564189c0d589cae2166e091b5fe3b7f2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":10,"collection":{"id":"fc9d59b1d3947635","slug":"libs","title":"Libs/reusable","owner":{"id":"455184b0afc7f1fd","login":"kjerandp","name":"Kjerand Pedersen"}},"type":"notebook","body":{"title":"Plotter","cells":[{"id":0,"value":"md`# Plotter\n\nA simple helper function to draw basic geometric shapes etc., which you can import into your notebook:\n\n\\`\\`\\`js\n import { plotter } from '@kjerandp/plotter'\n\\`\\`\\`\n\n\nThen create an instance within a cell in your notebook:\n\n\\`\\`\\`js\n { \n const plot = plotter();\n plot.circle(0, 0, 5, { stroke: 'purple' } ); \n return plot.node;\n }\n\\`\\`\\`\n\nQuickly plot:\n- functions\n- shapes (rectangle, square, circle, ellipse, arc, polygon)\n- line, line-segment, poly-line and curve\n- point\n- text\n- arrow\n\nSee more examples of usage below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":934,"value":"md`## Classes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":876,"value":"defaults = ({\n stroke: 'black',\n width: 1.5,\n opacity: 0.5,\n dash: null,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":936,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":960,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":939,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1215,"value":"md`### Helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1105,"value":"function createUIContainer(container) {\n const main = container.node().parentNode;\n const g = d3.select(main).append('g')\n .attr('class', 'ui')\n .attr('opacity', 0)\n .attr('pointer-events', 'all')\n .on('mouseenter', () => {\n if(!g.datum().isDragging) {\n g.node().parentNode.appendChild(g.node());\n g.interrupt().transition().duration(100).attr('opacity', 1);\n }\n })\n .on('mouseleave', () => !g.datum().isDragging &&\n g.interrupt().transition().duration(750).attr('opacity', 0));\n \n container.select('.shape')\n .attr('pointer-events', 'all')\n .on('mouseenter', d => d.refreshUI('reset'));\n \n g.datum({ isDragging: false });\n \n const clone = container.select('.shape').node().cloneNode(true);\n \n g.node().appendChild(clone);\n \n const ghost = d3.select(clone)\n .attr('class', 'ghost')\n .attr('opacity', 0.25);\n \n \n return g;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1197,"value":"function addUIHandler(n, h, key, callback) {\n const g = n.gUI;\n h.style('cursor', 'move').classed(key, true)\n h.style('pointer-events', 'all');\n \n h.call(\n d3.drag().subject(()=> ({ x: d3.event.x, y: d3.event.y }))\n .on('start', () => {\n g.datum({ isDragging: true });\n })\n .on(\"drag\", () => { \n const dx = d3.event.dx;\n const dy = d3.event.dy;\n n.refreshUI(key, dx, dy, d3.event.x, d3.event.y);\n })\n .on('end', () => {\n const dx = d3.event.x - d3.event.subject.x;\n const dy = d3.event.y - d3.event.subject.y;\n g.datum({ isDragging: false });\n callback(dx, dy, d3.event.x, d3.event.y);\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1045,"value":"function createUIHandle(n, key, callback, color = 'orange', size = 5, visible = true) {\n const g = n.gUI;\n const h = g.append('circle')\n .attr('r', size)\n .attr('stroke', 'black')\n .attr('stroke-width', 2)\n .attr('fill', color)\n .attr('cursor', 'move')\n .style('pointer-events', 'all');\n \n addUIHandler(n, h, key, callback);\n return h;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1413,"value":"function degToRad(deg) {\n return deg * (Math.PI / 180);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1460,"value":"function radToDeg(rad) {\n return rad * 180 / Math.PI;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1166,"value":"md`### Shapes/types`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1156,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":871,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1226,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1178,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1262,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1285,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1293,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1310,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1342,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1362,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1375,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1408,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1613,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1169,"value":"md`### API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":856,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":196,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":437,"value":"{\n // plot functions of x\n const p = plotter();\n p.func(x => 0.1 * (x ** 3), { stroke: 'green', width: 3 });\n p.func(x => (x ** 2) - 6, { stroke: 'orange', width: 3 });\n p.func(x => Math.sqrt(x), { stroke: 'purple', width: 3, defined: x => x >= 0 });\n p.func(x => -Math.abs(x) - 2, { stroke: 'gray', width: 3, dash: '8,2' });\n return p.node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"viewof amp = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":542,"value":"viewof freq = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":548,"value":"viewof phase = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":519,"value":"{\n // plot trig functions\n const p = plotter({xLabel:'t', yLabel:'f(t)'});\n p.func(t => amp * Math.tan(freq * t - phase), { stroke: 'blue', width: 0.5 });\n p.func(t => amp * Math.sin(freq * t - phase), { stroke: 'red', width: 0.5 });\n p.func(t => amp * Math.cos(freq * t - phase), { stroke: 'green', width: 0.5 });\n return p.node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"{\n const p = plotter();\n \n p.line(2, 2, { stroke: 'blue', width: 3 });\n \n p.line(-1, 1.5, { stroke: 'orange', width: 3 });\n \n p.rectangle(-4, 3, 4, -3, { fill: 'red', rx: 1, ry: 2, dash: '6,3' });\n \n p.circle(5, 7, 2, { stroke: 'gray', fill: 'white', opacity: 0.7, dash: '2,2' });\n \n p.ellipse(-8, -6, 2, 3, { stroke: 'purple', fill: 'purple' });\n \n p.square(-8, 4, 2, { stroke: 'green', rx: 0.25, ry: 0.25 });\n \n return p.node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"{\n const p = plotter({ width: 400, height: 600, yDomain: [-15, 15], grid: false });\n \n p.line_segment(-2, 5, 7, 4, { stroke: 'magenta', width: 5, interactive: true });\n \n p.line(2, 8, { interactive: true });\n\n p.polyline([\n { x: 2, y: 18 },\n { x: 0, y: 12 },\n { x: 3, y: 8 },\n { x: 1, y: 4 },\n { x: 5, y: -6 },\n { x: 2, y: -16 },\n ], { stroke: 'red', width: 3, interactive: true, curve: true });\n \n p.polygon([\n { x: -2, y: 2 },\n { x: 4, y: 2 },\n { x: -1, y: -2 },\n ], { fill: 'yellow', interactive: true });\n \n p.polygon([\n { x: -8, y: -2 },\n { x: -4, y: -1 },\n { x: -2, y: -2 },\n { x: -2, y: -4 },\n { x: -5, y: -6 },\n ], { fill: 'green', stroke: '#789', width: 4, interactive: true });\n \n p.circle(5, 7, 2, { stroke: 'gray', fill: 'blue', opacity: 0.1, interactive: true });\n \n p.point(-8, 4, { interactive: true });\n \n p.text('P (-8, 4)', -7.5, 4, { size: 12, anchor: 'start', baseline: 'middle', interactive: true});\n \n return p.node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"{ \n const p = plotter({ width: 300, height: 300, axises: false });\n\n p.polygon([\n { x: 0, y: 8 },\n { x: 7, y: -4 },\n { x: -7, y: -4 },\n ]);\n \n p.polygon([\n { x: 0, y: -8 },\n { x: 7, y: 4 },\n { x: -7, y: 4 },\n ]);\n \n p.circle(0, 0, 8);\n \n p.circle(0, 0, 4);\n \n p.arrow(-5, -8, 0, 0, { stroke: 'purple'});\n \n p.text('The center', -5, -9, { stroke: 'purple', weight: 600 });\n \n return p.node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":576,"value":"{\n // curve and arcs\n \n const p = plotter();\n \n p.arc(4, 7, null, null, { startDeg: 45, endDeg: 135, r1: 2, r2: 3, fill: 'yellow', stroke: 'green' });\n \n p.arc(5, -4.5, null, null, { startDeg: 0, endDeg: 180, r1: 0, r2: 4, fill: 'white', stroke: 'red', width: 5 });\n \n p.circle(3, -3, 1);\n \n p.circle(7, -3, 1);\n \n p.circle(3, -3.5, 0.5, { fill: 'black', opacity: 1 });\n \n p.circle(7, -3.5, 0.5, { fill: 'black', opacity: 1 });\n \n p.polyline([\n { x: -3, y: 8 },\n { x: -1, y: 4 },\n { x: -8, y: -6 },\n ], { width: 0.5 });\n \n p.polyline([\n { x: -3, y: 8 },\n { x: -1, y: 4 },\n { x: -8, y: -6 },\n ], { stroke: 'green', width: 3, curve: true });\n \n return p.node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1882,"value":"md`### Interactive\nInteractive support has been added. More info soon...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":922,"value":"{\n const p2 = plotter();\n const calcLength = d => Math.sqrt((d.x2 - d.x1)**2 + (d.y2 - d.y1)**2);\n \n const s = p2.segment(7, -5, -6, 7, { \n stroke: 'magenta', \n width: 6, \n interactive: true, \n onChange: d => {\n console.log(calcLength(d));\n },\n });\n \n const p = p2.point(4, 4, { color: 'black', interactive: true });\n \n p2.arc(p.px, p.py, 0, Math.PI / 2, { r1: 3, r2: 1, fill: 'blue', interactive: true });\n \n p2.line(-2, -6, { width: 6, stroke: 'green', interactive: true });\n \n p2.square(-6, -6, 4, { width: 3, stroke: 'darkorange', fill: 'orange', interactive: true })\n \n p2.text('Hello world!', 4, -6, { size: 16, stroke: 'green', baseline: 'middle', interactive: true });\n \n \n return p2.node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"d3 = require('d3-selection@1', 'd3-transition@1', 'd3-drag@1', 'd3-interpolate@1', 'd3-scale@2', 'd3-axis@2', 'd3-shape@2', 'd3-array@2')\n// A simpler option would be\n// d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W43","stdlib":"1","titling":"auto"}} 30:"$2f:body"