30:T1d4b,d3chartPN_ = function( svgNode /*container for reactive svg paths; in observablehq set it as this ( undefined || svg.node() )*/ ,dataXY /*ex.: [ { xy:aPN.asPointsList(h), nmHtml:'u_C(t)', color:'Blue' //color can be ovr. in ..Attrs as "stroke": "..." and/or defined/ovr in css (stroke .c0 {}) ,pathAttrs:{"stroke-width": 3.5, "stroke": "DarkBlue"} ,symbAttrs:{symb: "circle", //<- for .enter().append() //optional symb. for each datapoint r:5, //translate(x,y) for points is used , {} ... ] //css sel. for path: svg# g.lines g.lineXY.c path //css sel. for symb: svg# g.lines g.lineXY.c g.symbols .symb //attr stroke:color(i) and fill:"none" is set for g.lineXY.c (css can override it) //the last dataXY correspond to top svg line, with class "c0" and nmHtml in legend at left side //( actual dimensions and ranges for xy scales are rememberd in svg.select('g.axes').datum() ) //alternative to xy: [ { yh:aPN.asList(), h:, t_offs:, nmHtml:... // (x_i = i*h + t_offs) */ ,config_ = {} ){ let { /*domain*/ xMinMax_=[0,1], yMinMax_=[-1,1] /*size */,width_, height_/*if undef.: svgMaxWidth, 0.4*width_*/ /*margin*/,top_=25, right_=15, bottom_=25, left_=35 ,xAxisTxt_='t', xAxisTicksFm_="", yAxisTicksFm_="" /*ticksCount*/,xTicksCnt_, yTicksCnt_, /*auto if undef.*/ } = config_; if (!width_) width_ = svgMaxWidth if (!height_) height_ = 0.4*width_ let svg = d3.select(svgNode) if (svg.empty()) { /*AK - usefull for other nodes, not only svg*/ // Create SVG first time only and reuse it later for animations svg = d3.select(DOM.svg(width_, height_)) /**;console.log('\n create svg 1-st time:',svg.node())/**/ } let xScale = d3.scaleLinear().domain(xMinMax_).range([left_, width_ - right_]); let yScale = d3.scaleLinear().domain(yMinMax_).range([height_ - bottom_, top_]); let histDmRange; //reinitilize svg size and axies? if ( !(svg.select('g.axes').empty()) && (histDmRange=svg.select('g.axes').datum()) ) { let actDmRange=xScale.domain().concat(xScale.range(),yScale.domain(),yScale.range()) for (let i = histDmRange.length; i-- ; ) { if (actDmRange[i] !== histDmRange[i]) { //reinitilize svg svg.selectAll("*").remove(); /**;console.log('\n histDmRange',histDmRange,'\n actDmRange',actDmRange)/**/ break; } } } function xyScaled(d) { if (d.xy) return d.xy.map(xy_ => [xScale(xy_[0]), yScale(xy_[1])]) let t_offs = d.t_offs || 0, h = d.h; return d.yh.map((y,i) => [xScale(i*h + t_offs), yScale(y)]) } let line12 = d3.line() //.curve(d3.curveMonotoneX) //if smoothing function color(i) {return dataXY[i % dataXY.length].color /*or undef.*/ }; var lines = svg.select('g.lines'); if (lines.empty()) { // init svg background: svg.attr("width",width_).attr("height",height_).attr('viewBox', `0 0 ${width_} ${height_}`) /**;console.log('\n svg resized',svg.node())/**/ let axes = svg.append("g") .attr("class","axes") .datum(xScale.domain().concat(xScale.range(),yScale.domain(),yScale.range())) //to detect rescale let xAxis = g => g .attr("transform", `translate(0,${height_ - bottom_})`) .call(d3.axisBottom(xScale).tickFormat(d3.format(xAxisTicksFm_)).ticks(xTicksCnt_)) .call(g => g.selectAll(".tick line").clone() .attr("stroke-opacity", 0.2).attr("y1", -(height_ - bottom_ - top_))) let yAxis = g => g .attr("transform", `translate(${left_},0)`) .call(d3.axisLeft(yScale).tickFormat(d3.format(yAxisTicksFm_)).ticks(yTicksCnt_)) .call(g => g.selectAll(".tick line").clone() .attr("stroke-opacity", d => d === 0 ? null : 0.2).attr("x2", width_ - left_ - right_)) axes.append("g").attr("class","xAxis").call(xAxis); axes.append("text") // text label for the x axis .attr("transform",`translate(${width_ - right_ - 3}, ${(height_ - bottom_ - 3)})`) .style("text-anchor", "end") //start | middle | end .text(xAxisTxt_); axes.append("g").attr("class","yAxis").call(yAxis); let legendTxtColor = []; //legend texts and colors for (let i = dataXY.length; i--; ) { legendTxtColor.push({txt:`${(dataXY[i].nmHtml)||('_f_'+i)} `,color:color(i)}); } let legendPN = svg.append('foreignObject') .attr('x', left_) .attr('y', 0) .attr('width', width_ - left_ - right_).attr('height', height_) .append("xhtml:div") .attr("class", "legends") .selectAll(".legend") //empty selection .data(legendTxtColor) .join("span") //or .enter().append("span") .attr("class", (d,i) => `legend c${i}`) //"c0" for last line legend (first from left) .html( d => d.txt ) .style("color", d => d.color ) lines = svg.append('g').attr('class','lines'); }//init svg background lines.selectAll('.lineXY') .data(dataXY) .join( enter => enter.append('g') .attr("stroke", (d,i) => color(i)).attr("fill", "none") .attr('class', (d,i) => `lineXY c${dataXY.length - i -1}`) //"c0" for last line .append('path') .datum( d => xyScaled(d) ) //these scaled data are used also for symbols .attr("d", line12) //add attr and symbols to points .each(function(d,i) { //n - array [ //console.log('\n d',d,'\n i',i,'\n this',this)) for (let a in dataXY[i].pathAttrs) d3.select(this).attr(String(a),dataXY[i].pathAttrs[a]); let symbXY; if ((dataXY[i].symbAttrs) && (symbXY = dataXY[i].symbAttrs.symb)) { //console.log(this.parentNode) // d3.select(this.parentNode) .append('g').attr('class','symbols') .selectAll('.symb') .data(d) //d -> datum() of path .join(symbXY) //or .enter().append(symbXY) //for points of d .attr('transform', d => `translate(${d})`) //inner d .each( function() { //console.log('\n d',d,'\n i',i,'\n n',n,'\n this',this) for (let a in dataXY[i].symbAttrs) { if (a !== 'symb') d3.select(this).attr(String(a),dataXY[i].symbAttrs[a]); } }) .classed('symb',true) //important!: at the end (!) add class - see .selectAll('.symb') } }) //.each n(node)= , update => update //like enter, but replacing "append" to "select" .select('g path') // Update datum and translate symbols for old elements .datum( d => xyScaled(d) ) //scaled data used also for symbol .attr("d", line12) //add attr and symbols to points .each(function(d,i) { //n - array [ //console.log('\n d',d,'\n i',i,'\n this',this)) if ((dataXY[i].symbAttrs) && (dataXY[i].symbAttrs.symb)) { //console.log(this.parentNode) // d3.select(this.parentNode) .select('g.symbols') .selectAll('.symb') .data(d) //d -> datum() of path .attr('transform', d => `translate(${d})`) //inner d } }) //.each n(node)= ) //join() // union of entering and updating selection here... return svg.node(); }31:T695,md` Example - see also [02. Laplace transform and Z-transform](https://observablehq.com/@andrzejq/02-laplace-transform-and-z-transform) \`\`\`JS d3chartPN = function( svgNode /*container for reactive svg paths; in observablehq set it as this ( undefined || svg.node() )*/ ,dataXY /*see example*/ ,config_ = {} ){ let { /*domain*/ xMinMax_=[0,1], yMinMax_=[-1,1] /*size */,width_, height_/*if undef.: svgMaxWidth, 0.4*width_*/ /*margin*/,top_=25, right_=15, bottom_=25, left_=35 ,xAxisTxt_='t', xAxisTicksFm_="", yAxisTicksFm_="" /*ticksCount*/,xTicksCnt_, yTicksCnt_, /*auto if undef.*/ } = config_; ...\`\`\` dataXY example: \`\`\`JS [ { xy:aPN.asPointsList(h), nmHtml:'u_C(t)', color:'Blue' //color can be ovr. in ..Attrs as "stroke": "..." and/or defined/ovr in css (stroke .c0 {}) ,pathAttrs:{"stroke-width": 3.5, "stroke": "DarkBlue"} ,symbAttrs:{symb: "circle", //<- for .enter().append() //optional symb. for each datapoint r:5, //translate(x,y) for points is used , {} ... ] //css sel. for path: svg# g.lines g.lineXY.c path //css sel. for symb: svg# g.lines g.lineXY.c g.symbols .symb //attr stroke:color(i) and fill:"none" is set for g.lineXY.c (css can override it) //the last dataXY correspond to top svg line, with class "c0" and nmHtml in legend at left side //( actual dimensions and ranges for xy scales are rememberd in svg.select('g.axes').datum() ) //alternative to xy: [ { yh:aPN.asList(), h:, t_offs:, nmHtml:... // (x_i = i*h + t_offs) \`\`\` `32:T448,sliders_ = function (/*out: [val0 , ...] */ params_ /*= [ (only name is required, nlin:function(of slider value)) {name, attrStr:'other input range attr', htmlName, nlin}, {... ]*/, d3format_ = "<.3g" ) { //css path: form.sliders div.c //https://d3indepth.com/selections/ const form = html`
`; form.value = [] function setFormVal(d, i) {//console.log('\nd',d,'\ni',i,'\nval',form[d.name].valueAsNumber); let val = form[d.name].valueAsNumber; if (d.nlin) val = d.nlin(val); //nlin:f() form.value[i] = val; form['o'+d.name].value = d3.format(d3format_)(val); //echo to output } d3.select(form) .selectAll("div") .data(params_) /*static data - one-time .enter():*/ .enter().append("div") .attr("class", (d, i) => `c${d.name} c${i}`) .append(d => html` ${d.htmlLabel || d.name} = `) .on("input", (d, i) => { setFormVal(d, i) }) .each(setFormVal); return form; } //sliders_33:[] 2e:{"title":"Chart template()","cells":[{"id":0,"value":"md`# Chart template()`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md` \\`\\`\\`JS\n/* > > > use in import: > > > */ import {d3chartPN_, svgMaxWidth, sliders_} from \"@andrzejq/chart-template\"\n\\`\\`\\` `","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"svgMaxWidth = Math.min(870,width);","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`### Sliders template`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`\nExample - see [04. PN generalized time domain functions](https://observablehq.com/@andrzejq/discrete-representations-of-generalized-time-domain-func)\n\n\\`\\`\\`JS\nviewof h1h2T0 = sliders_(\n [ /*params_ - (only name is required) */\n {name:'h1', attrStr:\\`step=\"0.001\" min=\"0.05\" max=\"0.3\" value=\"0.14\"\\`, htmlLabel:'h₁'}\n ,{name:'h2', attrStr:\\`step=\"0.001\" min=\"0.05\" max=\"0.5\" value=\"0.20\"\\`, htmlLabel:'h₂'}\n ,{name:'T0', attrStr:\\`step=\"0.0001\" min=\\${nlin2.inv(-0.1).toFixed(4)} max=\\${nlin2.inv(9).toFixed(4)} \n value=\\${nlin2.inv(-0.03).toFixed(4)}\\`, htmlLabel:'T₀', nlin:nlin2}\n ]\n ,/*d3format_*/ \"<.3g\"\n);\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`### Example - chart & sliders`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"sc = (t) => Math.sqrt(t+1)*Math.cos(t)","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"chart_PNT0 = d3chartPN_(this, outXY, {xMinMax_:[0,25], yMinMax_:[-8,8]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"viewof h1h2T0 = sliders_(\n [ /*params_ - (only name is required) */\n {name:'h1', attrStr:`step=\"0.001\" min=\"0.05\" max=\"0.4\" value=\"0.31\"`, htmlLabel:'h₁'}\n ,{name:'h2', attrStr:`step=\"0.001\" min=\"0.05\" max=\"0.4\" value=\"0.29\"`, htmlLabel:'h₂'}\n ,{name:'T0', attrStr:`step=\"0.0001\" min=${nlin2.inv(-0.5).toFixed(4)} max=${nlin2.inv(9).toFixed(4)} \n value=${nlin2.inv(1.5).toFixed(4)}`, htmlLabel:'T₀', nlin:nlin2}\n ]\n ,/*d3format_*/ \"<.3g\"\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"outXY = {\n let [h1, h2, T0] = h1h2T0;\n let chart_y = [];\n chart_y[0] =\n { xy: d3.range(64).map(i => [i*h1, sc(i*h1)])\n ,nmHtml:` ‒○‒ sc(t)|_{h₁`\n ,color:colors_[0]\n ,pathAttrs:{\"stroke-width\": 1.5} \n ,symbAttrs:{symb: \"circle\", r:3, \"stroke-width\": 1}\n }\n chart_y[1] =\n { yh: d3.range(64).map(i => sc(i*h2)), h:h2, t_offs:T0\n ,nmHtml:` ‒-‒ sc(t - T₀)|_h₂`\n ,color:colors_[1]\n ,pathAttrs:{\"stroke-width\": 3} \n }\n return (chart_y.reverse());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"html`(css)
\n}