2b:null 2c:["$","title",null,{"children":"RWKPlotLib | Bob Kerns | Observable"}] 31:Tf2a,svgRoot = ( { id, classNames, height, width, margin, graph }, { pWidth, pHeight, xScale, yScale, origin } ) => { const [graphId, cpId] = id ? [id, idGen(id)] : [idGen('chart-'), idGen('clip-')]; const cls = `chart ${classNames || ''}`; const yClip = 382; const root = svg``; d3.select(root) .select('defs') .append("clipPath") .attr("id", cpId) .append("rect") .attr("x", 0) .attr("y", 0) .attr('width', pWidth) .attr('height', pHeight); const clip = `url("#${cpId}")`; d3.select(root) .select('g.clip') .attr('clip-path', clip) .style('clip-path', clip) .style('--webkit-clip-path', clip); return root; }32:T4d2,addCursor = ( g, fmt, { height, pHeight, pWidth, margin, xScale, yScale, origin, graph } ) => { const path = ([x, y]) => { const p = d3.path(); p.moveTo(x, graph.y.min * yScale + origin.y); p.lineTo(x, graph.y.max * yScale + origin.y); p.moveTo(graph.x.min * xScale + origin.x, y); p.lineTo(graph.x.max * xScale + origin.x, y); return p; }; const cursor = g.select('g.cursor'); const show = p => cursor .selectAll('path') .data(p) .join('path') .attr("stroke", "red") .attr('d', d => path(d).toString()); const mouseLoc = evt => [ evt.layerX - margin.left, pHeight - evt.layerY + margin.top ]; const scaleLoc = ([x, y]) => [ (x - origin.x) / xScale, (y - origin.y) / yScale ]; const click = Generators.observe( change => (g.on('click', () => change(scaleLoc(mouseLoc(d3.event)))), null) ); const move = Generators.observe( change => ( g .call(() => change([0, 0])) .on('mousemove mouseenter', () => { const loc = mouseLoc(d3.event); change(scaleLoc(loc)); show([loc]); }) .on('mouseleave', () => show([])), null ) ); return { click, move }; }33:T787,addAxes = (axes, fmt, { height, pWidth, graph, pHeight, margin, origin }) => { const ax = (dSide, sa, sb, l, o) => s => (Array.isArray(s) ? s : [s]).map(v => { const side = v.side || dSide; switch (v.position) { case sa: return { ...v, offset: 0, side }; case 'center': return { ...v, offset: l / 2, side }; case 'origin': return { ...v, offset: o, side }; case sb: return { ...v, offset: l, side }; default: return { ...v, offset: 0, side }; } }); const xAx = ax('left', 'bottom', 'top', pHeight, origin.y); const yAx = ax('bottom', 'left', 'right', pWidth, origin.x); const axisSpecs = fmt.axes || {}; const axInfo = { x: xAx(axisSpecs.x || {}), y: yAx(axisSpecs.y || {}) }; axInfo.x.forEach(i => { const x = d3 .scaleLinear() .domain([graph.x.min, graph.x.max]) .range([0 - origin.x, pWidth - origin.x]); const xAxis = i.side === 'top' ? d3.axisTop() : d3.axisBottom(); xAxis.scale(x); if (i.ticks || i.format) { xAxis.ticks(i.ticks || 2, i.format); } axes .append("g") .attr("class", "x-axis axis") .attr( "transform", `translate(${margin.left + origin.x}, ${-margin.bottom + height - i.offset})` ) .call(xAxis); }); axInfo.y.forEach(i => { const y = d3 .scaleLinear() .domain([graph.y.max, graph.y.min]) .range([0 - origin.y, pHeight - origin.y]); const yAxis = i.side === 'right' ? d3.axisRight() : d3.axisLeft(); yAxis.scale(y); if (i.ticks || i.format) { yAxis.ticks(i.ticks || 2, i.format); } axes .append("g") .attr("class", "y-axis axis") .attr( "transform", `translate(${margin.left + i.offset}, ${margin.top + origin.y})` ) .call(yAxis); }); return axes; }34:T5f2,viewof plot = def`function plot(f, r, fmt = G): Plot a function _f_ over a range _r_, with formatting specifications _fmt_. Use \`viewof myLoc = plot(...)\` to track values via the mouse cursor. The values take the form of \`{move, click}\`, each being a generator producing values of the form \`[x, y]\`, expressed in the coordinates of the plot. `( // function plot(f, r, fmt = G) { const fns = (Array.isArray(f) ? f : [f]).map(f => typeof f === 'function' ? { f } : f ); const { height, width, margin, graph } = fmt; const pWidth = width - margin.left - margin.right; const pHeight = height - margin.top - margin.bottom; const xScale = pWidth / (graph.x.max - graph.x.min); const yScale = pHeight / (graph.y.max - graph.y.min); const origin = { x: -Math.min(graph.x.min, graph.x.max) * xScale, y: -Math.min(graph.y.min, graph.y.max) * yScale }; const root = svgRoot(fmt, { pWidth, pHeight, xScale, yScale, origin }); const domain = [...r]; d3.select(root) .select('g.plot') .call(addPlots, fmt, { fns, domain, graph, xScale, yScale }); d3.select(root) .select('g.axes') .call(addAxes, fmt, { height, pWidth, graph, pHeight, margin, origin }); d3.select(root).call( () => (root.value = addCursor(d3.select(root), fmt, { height, pWidth, graph, pHeight, xScale, yScale, margin, origin })) ); return root; } )35:T90f,plot_css = html``36:T4ad,{ const buttons = html`

Debug:

Hover mouse over the buttons to highlight the region of the previous chart. The displayed axes show what clipping is in effect.

`; const names = ['plot', 'background', 'clip', 'inset', 'panel', 'chart']; d3.select(buttons) .selectAll('div.buttonList') .on('mouseleave', () => { d3.selectAll(`.debug.enable`).classed('enable', false); d3.selectAll(`.debug.enable`).classed('active', false); }) .selectAll('button') .data(names, d => d) .join('button') .classed('debug debugButton', true) .each(function(d) { d3.select(this).classed(d, true); }) .text(d => d) .on('mouseenter', d => { d3.selectAll(`svg.debug .${d}`).classed('enable', true); d3.selectAll(`svg.debug.${d}`).classed('enable', true); d3.selectAll(`button.debugButton.${d}`).classed('active', true); }) .on('mouseleave', d => { d3.selectAll(`svg.debug .${d}`).classed('enable', false); d3.selectAll(`svg.debug.${d}`).classed('enable', false); d3.selectAll(`button.debugButton.${d}`).classed('active', false); }); return buttons; }37:[] 2f:{"id":"c02e6dce9eeeedb4","slug":"rwkplotlib","title":"RWKPlotLib","thumbnail":"46dd31ca737afee6129e0a772e75414724a7a65e4d3d727d445cfb0fc6009546","access_level":"public","create_time":"$D2019-11-28T03:30:36.567Z","update_time":"$D2020-07-11T01:59:20.029Z","view_time":null,"first_public_time":"$D2019-12-30T00:38:30.894Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a2a391e81ef70f60","login":"bobkerns","name":"Bob Kerns","avatar_url":"https://avatars-next.observableusercontent.com/d3d634f0561198d48f6c5a897f4009b95f14b0014fb7d85f3b6cc5415336b639","tier":"starter_2024"},"version":3786,"publish_version":3786,"role":null,"authored":false,"authors":[{"type":"individual","id":"c30fe465bb675dbe","login":"bobkerns","name":"Bob Kerns","avatar_url":"https://avatars-next.observableusercontent.com/d3d634f0561198d48f6c5a897f4009b95f14b0014fb7d85f3b6cc5415336b639","tier":null}],"members":[{"type":"individual","id":"c30fe465bb675dbe","login":"bobkerns","name":"Bob Kerns","avatar_url":"https://avatars-next.observableusercontent.com/d3d634f0561198d48f6c5a897f4009b95f14b0014fb7d85f3b6cc5415336b639","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"RWKPlotLib","cells":[{"id":0,"value":"md`# RWKPlotLib`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`## Usage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`\nThis is a 2D (currently) plotting library optimized for my usage model. It builds on d3, and provides plotting of multiple functions with simple control. It may or may not be better than other libraries, but I understand it, and can add capabilities as I need them.\n\nIt is a work-in-progress at this time.\n\nThe normal interface is via the plot(_data_, _format_) function.\n> _data_ is one or more specifications of functions to plot. These can be functions, or an object providing a function.\n\n> _format_ is an object describing how to lay out and present these functions. It is divided into several sections, as outlined in the underlying functions below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2797,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3512,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2817,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2840,"value":"addPlots = (\n g,\n { filter = () => true },\n { fns, domain, graph, xScale, yScale }\n) => {\n // Calculate the points once, filtering out undefined\n const points = f =>\n [...domain].flatMap(d => {\n if (filter(d)) {\n const v = f.f(d);\n if (v !== undefined) {\n return [[d, v]];\n }\n }\n return [];\n });\n\n return g\n .selectAll('path')\n .data(fns, (d, i) => fns.id || fns.title || i)\n .join('path')\n .attr('class', (f, i) => `${f.class || ''} fn fn-${i}`)\n .attr('d', f => {\n const x = d3\n .line()\n .curve(f.curve || graph.curve || d3.curveCardinal || d3.curveLinear)\n .x(d => d[0] * xScale)\n .y(d => d[1] * yScale);\n const p = points(f);\n return x(p);\n })\n .append(\"title\")\n .text((f, i) => f.title || f.id || `fn-${i}`);\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"viewof PP = {\n const fn = s => ({\n f: t => gaussian(t, 0, s),\n title: `𝜎 = ${s}`\n });\n return plot(\n [0.1, 0.25, 0.5, 0.75, 1.0, 1.5, 2.0, 3.0].map(fn),\n range(-8, 8, .1),\n {\n ...G,\n classNames: 'debug',\n graph: {\n x: { min: -8, max: 8 },\n y: { min: 0, max: 1 }\n },\n margin: {\n left: 30,\n right: 30,\n bottom: 25,\n top: 10\n },\n axis: {\n y: [\n { side: 'left', position: 'left' },\n { side: 'right', position: 'origin' },\n { side: 'right', position: 'right' }\n ]\n }\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3782,"value":"md`Position: ${PP.move}, click: ${PP.click}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3597,"value":"//map(PP.click, v => md`PP = [${v.map(d => d.toFixed(2)).join(', ')}]`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3765,"value":"//map(PP.move, v => md`PP = [${v.map(d => d.toFixed(2)).join(', ')}]`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3768,"value":"PP","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2889,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"G = {\n const height = width / (1 + Math.sqrt(5) / 2);\n const margin = {\n left: 15,\n top: 15,\n right: 15,\n bottom: 30\n };\n const graph = {\n x: { min: -8, max: 8 },\n y: { min: 0, max: 1 },\n style: \"fill:white;opacity:0.75;stroke:black;stroke-width:0.001\"\n };\n return {\n width,\n height,\n margin,\n graph,\n style: \"fill:rgb(224,250,250);stroke:black;\",\n xAxis: {\n offset: 0\n },\n axis: {\n y: { position: 'origin' }\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1700,"value":"G3 = ({\n ...G,\n graph: {\n ...G.graph,\n y: { min: 0, max: 60 },\n curve: d3.curveLinear\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1893,"value":"GSUM = ({\n ...G3,\n graph: {\n ...G3.graph,\n x: { min: 0, max: 5 },\n y: { min: 0, max: 60 }\n },\n yAxis: { offset: 0 }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`### Imported Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3445,"value":"import { def, view } from \"@bobkerns/def\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3464,"value":"import { range, idGen, map } from '@bobkerns/utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3470,"value":"import { gaussian } from '@bobkerns/rwkstats'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3232,"value":"import { table } from \"@tmcw/tables@513\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"