function plot (fns, [xmin, xmax], [ymin, ymax], params = {}) { const S = 250; const pad = { top: 50, le: 60, ri: 10, bot: 10 }; const W = S + pad.le + pad.ri; const H = S + pad.top + pad.bot; const svg = d3.select(DOM.svg(W, H)); const el = svg.node(); const fmt = d3.format('.3'); /* function fmt (x) { x = x*16; if (!x) return '0'; const d = Math.abs(gcd(x, 16)); return `${x/d}/${16/d} π`; }*/ function decorate_axis (axis) { return axis.tickSize(4).tickPadding(8).tickFormat(fmt) } function decorate_label (label) { label .style('text-anchor', 'middle') .style('font-weight', 'bold') .style('font-family', 'sans-serif') .attr('font-size', 14) } if (params.xLabel) svg.append('text').text(params.xLabel).call(decorate_label) .attr('transform', `translate(${pad.le + (W-pad.ri-pad.le)/2} 15)`) if (params.yLabel) svg.append('text').text(params.yLabel).call(decorate_label) .attr('transform', `translate(25 ${pad.top + (H-pad.top-pad.bot)/2}) rotate(-90)`) // scales const xScale = d3.scaleLinear().domain([xmin, xmax]).range([0, W - pad.ri - pad.le]).clamp(true) const yScale = d3.scaleLinear().domain([ymin, ymax]).range([0, H - pad.top - pad.bot]).clamp(true) // axes const xAxis = decorate_axis(d3.axisTop(xScale)).ticks(5) const yAxis = decorate_axis(d3.axisLeft(yScale)).ticks(5) const g = svg.append('g').attr('transform', `translate(${pad.le} ${pad.top})`); // (fold,skew) square g.append('g').call(xAxis) g.append('g').call(yAxis) // draw line const line = d3.line(); for (var o, i = 0; o = fns[i]; i++) { if (typeof o == 'function') o = { fn: o }; const { fn, stroke } = fns[i] = _.defaults(o, { stroke: '#000', }); const data = []; for (var px = 0; px < W - pad.ri - pad.le; px++) { data.push([px, yScale(fn(xScale.invert(px)))]); } g.append('path').attr('d', line(data)).attr('fill', 'none').attr('stroke', stroke).attr('stroke-width', 2); } return html`

${el}

${o.desc}

`; }