2d:null 2e:["$","title",null,{"children":"Reusable Graphics And GrObs | Khris Griffis | Observable"}] 33:T802,md` ### Design All of the graphics objects contained within this notebook can be called via their constructor mechanisms. Because all objects are created using the \`\`class\`\` syntax, any object can be extended using the \`\`extends\`\` syntax. ~~~JS import {BivariateContinuousAxes} from "${document.referrer.replace('https://observablehq.com/','')}" class AnimatedBivariateAxes extends BivariateContinuosAxes { constructor(...args) { super(...args); // extension constructor code } // ... extension methods } ~~~ These objects contain a method, \`\`here()\`\`, which returns a styled \`\`

\`\` containing all the GrOb's DOM elements. ### Usage Look at the constructors for each type, but also look at the example usage, for the best usage information. In general, each object will have at 2 step process for drawing. The first will result in instantiation, typically from calling the object's constructor method, and the second will be the rendering step (\`\`here()\`\`) to tell Observable where to place the figure; Calling the rendering method, \`\`here()\`\` returns the GrOb's parent node (\`\`

\`\`). Thus we can modify the parts of the node as we see fit before finally showing the graphic. For example: ~~~JS import {BivariateContinuousAxes} from "${document.referrer.replace('https://observablehq.com/','')}" import {utils} from "${document.referrer.replace('https://observablehq.com/','')}" // Dimensions of the plot const h = 600; const w = width; // CONSTRUCT const ax1 = new BivariateContinuousAxes("axes1",w,h); // Make up some data const datums = d3.range(3).map( i => { let x = d3.range(200).map( v => v/1000-0.1 ); let y = x.map( v => 2*(Math.sin(2*Math.PI*(i+1)*2*v)+3*i) ); return utils.BivariateDatum(x,y,"data"+i,"lines",{width:5}) }); // plot the data, use newPlot() on array or single datum. ax1.newPlot(datums[0]); // append new lines onto the plot ax1.appendPlot(datums.slice(1)); // set some axes labels ax1.YLabel = "Amplitude"; ax1.XLabel = "Time"; // RENDER ax1.here(); ~~~ --- `34:T4e6,labels = { // A random animation generator to show some of the visual controls let prev = plot1.YAxisStatus.visible; let limit = 5; const labs = ["","Amplitude"]; const scales = ["logarithmic","linear"]; while (true) { const status = Math.round((Math.sin(now / 2000) + 1) /2); if (status != prev) { let newColor = randomColor(); prev = status; // random data to plot let n = Math.floor(Math.random()*100); let newdat = utils.BivariateDatum( d3.range(n).map( v => v*2 ), d3.range(n).map( v => Math.random() ), "line1","lines+markers", {color: newColor, width: 1}, {color: newColor, size: Math.floor(Math.random()*12)+1} ); // only allow 5 traces before redrawing if (plot1.nData >= limit) { d3.timeout( () => plot1.newPlot(newdat), 800); } else { d3.timeout( () => plot1.appendPlot(newdat), 800); } // set the y-grid visibility plot1.YGrid = status; // set the label values plot1.YLabel = labs[status]; // set the y axis visibility plot1.YAxisVisible = status; plot1.XScale = scales[status]; }; yield {"labs":labs[status],"scale":scales[status]}; } }35:T4db6,class BivariateContinuousAxes { // TODO: // Allow for line interpolator to be set to a custom function or one of d3.interpolation. constructor(id,w,h,parent) { let name = id || "AXES"; // Setup layout property for updating in the future this.layout = { width: w || 600, height: h || 360, margin: {t: 15, r: 25, b: 40, l: 60}, font: {family: "Times New Roman",size: 20}, yaxis: { title: "", zerolinecolor:"rgba(24,24,24,0.6)", zeroline: true, scale: "linear", base: 10, grid: false, nTicks: 5, visible: true }, xaxis: { title: "", zerolinecolor:"rgba(24,24,24,0.6)", zeroline: true, scale: "linear", base: 10, grid: false, nTicks: 5, visible: true }, id: name }; let mar = this.layout.margin; this.layout.extents = { width: this.layout.width - mar.l - mar.r, height: this.layout.height - mar.t - mar.b }; // Select the parent node if not a d3 selection already. // By default, we will put everything inside a div for easier placement. const inputParent = parent || document.createElement("div"); this.parent = d3.select(inputParent) .attr("id", name) .attr("class", "container") .attr("width", `${this.layout.width}px`) .attr("height", `${this.layout.height}px`) .style("width", `${this.layout.width}px`) .style("height", `${this.layout.height}px`) .style("display","block"); // Construct the SVG elements: Axis this.axis = this.parent.append("svg") .attr("width", `${this.layout.width}px`) .attr("height", `${this.layout.height}px`) .attr("class", "svg-container") .attr("xmlns", "http://www.w3.org/2000/svg") .append("g") .attr("transform", `translate(${mar.l},${mar.t})`); this.XAxis = { container: this.axis.append("g") .attr("transform", `translate(0,${this.layout.extents.height})`) .attr("class", "axes x-axis") .attr("opacity", parseFloat(+this.layout.xaxis.visible)), Label: this.axis.append("g") .attr("class", "x-label") }; this.YAxis = { container: this.axis.append("g") .attr("class", "axes y-axis") .attr("opacity", parseFloat(+this.layout.yaxis.visible)), Label: this.axis.append("g") .attr("class", "y-label") }; // Construct canvas element: LINES this.lines = {}; this.lines.canvas = this.parent.append("canvas") .attr("width", `${this.layout.width}px`) .attr("height", `${this.layout.height}px`) .style("margin", `${mar.t}px ${mar.r}px ${mar.b+1}px ${mar.l+1}px`) .attr("class", "canvas-container lines"); this.lines.context = this.lines.canvas.node().getContext("2d"); // Construct canvas element: POINTS this.points = {}; this.points.canvas = this.parent.append("canvas") .attr("width", `${this.layout.width}px`) .attr("height", `${this.layout.height}px`) .style("margin", `${mar.t}px ${mar.r}px ${mar.b+1}px ${mar.l+1}px`) .attr("class", "canvas-container points"); this.points.context = this.points.canvas.node().getContext("2d"); // Clip the contexts to prevent overflow this.lines.context.rect(1,1,this.layout.extents.width-2,this.layout.extents.height-2); this.lines.context.clip(); this.lines.context.save(); this.points.context.rect(1,1,this.layout.extents.width-2,this.layout.extents.height-2); this.points.context.clip(); this.points.context.save(); // Create a css element for updating css otf this.style = document.getElementById(name+"-style"); if (this.style === null) { this.style = document.createElement("style"); this.style.type = "text/css"; this.style.id = name+"-style"; // append to head of document document.getElementsByTagName("head")[0].appendChild(this.style); } this.style.innerHTML = this.CSS; // Initialize data as an empty array this.data = null; // draw this.draw(); } // ---> End Constructor // GET/SET ---------------------------------------------------------------------| get CSS() { return ` #${this.layout.id} .axes text { font-family: ${this.layout.font.family} !important; font-size: ${this.layout.font.size*0.9}pt !important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #${this.layout.id} .axes line { stroke-opacity: 0.6 !important; stroke: rgb(60,60,60) !important; stroke-width: 2px !important; shape-rendering: crispEdges !important; } #${this.layout.id} .canvas-container, #${this.layout.id} .svg-container { position: absolute !important; background-color: transparent !important; } #${this.layout.id} .canvas-container.lines { z-index: 100 !important; } #${this.layout.id} .canvas-container.points{ z-index: 101 !important; } #${this.layout.id} .x-label, #${this.layout.id} .y-label { font-family: ${this.layout.font.family} !important; font-size: ${this.layout.font.size}pt !important; } `; } get domains() { // Get the data domains if (!this.dataBound) { return {x:[0,1],y:[0,1]}; } let x,y; if (this.XScale == "logarithmic") { x = d3.extent(d3.merge(this.data.map( (d) => d.x )).filter( (v) => v > 0 )) .map( (v,i,ar) => v + (v<0 ? 0 : this.diff(ar)*0.01) ); } else { x = d3.extent( d3.merge(this.data.map( (d) => d.x ))) .map( (v,i,ar) => v + (!i ? -this.diff(ar)*0.05 : this.diff(ar)*0.05) ); } if (this.YScale == "logarithmic") { y = d3.extent(d3.merge(this.data.map( (d) => d.y )).filter( (v) => v > 0 )) .map( (v,i,ar) => v + (v<0 ? 0 : this.diff(ar)*0.01) ); } else { y = d3.extent(d3.merge(this.data.map( (d) => d.y ))) .map( (v,i,ar) => v + (!i ? -this.diff(ar)*0.05 : this.diff(ar)*0.05) ); } return {x:x,y:y}; } get xScale() { // Get the X axis scale let xs = (this.XScale === "logarithmic") ? d3.scaleLog().base(this.layout.xaxis.base) : d3.scaleLinear(); xs = xs .range([0,this.layout.extents.width]) .domain(this.domains.x) .nice(); return xs; } get yScale() { // Get the Y axis scale let ys = (this.YScale === "logarithmic") ? d3.scaleLog().base(this.layout.yaxis.base) : d3.scaleLinear(); ys = ys .range([this.layout.extents.height, 0]) .domain(this.domains.y) .nice(); return ys; } get xAxis() { return d3.axisBottom(this.xScale).ticks(this.layout.xaxis.nTicks); } get yAxis() { return d3.axisLeft(this.yScale).ticks(this.layout.yaxis.nTicks); } get XLabel() {return this.layout.xaxis.title;} get YLabel() {return this.layout.yaxis.title;} get XAxisStatus() {return this.layout.xaxis;} get YAxisStatus() {return this.layout.yaxis;} get XGrid() {return this.layout.xaxis.grid;} get YGrid() {return this.layout.yaxis.grid;} get XZero() {return this.layout.xaxis.zeroline;} get YZero() {return this.layout.yaxis.zeroline;} get XScale() {return this.layout.xaxis.scale;} get YScale() {return this.layout.yaxis.scale;} get XBase() {return this.layout.xaxis.base;} get YBase() {return this.layout.yaxis.base;} get XScaler() { if (this.XScale === "linear") { return ""; } const base = this.XBase; const logBase = (n, base) => Math.log(n) / Math.log(base); return (x) => { const e = logBase(x); if (e !== Math.floor(e)) return; // Ignore non-exact power return `${base}${(e + "").replace(/./g, c => "⁰¹²³⁴⁵⁶⁷⁸⁹"[c] || "⁻")}`; } } get YScaler() { if (this.YScale === "linear") { return ""; } const base = this.YBase; console.log("base",base) const logBase = (n, base) => Math.log(n) / Math.log(base); return (x) => { const e = logBase(x); if (e !== Math.floor(e)) return; // Ignore non-exact power return `${base}${(e + "").replace(/./g, c => "⁰¹²³⁴⁵⁶⁷⁸⁹"[c] || "⁻")}`; } } get dataBound() { const isNull = this.data === null; const isEmpty = Array.isArray(this.data) ? !this.data.length : false; if (isNull) return false; if (isEmpty) return false; return true; } get nData() { return this.dataBound ? this.data.length : 0 ; } set YLabel(st) { this.layout.yaxis.title = st; this.YAxis.Label.call( (g) => this.drawLabel(this,g) ); } set XLabel(st) { this.layout.xaxis.title = st; this.XAxis.Label.call( (g) => this.drawLabel(this,g) ); } set XGrid(status) { const isOn = this.toBool(status); this.layout.xaxis.grid = isOn; // For now, if changing grids, force a redraw this.draw(); } set YGrid(status) { const isOn = this.toBool(status); this.layout.yaxis.grid = isOn; // For now, if changing grids, force a redraw this.draw(); } set XZero(status) { const isOn = this.toBool(status); this.layout.xaxis.zeroline = isOn; // For now, if changing grids, force a redraw this.draw(); } set YZero(status) { const isOn = this.toBool(status); this.layout.yaxis.zeroline = isOn; // For now, if changing grids, force a redraw this.draw(); } set XScale(status) { const type = this.toScaleType(status); this.updateLayout({"xaxis":{"scale":type}}); } set XBase(base) { base = base || 10; this.updateLayout({"xaxis":{"base":base}}); } set YScale(status) { const type = this.toScaleType(status); this.updateLayout({"yaxis":{"scale":type}}); } set XBase(base) { base = base || 10; this.updateLayout({"yaxis":{"base":base}}); } // TODO: // 1) Need setLineColor method. accepts scalar (1x3) of rgb values for all lines or // (Nx3) where N == this.data.length; set XAxisVisible(status) { const isOn = this.toBool(status); this.layout.xaxis.visible = isOn; this.XAxis.container .transition() .duration(250) .attr("opacity", parseFloat(+isOn)); } set YAxisVisible(status) { const isOn = this.toBool(status); this.layout.yaxis.visible = isOn; this.YAxis.container .transition() .duration(250) .attr("opacity", parseFloat(+isOn)); } // Methods ---------------------------------------------------------------------| here() { // Returns parent node for displaying return this.parent.node(); } // END here() ---------------| updateLayout(layout) { // layout object gets mapped to this.layout. layout does not need all properties for (let prop in layout) { if (!layout.hasOwnProperty(prop)) continue; if (typeof layout[prop] === "object") { for (let prec in layout[prop]) { this.layout[prop][prec] = layout[prop][prec]; } } else { this.layout[prop] = layout[prop]; } } // update styles this.style.innerHTML = this.CSS; // redraw this.draw(); } // END updateLayout() ---------------| drawLabel(obj,g){ // draw axes labels //const t = d3.transition().duration(1000); const axClass = g.attr("class"); let whichAx = axClass === "y-label"? "y-axis" : "x-axis"; // join new data let gLab = g.selectAll("text") .data([{label:obj.layout[whichAx.replace(/[^0-9a-z]/gi,"")].title}]); // remove unused gLab.exit().remove(); let gLabEnter = gLab.enter(); let pos = 0; if (whichAx === "y-axis") { pos += -obj.layout.extents.height*12/13; gLabEnter.append("text") .attr("transform", "rotate(-90)") .attr("x", pos) .attr("dy", 20) .attr("fill", "rgba(30,30,30,0.2)") .attr("text-anchor","left") .attr("alignment-baseline","baseline"); } else { pos += obj.layout.extents.height/13; gLabEnter.append("text") .attr("y", obj.layout.extents.height-5) .attr("x", pos) .attr("fill", "rgba(30,30,30,0.2)") .attr("text-anchor","left") .attr("alignment-baseline","baseline"); } // ENTER + UPDATE gLab.merge(gLabEnter) .text(d => d.label); } // END drawLabel() ---------------| bindData(inputData) { // Return a promise when data is bound var obj = this; return new Promise( (rv,rj) => { try { obj.data = inputData; } catch(ee) { rj(ee); } rv(true); } ); } // END bindData() ----------------| newPlot(data) { data = Array.isArray(data) ? data : [data]; this.bindData(data).then( () => this.draw() ); } appendPlot(data) { let newData = this.data; let appendingData = Array.isArray(data) ? data : [data]; newData = newData.concat(data); this.bindData(newData).then( () => this.draw() ); } draw() { // Use draw to clean and replot all available data let obj = this; // Labels this.XAxis.Label.call( (g) => obj.drawLabel(obj,g) ); this.YAxis.Label.call( (g) => obj.drawLabel(obj,g) ); // Axes this.XAxis.container.transition().duration(100).call( this.xAxis ); this.YAxis.container.transition().duration(100).call( this.yAxis ); // Clear plots this.lines.context.clearRect(0,0,this.layout.extents.width,this.layout.extents.height); this.points.context.clearRect(0,0,this.layout.extents.width,this.layout.extents.height); // Configure Grids this.placeGrids(); // Configure Zeros this.placeZeros(); // Plot data this.placeStaticLines(); this.placeStaticPoints(); } // END draw() -------------------| placeGrids() { const ctx = this.lines.context; // Update Grid------------------------------------------------------------------------------- GRID > if (this.layout.yaxis.grid){ // draw y grid (horizontal) const yticks = this.yAxis.scale().ticks(this.layout.yaxis.nTicks); ctx.restore(); for (let yy in yticks){ ctx.beginPath(); ctx.setLineDash(this.strokeType("solid")); ctx.moveTo(0,this.yScale(yticks[yy]));//X=min,Y=tick ctx.lineTo(this.layout.extents.width, this.yScale(yticks[yy])); ctx.strokeStyle = "rgba(10,10,40,0.1)"; ctx.lineWidth = 1; ctx.stroke(); } ctx.save(); } if (this.layout.xaxis.grid){ // draw x grids (vertical) const xticks = this.xAxis.scale().ticks(this.layout.xaxis.nTicks); ctx.restore(); for (let xx in xticks){ ctx.beginPath(); ctx.setLineDash(this.strokeType("solid")); ctx.moveTo(this.xScale(xticks[xx]), 0);//X=tick,y=min ctx.lineTo(this.xScale(xticks[xx]), this.layout.extents.height); ctx.strokeStyle = "rgba(10,10,40,0.1)"; ctx.lineWidth = 1; ctx.stroke(); } ctx.save(); } } placeZeros() { const ctx = this.lines.context; // Update Zeros -------------------------------------------------------------------------- ZERO > if (this.layout.yaxis.zeroline || this.layout.xaxis.zeroline) { // draw zero lines if (this.layout.yaxis.zeroline){ // draw y zero (horizontal) ctx.restore(); ctx.beginPath(); ctx.setLineDash(this.strokeType("solid")); ctx.moveTo(0,this.yScale(0)); ctx.lineTo(this.layout.extents.width, this.yScale(0)); ctx.strokeStyle = this.layout.yaxis.zerolinecolor; ctx.lineWidth = 1.5; ctx.stroke(); ctx.save(); } if (this.layout.xaxis.zeroline){ // draw x zero (vertical) ctx.restore(); ctx.beginPath(); ctx.setLineDash(this.strokeType("solid")); ctx.moveTo(this.xScale(0), 0); ctx.lineTo(this.xScale(0), this.layout.extents.height); ctx.strokeStyle = this.layout.xaxis.zerolinecolor; ctx.lineWidth = 1.5; ctx.stroke(); ctx.save(); } } } placeStaticLines() { // Don't continue if no data is bound if (!this.dataBound) { return; } // get the context const ctx = this.lines.context; const lineGen = d3.line() .x( d => this.xScale(d.X) ) .y( d => this.yScale(d.Y) ) .curve(d3.curveLinear) .context(ctx); // DATA -------------------------------------------------------------------------- DATA > this.data.forEach( dat => { if(!/lines/gi.test(dat.mode)){ return; } ctx.beginPath(); lineGen( dat.x.map( (x,i) => ({"X":x, "Y":dat.y[i]}) ) ); ctx.lineWidth = dat.line.width; ctx.lineCap="round"; ctx.setLineDash(this.strokeType(dat.line.style).map( v => v )); ctx.strokeStyle = this.rgb2A(dat.line.color, dat.line.hasOwnProperty("opacity") ? dat.line.opacity : 1); ctx.shadowOffsetX = dat.line.width/2; ctx.shadowOffsetY = dat.line.width*2/3; ctx.shadowBlur = 4; ctx.shadowColor = "rgba(104, 104, 104, 0.12)"; ctx.stroke(); }); } placeStaticPoints() { // Don't continue if no data is bound if (!this.dataBound) { return; } // get the context const ctx = this.points.context; //points drawn to scales let pointGen = d3.symbol().context(ctx); this.data.forEach( dat => { // each d in elems contains the stored data if(!/markers/gi.test(dat.mode)){ return; } dat.x.map( (v,i) => { let d = {x:v,y:dat.y[i]}; ctx.save(); ctx.fillStyle = this.rgb2A(dat.marker.color, dat.marker.hasOwnProperty("opacity") ? dat.marker.opacity : 1); ctx.translate(this.xScale(d.x),this.yScale(d.y)); ctx.beginPath(); pointGen .type(this.markerType(dat.marker.symbol)) .size(dat.marker.size**2)(d); ctx.closePath(); ctx.fill(); ctx.restore(); }); }); } // STATIC METHODS // TODO: // Update to use static staticMethod() syntax and to set calls to this.constructor.saticMethod(); diff(arr) { let i = 0; let result = []; while (i < arr.length-1) { result.push(arr[++i] - arr[i-1]); } return result; } rgb2A(col,opc) { let rgb = col.split(",").map( v => v.replace(/\D/g,"") ); return `rgba(${rgb.slice(0,3).concat(opc.toString()).join(",")})` } strokeType(type) { switch (type.toLowerCase()) { case "solid": return [0]; case "dashed": return [18,12]; case "dotted": return [2,8]; case "dashed-dotted": return [18,10,1,8,1,10]; } } markerType(type){ type = type || "circle"; switch (type.toLowerCase()) { case "cross": return d3.symbolCross; case "diamond": return d3.symbolDiamond; case "square": return d3.symbolSquare; case "star": return d3.symbolStar; case "y": return d3.symbolWye; case "triangle": return d3.symbolTriangle; default: // circle is default if type is not there return d3.symbolCircle; } } toBool(status) { const isCharOn = status === "on"; const isNumOn = status === 1; const isBoolOn = status === true; return isCharOn || isNumOn || isBoolOn; } toScaleType(type) { type = type || "logarithmic"; let t = type.toLowerCase(); return t.startsWith('lo') ? "logarithmic" : "linear"; } }36:T7f6,class componentContainer { /** * componentContainer: holds basic information about the component being * constructed. * */ constructor( { parent, // svg node location, // pixels in x (vertical) or y (horizontal) id = this.constructor.name, orientation = "vertical", orientationDomain, // [0,1]: figures data domain. if vertical ==> d3.extent(y) orientationSpace, // [height-margin.top, margin.bottom] for scale alpha = 1 } = {} ) { this.parent = d3.select(parent); this.Domain = orientationDomain; this.Range = orientationSpace; this.id = id; this.orientation = orientation.toLowerCase(); this.location = location; // validate inputs alpha = alpha <= 0? 0 : (alpha > 1? 1 : alpha); // construct g contianer const translation = this.orientation === "vertical"? `${location},0`: `0,${location}`; this.container = this.parent.append("g") .attr("transform", `translate(${translation})`) .attr("id", this.id) .attr("opacity", alpha); } // GETTERS / SETTERS -----------------------------------------------------------------------||| get parentDims() { return [parseFloat(this.parent.attr("width")),parseFloat(this.parent.attr("height"))]; } get Domain() { return this._Domain; } get scale() { return d3.scaleLinear().domain(this.Domain).range(this.Range); } set Domain(dom) { this._Domain = dom; } set alpha(val) { val = val < 0? 0 : (val > 1? 1 : val); this.container.attr("opacity", val); } // PUBLIC METHODS -----------------------------------------------------------------------||| // STATIC METHODS -----------------------------------------------------------------------||| static diff(arr) { if (!arr.length) { return 0; } let i = 0; let result = []; while (i < arr.length-1) { result.push(arr[++i] - arr[i-1]); } return result; } }37:T1524,class swarm extends componentContainer { constructor( { name, data, radius = 3, // point radius color = "rgb(222, 235, 247)" } = {}, ...containerArgs ) { super(...containerArgs); this.id = name || this.constructor.name; this._data = data; this.radius = radius; this.color = color; this.circle = this.container .selectAll(".points") .data(this.data); const isVert = this.isVert; const loc = this.location; // if isVer data.a = y, else data.a = x this.circle .attr("cx", d => {return isVert? d.y : d.x} ) .attr("cy", d => {return isVert? d.x : d.y} ); this.circle.enter() .append("circle") .attr("r",this.radius) .attr("fill", this.color) .attr("cx", d => {return isVert? d.y : d.x} ) .attr("cy", d => {return isVert? d.x : d.y} ) .attr("class", "points"); this.circle.exit().remove(); } // GETTERS / SETTERS -----------------------------------------------------------------------||| get data() { // Use modified dodger from @mbostock/d3-beeswarm-ii and // @ojassvi/beeswarm-with-dodge-and-transitions-log-scale const r = this.radius; const r2 = this.radius**2; const pad = 1.5; const diam = r * 2 + pad; const epsilon = 1e-3; let head = null, tail = null; const S = this.scale; const circles = this._data.map( v => ({x: S(v)}) ).sort((u,v) => u.x - v.x); // Returns true if circle ⟨x,y⟩ intersects with any circle in the queue. function intersects(x, y) { let a = head; while (a) { if ((diam - epsilon) ** 2 > (a.x - x) ** 2 + (a.y - y) ** 2) { return true; } a = a.next; } return false; } // Place each circle sequentially. for (const b of circles) { // Remove circles from the queue that can’t intersect the new circle b. while (head && head.x < b.x - (diam)) head = head.next; // Choose the minimum non-intersecting tangent. if (intersects(b.x, b.y = 0)) { let a = head; b.y = Infinity; do { let y1 = a.y + Math.sqrt((diam) ** 2 - (a.x - b.x) ** 2); let y2 = a.y - Math.sqrt((diam) ** 2 - (a.x - b.x) ** 2); if (Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1; if (Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2; a = a.next; } while (a); } // Add b to the queue. b.next = null; if (head === null) head = tail = b; else tail = tail.next = b; } return circles; } set data(d) { this._data = d; } get isVert() { return this.orientation == "vertical"; } // PUBLIC METHODS -----------------------------------------------------------------------||| recolor(color) { this.color = color; } update() { const t = d3.transition().duration(600); // draw const isVert = this.isVert; this.circle = this.container.selectAll(".points") .data(this.data) .join( enter => enter.append("circle") .attr("r",this.radius) .attr("fill", this.color) .attr("class", "points") .attr("cx", d => 0 ) .attr("cy", d => 0 ) .transition(t) .attr("cx", d => {return isVert? d.y : d.x} ) .attr("cy", d => {return isVert? d.x : d.y} ), update => update.call(text => text.transition(t) .attr("r",this.radius) .attr("fill", this.color) .attr("class", "points") .attr("cx", d => {return isVert? d.y : d.x} ) .attr("cy", d => {return isVert? d.x : d.y} ) ), exit => exit.call( text => text.transition(t) .attr("cx", d => 0 ) .attr("cy", d => 0 ) .remove() ) ); /* .join( enter => enter.append("text") .attr("class", "title") .attr("y", -20) .attr("x", 0) .attr("fill", "rgba(20,20,20,1)") .attr("text-anchor","midlle") .attr("alignment-baseline","baseline") .text(d => d.String), update => update.call( text => text.text(d => d.String) ), exit => exit.call( text => text.remove() ) ) .call(text => text .attr("y", 5) .attr("x", ext.width/2) ); const newCircle = this.circle.enter() .append("circle") .attr("r",this.radius) .attr("fill", this.color) .attr("class", "points") .attr("cx", d => 0 ) .attr("cy", d => 0 ) .transition(t) .attr("cx", d => {return isVert? d.y : d.x} ) .attr("cy", d => {return isVert? d.x : d.y} ); this.circle.exit() .transition(t) .attr("cx", d => 0 ) .attr("cy", d => 0 ) .remove(); this.circle = this.circle.merge(newCircle) .attr("r",this.radius) .attr("fill", this.color) .attr("class", "points") .transition(t) .attr("cx", d => {return isVert? d.y : d.x} ) .attr("cy", d => {return isVert? d.x : d.y} ); */ } // STATIC METHODS -----------------------------------------------------------------------||| }38:T739,swarmTest = { const height = 600; // create svg element const testSVG = DOM.svg(width,height); // fabricate some data const data = [ d3.range(70).map(v=>Math.random()), d3.range(125).map(v=>Math.random()*2), d3.range(320).map(v=>Math.random()*5) ]; // setup initializing values const oDom = d3.extent(data.flat(2)); // make plot horizontal (vertical is default) const orientation = "vertical" // I'm make 3 swarms, so let's draw them into quadrants. Could use a d3.scaleXXX here but I'm lazy. const swarmLocations = orientation === "vertical"? [width/4+10,width/2,width/4*3-10] : [height/4+10,height/2,height/4*3-10]; // Lets provide all swarms with the appropriate dimensions for the chosen orientation. // NOTE: using margins: t:10,r:10,b:10,l:10 const ospace = orientation === "vertical"? [height-10,10] : [10,width-10]; // some properties for the contianer (superclass) which should // be the same across swarms. const props = { parent:testSVG, orientation: orientation, orientationDomain:oDom, orientationSpace:ospace }; // start with some color for each swarm... again could use d3 here... const colors = ["#2980b9","#27ae60","#c0392b"]; // create array of swarms const swarms = swarmLocations.map( (v,i) => { return new swarm( {name:"swarm"+i,data:data[i],radius:5,color:colors[i]},//this.args {...props,location:swarmLocations[i]} //superArgs ); }); // add some text somewhere d3.select(testSVG).append("svg:text") .attr("x",10) .attr("y",20) .style("text-anchor","start") .style("font", "bold 18px Times New Roman, serif") .text("Swarm Element Example") // Todo: draw an axes, since this would show how the data are updating return {parent:testSVG,swarms:swarms,ospace:ospace,data:data} }39:T541,class utils { // STATIC CLASS FOR CONTAINING UTILITY FUNCTIONS // We do not define a constructor because we wont be // instantiating this object. static BivariateDatum(x,y,name,mode,lineOpts,pointOpts) { /** * BivariateDatum is used for creating data arrays for * which we have x-y pairs. * Defaults for mode, lineOpts and pointOpts were * originally designed for the BivariateContinuousAxes graphic, * though these can be overrided or ignored in other cases. **/ let lineOptions = { color:"rgb(70,130,180)", width:1, opacity:0.6, style: "solid" }; let markerOptions = { symbol: "circle", opacity: 1, size: 5, color:"rgb(61,38,168)" }; // set options from inputs if present if (typeof lineOpts !== "undefined") { for (let prop in lineOpts) { if (!lineOpts.hasOwnProperty(prop)) continue; lineOptions[prop] = lineOpts[prop]; } } if (typeof pointOpts !== "undefined") { for (let prop in pointOpts) { if (!pointOpts.hasOwnProperty(prop)) continue; markerOptions[prop] = pointOpts[prop]; } } return { line: lineOptions, marker: markerOptions, name: name || "bivariateData", mode: mode || "lines+markers", x: x, y: y }; } }3a:T42e,function hslToRgb(h, s, l){ /** * Converts an HSL color value to RGB. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSL_color_space. * Assumes h, s, and l are contained in the set [0, 1] and * returns r, g, and b in the set [0, 255]. * * @param {number} h The hue * @param {number} s The saturation * @param {number} l The lightness * @return {Array} The RGB representation */ var r, g, b; if(s == 0){ r = g = b = l; // achromatic }else{ var hue2rgb = (p, q, t) => { if(t < 0) t += 1; if(t > 1) t -= 1; if(t < 1/6) return p + (q - p) * 6 * t; if(t < 1/2) return q; if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; } var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; }3b:T3ba1,class SimpleBivariateAxes { // Static Properties static get ID() { return "SimpleBivariateAxes"; } static get ID_LENGTH() { return 6; } // constructor constructor({ parent = [], id = this.constructor.ID, w = 600, //px h = 400, //px margin = {t: 15, r: 25, b: 40, l: 60}, //px font = {family: "Times New Roman", size: 16, color: [0,0,0]}, Title = "", XLabel = "", YLabel = "", XScale = "linear", YScale = "linear", XZero = false, YZero = false, XGrid = false, YGrid = false }={}) { // parent = (parent instanceof HTMLElement) ? parent : document.createElement("div"); this.Parent = parent; this.id = parent.id === "" ? id : parent.id+"_parent"; this.Parent.id = this.id; this.Root = this.Parent.attachShadow({mode:'open'}); this.layout = { width: w, height: h, margin: margin, get extents() { return { width: this.width - this.margin.r - this.margin.l, height: this.height - this.margin.t - this.margin.b } }, font: font, xscale: this.constructor.toScaleType(XScale), yscale: this.constructor.toScaleType(YScale), xzero: this.constructor.toBool(XZero), yzero: this.constructor.toBool(YZero), xgrid: this.constructor.toBool(XGrid), ygrid: this.constructor.toBool(YGrid) }; // d3.select(this.Parent) .attr("id", this.id) .attr("class", "axWrapper") .attr("width", `${this.layout.width}px`) .attr("height", `${this.layout.height}px`) .style("width", `${this.layout.width}px`) .style("height", `${this.layout.height}px`) .style("display","block"); // initialize properties this.Children = new Map; // Setup styles this.Style = document.getElementById(this.id+"-style"); if (this.Style === null) { this.Style = document.createElement("style"); this.Style.type = "text/css"; this.Style.id = this.id+"-style"; // append to the shadow this.Root.appendChild(this.Style); } // Setup initial axes this.SVG = d3.select(this.Root).append("svg") .attr("width", `${this.layout.width}px`) .attr("height", `${this.layout.height}px`) .attr("class", "svg-container") .attr("xmlns", "http://www.w3.org/2000/svg"); this.Axes = this.SVG.append("g") .attr("transform", `translate(${this.layout.margin.l},${this.layout.margin.t})`) .attr("id", this.id + "-axes"); this.XAxis = { Axis: this.Axes .append("g") .attr("transform", `translate(0,${this.layout.extents.height})`) .attr("class", "axes x-axis") .attr("opacity", 1.0) }; this.YAxis = { Axis: this.Axes .append("g") .attr("class", "axes y-axis") .attr("opacity", 1.0) }; this._Title = {String:Title,font:font,container:this.Axes.append("g").attr("class", "title")}; this._XLabel = {String:XLabel,font:font,container:this.Axes.append("g").attr("class", "x-label")}; this._YLabel = {String:YLabel,font:font,container:this.Axes.append("g").attr("class", "y-label")}; // Build the plot area this.Container = this.SVG.append("g") .attr("transform", `translate(${this.layout.margin.l},${this.layout.margin.t})`) .attr("width", `${this.layout.extents.width}px`) .attr("height",`${this.layout.extents.height}px`) .attr("id", "plotArea"); // draw this.update(); } // Setters ------------------------------------/ set XLabel(str) { if (typeof str === "object") { for (let prop in str) { if (!str.hasOwnProperty(prop)) continue; this._XLabel[prop] = str[prop]; } } else { this._XLabel.String = str; } // update this.updateLabels(); } set YLabel(str) { if (typeof str === "object") { for (let prop in str) { if (!str.hasOwnProperty(prop)) continue; this._YLabel[prop] = str[prop]; } } else { this._YLabel.String = str; } // update this.updateLabels(); } set Title(str) { if (typeof str === "object") { for (let prop in str) { if (!str.hasOwnProperty(prop)) continue; this._Title[prop] = str[prop]; } } else { this._Title.String = str; } this.updateLabels(); } set XScale(scale) { this.layout.xscale = this.constructor.toScaleType(scale); this.update(); } set YScale(scale) { this.layout.yscale = this.constructor.toScaleType(scale); this.update() } // Getters ------------------------------------/ get CSS() { return ` .axes text { font-family: ${this.layout.font.family} !important; font-size: ${this.layout.font.size}pt !important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .axes .x-axis line, .axes .y-axis line { stroke-opacity: 0.6 !important; stroke: rgb(60,60,60) !important; stroke-width: 4px !important; shape-rendering: crispEdges !important; } .svg-container { position: absolute; background-color: transparent; } .axes .x-label text { font-family: ${this._XLabel.font.family}; font-size: ${this._XLabel.font.size}pt; } .axes .y-label text { font-family: ${this._YLabel.font.family}; font-size: ${this._YLabel.font.size}pt; } .axes .title text { font-family: ${this._Title.font.family}; font-size: ${this._Title.font.size}pt; } `; } get XGrid() { return this.layout.xgrid; } get YGrid() { return this.layout.ygrid; } get XLocation() { return "bottom"; } get YLocation() { return "left"; } get Title() { return this._Title; } get XLabel() { return this._XLabel; } get YLabel() { return this._YLabel; } get Dims() { return {width:this.layout.extents.width,height:this.layout.extents.height} } get ChildId() { let k = this.Children.keys(); const keys = []; for (let key of k) { keys.push(key); } return keys; } get Domain() { const dom = {x:[Infinity,-Infinity],y:[Infinity,-Infinity]}; const xlog = this.layout.xscale === "logarithmic"; const ylog = this.layout.yscale === "logarithmic"; if (this.Children.size) { this.Children.forEach( (v) => { let x = d3.extent( v.data.filter(v => (xlog && (v.xdata <= 0)) ? true : false).map( (v) => v.xdata) ); let y = d3.extent( v.data.filter(v => (ylog && (v.ydata <= 0)) ? false : true).map( (v) => v.ydata) ); dom.x[0] = d3.min([dom.x[0],x[0]]); dom.x[1] = d3.max([dom.x[1],x[1]]); dom.y[0] = d3.min([dom.y[0],y[0]]); dom.y[1] = d3.max([dom.y[1],y[1]]); }); } dom.x.forEach(function(v,i) { this[i] = (v === Infinity) ? (xlog?0.0001:0) : (v === -Infinity ? 1 : v); }, dom.x ); dom.y.forEach(function(v,i) { this[i] = (v === Infinity) ? (ylog?0.0001:0) : (v === -Infinity ? 1 : v); }, dom.y ); return dom; } get YScale() { const s = this.layout.yscale === "logarithmic" ? d3.scaleLog() : d3.scaleLinear(); const dom = this.Domain; const dims = this.Dims; return s.domain(dom.y).range([dims.height,0]).nice(); } get XScale() { const s = this.layout.xscale === "logarithmic" ? d3.scaleLog() : d3.scaleLinear(); const dom = this.Domain; const dims = this.Dims; return s.domain(dom.x).range([0,dims.width]).nice(); } // Methods ------------------------------------/ line(x,y,{id="",displayName="",color=[0,0,0],lineStyle="solid",marker="none",lineWidth=1,markerSize=6}={}) { id = id === "" ? this.generateID() : id; let style = ` stroke: ${SimpleBivariateAxes.rgba(color,1)}; stroke-dasharray: ${SimpleBivariateAxes.strokeType(lineStyle)}; stroke-linejoin: round; stroke-width: ${2+(lineWidth-1)*2}px; stroke-linecap: butt; fill: none; `; const child = {data: x.map( (v,i) => {return {xdata: v, ydata: y[i]};} ), displayName: displayName, id: id}; this.Children.set(id,child); // compute the new domains let dom = this.Domain; const xlog = this.layout.xscale === "logarithmic"; const ylog = this.layout.yscale === "logarithmic"; let xd = d3.extent( child.data.filter(v => (xlog && (v.xdata <= 0)) ? false : true).map( (v) => v.xdata) ); let yd = d3.extent( child.data.filter(v => (ylog && (v.ydata <= 0)) ? false : true).map( (v) => v.ydata) ); dom.x[0] = d3.min([dom.x[0],xd[0]]); dom.x[1] = d3.max([dom.x[1],xd[1]]); dom.y[0] = d3.min([dom.y[0],yd[0]]); dom.y[1] = d3.max([dom.y[1],yd[1]]); const sx = this.XScale.domain(dom.x); const sy = this.YScale.domain(dom.y); const lineGen = d3.line() .x( d => sx(d.xdata)) .y( d => sy(d.ydata)) .curve(d3.curveLinear); // update const t = this.Container.transition().duration(250); this.Container.selectAll(`#${id}`) .data([child.data]) .join( enter => enter.append("path") .attr("id",id) .attr("class","data-line") .attr("style", style.replace(/\n/g, " ")) .attr("d",d => lineGen.y(y => sy(dom.y[0]))(d)) .call( enter => enter.transition(t).attr("d",lineGen.y(d => sy(d.ydata))) ), update => update .attr("id",id) .attr("class","data-line") .attr("style", style.replace(/\n/g, " ")) .call( update => update.transition(t).attr("d",lineGen) ), exit => exit.call( exit => exit.transition(t).attr("d",lineGen.y(d=>sy(dom.y[0]))).remove() ) ); this.update(); } update() { this.XAxis.Axis.call(this.axes(this.XLocation), this.XScale); this.YAxis.Axis.call(this.axes(this.YLocation), this.YScale); this.Style.innerHTML = this.CSS; this.updateLabels(); } render() { return d3.select(this.Parent).style("margin", "auto").node(); } // Generation mathods -------------------------/ axes(location) { switch (location.toLowerCase()) { case "top": return (g,scale) => g .attr("transform", `translate(0,${this.layout.margin.top})`) .call(d3.axisTop(scale).ticks(this.layout.extents.width / 80)) .call(g => (g.selection ? g.selection() : g)); case "bottom": return (g,scale) => g .attr("transform", `translate(0,${this.layout.extents.height})`) .call(d3.axisBottom(scale).ticks(this.layout.extents.width / 80)) .call(g => (g.selection ? g.selection() : g)); case "left": return (g,scale) => g .attr("transform", `translate(${this.layout.margin.left},0)`) .call(d3.axisLeft(scale).ticks(d3.min([this.layout.extents.height / 80,5]))) .call(g => (g.selection ? g.selection() : g)); case "right": return (g,scale) => g .attr("transform", `translate(${this.layout.margin.left+this.layout.extents.width},0)`) .call(d3.axisRight(scale).ticks(d3.min([this.layout.extents.height / 80,5]))) .call(g => (g.selection ? g.selection() : g)); } } updateLabels(){ this.Style.innerHTML = this.CSS; const ext = this.layout.extents; // draw axes labels this._XLabel.container.selectAll(".x-label") .data([this._XLabel]) .join( enter => enter.append("text") .attr("class", "x-label") .attr("y", ext.height-5) .attr("x", ext.width/13) .attr("fill", "rgba(20,20,20,0.4)") .attr("text-anchor","left") .attr("alignment-baseline","baseline") .text(d => d.String), update => update.call( text => text.text(d => d.String) ), exit => exit.call( text => text.remove() ) ) .call(text => text .attr("y", ext.height-5) .attr("x", ext.width/13) ); this._YLabel.container.selectAll(".y-label") .data([this._YLabel]) .join( enter => enter.append("text") .attr("class", "y-label") .attr("transform", "rotate(-90)") .attr("dy", 20) .attr("x", -ext.height*12/13) .attr("fill", "rgba(20,20,20,0.4)") .attr("text-anchor","left") .attr("alignment-baseline","baseline") .text(d => d.String), update => update.call( text => text.text(d => d.String) ), exit => exit.call( text => text.remove() ) ) .call(text => text .attr("dy", 20) .attr("x", -ext.height*12/13) ); // If setting a title, we will need to modify the extents and reshape the graphing area. // TODO this._Title.container.selectAll(".title") .data([this._Title]) .join( enter => enter.append("text") .attr("class", "title") .attr("y", -20) .attr("x", 0) .attr("fill", "rgba(20,20,20,1)") .attr("text-anchor","midlle") .attr("alignment-baseline","baseline") .text(d => d.String), update => update.call( text => text.text(d => d.String) ), exit => exit.call( text => text.remove() ) ) .call(text => text .attr("y", 5) .attr("x", ext.width/2) ); } generateID() { let l = this.constructor.ID_LENGTH; let id = ""; while (this.Children.has(id) || id === ""){ id = Math.round((Math.pow(36, l + 1) - Math.random() * Math.pow(36, l))).toString(36).slice(1); } return id; } // Static Methods ------------------------------/ static rgba(col,opc) { return `rgba(${col.map( v => v <= 1.0 ? `${Math.round(v*255)}` : `${v}` ).join(",")},${opc > 1 ? opc/255 : opc})` } static rgb2A(col,opc) { let rgb = col.split(",").map( v => v.replace(/\D/g,"") ); return `rgba(${rgb.slice(0,3).concat(opc.toString()).join(",")})` } static strokeType(type) { switch (type.toLowerCase()) { case "solid": return [0]; case "dashed": return [18,12]; case "dotted": return [2,8]; case "dashed-dotted": return [18,10,1,8,1,10]; } } static markerType(type){ type = type || "none"; switch (type.toLowerCase()) { case "cross": return d3.symbolCross; case "diamond": return d3.symbolDiamond; case "square": return d3.symbolSquare; case "star": return d3.symbolStar; case "y": return d3.symbolWye; case "triangle": return d3.symbolTriangle; case "circle": return d3.symbolCircle; default: // circle is default if type is not there return; } } static toBool(status) { const isCharOn = status === "on"; const isNumOn = status === 1; const isBoolOn = status === true; return isCharOn || isNumOn || isBoolOn; } static toScaleType(type) { type = type || "logarithmic"; let t = type.toLowerCase(); return t.startsWith('lo') ? "logarithmic" : "linear"; } }3c:[] 31:{"id":"00436ee6a31c7a4d","slug":"reusable-graphics-and-grobs","title":"Reusable Graphics And GrObs","thumbnail":"35d0268ab795858fc7cd1ae91c02c5cb5810c5b34d385f20904fa25967a78b87","access_level":"public","create_time":"$D2019-06-11T18:32:23.514Z","update_time":"$D2023-04-12T16:08:08.329Z","view_time":null,"first_public_time":"$D2019-06-13T19:14:26.150Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"22e692495fe9cf27","login":"khlick","name":"Khris Griffis","avatar_url":"https://avatars-next.observableusercontent.com/cf292a07d0a4a35dc630260f74dcebe58301d5ecf0babe1b1150762beb1336cb","tier":"starter_2024"},"version":1727,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bb90f6c4f06742e0","login":"khlick","name":"Khris Griffis","avatar_url":"https://avatars-next.observableusercontent.com/cf292a07d0a4a35dc630260f74dcebe58301d5ecf0babe1b1150762beb1336cb","tier":null}],"members":[{"type":"individual","id":"bb90f6c4f06742e0","login":"khlick","name":"Khris Griffis","avatar_url":"https://avatars-next.observableusercontent.com/cf292a07d0a4a35dc630260f74dcebe58301d5ecf0babe1b1150762beb1336cb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Reusable Graphics And GrObs","cells":[{"id":0,"value":"md`# Reusable Graphics And GrObs\n${(navigator.userAgent.match('HeadlessChrome')) ? html`

` : ''}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"md`\n## Introduction\nI often find that I need to make a simple plot type from various data forms but find most pre-built libraries too complicated or lacking some, possibly niche, feature that I want. So I set out to create a library of simple graphics objects (GrObs) to use in my Observable notebooks. Since this is not the only medium in which I use JavaScript, I also endeavored to write objects which don't depend (too extensively, at least) on the [standard library](https://github.com/observablehq/notebook-stdlib). \n\n_Note: I began this before [Observable Plot](https://observablehq.com/@observablehq/plot?collection=@observablehq/libraries) was released. This was a fun exercise in defining object classes in JS._\n\nThis notebook is under development *in perpetuum*. Enjoy!\n

-Khris

\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"md`\n# Complete plots\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"md`\n## A (Static) 2-D Axes For Bivariate Data\nThis plot consists of a set of axes and has a number of features that make it extensible and conformable to X-Y pairs of data, whether it be time series (continuous) or scatter types. This graphic can be extended or incorporated into other graphics, e.g. for use with a scrubber. \n\nTODO:\n- Documentation\n- Fix label update pattern (i.e. learn more about merge);\n- Allow tick formatting options on log axes (also alow base?)\n- Add in YScale log options.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"{\n const node = plot1.here();\n \n // set margins to reposition the container div\n return d3.select(node).style(\"margin\", \"auto\").node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"plot1 = {\n const h = 400;\n const w = width*2/3\n const plot1 = new BivariateContinuousAxes(\"plot1\",w,h);\n // Usage\n plot1.YLabel = \"Amplitude\";\n plot1.XLabel = \"Time [seconds]\";\n plot1.XGrid = true;\n plot1.YGrid = true;\n plot1.newPlot(\n utils.BivariateDatum(\n d3.range(10), \n d3.range(10).map( v => Math.random() ),\n \"line1\",\n \"lines+markers\",\n {color: \"rgb(100,180,136)\",width:2},\n {color: \"rgb(100,180,136)\"}\n )\n );\n \n plot1.appendPlot(utils.BivariateDatum(d3.range(10), d3.range(10).map( v => Math.random() )));\n \n return plot1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"md`\n## A 2-Dimensional Axes For Categorical Data\nThis plot consists of a set of axes and has a number of features that make it extensible and conformable to X-Y pairs of data, whether it be time series (discrete) or histogram types. This graphic can be extended or incorporated into other graphics, e.g. for use with a scrubber. This plot is likely best for use \n\nTODO:\n- Override draw\n- Override scales\n- Configure orientation selections (allow either x or y to be categorical var).\n- Documentation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"class BivariateDiscreteAxes extends BivariateContinuousAxes {\n // Constructor Method\n constructor(...SuperArgs) {\n super(...SuperArgs);\n \n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"md`\n# Individual Elements\n\nThese elements will construct an svg group, \\`\\`g\\`\\` element based on input data. The \\`\\`g\\`\\` can be nested into a data space of another figure, thus a parent svg node or d3 selection and parent data domains must be supplied.\n\nIn order to limit the spread, orthogonal to the orientation direction, a scaling value, \\`\\`orthogonalScale\\`\\`, in (0,1] should be supplied, especially if more than one element is being constructed on a figure. Otherwise, the component will assume 100% spread. Margin values are fractions of the individual element's container. \n\nFor example, if an element is drawn horizontally with a scaling value of 0.5, centered on an svg which has a height of 800px, then the vertical extent of the container would be [200,600] and the horizontal extent would be dependent on the element's data.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"md`\n## Container\nThe container class. This class can be extended or used directly for any custom elements.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"md`\n## Violin\n\nCreate a violin element. Use a kernel density estimate to create a distribution profile to display along the orientation axis. Unlike a swarm plot or boxplot, the density estimate is symmetrical orthogonal to the orientation axis. Thus, one should really look at this plot one side at a time.\n\n\nTODO:\n- Need kernel density method.\n- Process data: kernel density, tukey 5 number (like boxplots).\n\nIDEAS:\n- Maybe having the ability to choose two kernels or two bandwiths might be useful (L/R)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"class violin extends componentContainer {\n constructor(name, ...containerArgs) {\n super(...containerArgs);\n this.id = name || this.constructor.name;\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"md`\n## Box\n\nCreate a *boxplot* box element. Use the 5 number summary to construct box and outliers.\n\nTODO:\n- Lots...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"class box extends componentContainer {\n constructor(name, ...containerArgs) {\n super(...containerArgs);\n this.id = name || this.constructor.name;\n \n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"md`\n## Swarm\nAlso called a number of other names, e.g. jitter, strip, dot.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"md`\n## SwarmBox\nCombine swarm and boxplot elements.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"class swarmBox extends componentContainer {\n constructor(...containerArgs) {\n super(...containerArgs);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"md`\n## Swarolin\nCombine swarm and violin elements.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"class swarolin extends componentContainer {\n constructor(name, ...containerArgs) {\n super(...containerArgs);\n this.id = name || this.constructor.name;\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"md`\n---\n## Examples\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"swarmExample = swarmTest.parent","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"viewof exampleUpdate = {\n const button = html` ← See how the data and color update works.`;\n button.onclick = () => {\n // changing a property of the swarm object will not draw until the update method is called.\n const n = stats.randInt(1,{min:20,max:320,inclusive:true});\n const fact = stats.randInt(1,{min:5,max:15,inclusive:true});\n const newdat = d3.range(n).map(v=>Math.random()*fact/2);\n \n swarmTest.swarms[0].data = newdat;\n swarmTest.swarms[0].recolor(randomColor());\n // When changing data and requesting a new domain -> pixel map, we need to \n // let each swarm know how to remap the new/existing data to a new domain space\n const oldDat = [...swarmTest.data];\n const dom = d3.extent(oldDat.flat());\n oldDat.splice(0,1,newdat);\n swarmTest.swarms.forEach( s => {\n s.Domain = dom;//get new data domain\n s.update();// draw everything we have changed !!IMPORTANT\n });\n }\n \n return button;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"md`\n---\n\n# Utilities\n\nThe following functions are helpers and other functional utilities used primarily for examples or as wrappers for common processes. These utilities are all code I've written or modified (see docstrings for any references).\n\nThe \\`\\`utils\\`\\` class contains the following static methods:\n${Object.getOwnPropertyNames(utils).filter( p => typeof utils[p] === \"function\" ).map( p => \"- \"+p).join(\"\\n\")}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"md`\n---\n## Random functions\n\nThe following functions can be attributed to someone else, or are small functions used primarily for \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"md`\n### \\`\\`hslToRgb\\`\\`:\nConvert a hue, saturation, luminance color value to floating point rgb values. Sourced form [this blog](http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c) found via [this SO answer](https://stackoverflow.com/a/9493060).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"md`\n### \\`\\`randomColor\\`\\`:\n\nSelect a color from the color wheel at random and return the rgb array.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"function randomColor(S = 1.0, L = 0.5) {\n let h = Math.abs(Math.random());\n let rgb = hslToRgb((h*360)/360,S,L);\n return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1172,"value":"md`\n---\n# Shortcuts\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"function linePlot(x,y,{ylab=\"\",xlab=\"\",mode=\"lines\",dims=null,name=\"quickplot\"}={},...dataArgs) {\n const data = utils.BivariateDatum(x,y,name,mode,...dataArgs);\n // Dimensions of the plot\n dims = dims === null? [width-50,600] : dims;\n // \n const ax1 = new BivariateContinuousAxes(\"axes1\",dims[0],dims[1]);\n\n // plot the data, use newPlot() on array or single datum.\n ax1.newPlot(data);\n \n ax1.YLabel = ylab;\n ax1.XLabel = xlab;\n \n return ax1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1179,"value":"{\n const x = d3.range(200).map( v => v/1000-0.1 );\n const y = x.map( v => 2*(Math.sin(2*Math.PI*(5)*2*v)+3*5) );\n return linePlot(x,y,{xlab:\"Days\",ylab:\"Degrees C\",dims:[width,600]}).here();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"{\n // Make some square waves from fourier series\n const sqr = (x,n,L) => 4 / Math.PI * d3.sum( n.map( N => {return 1/N*Math.sin(N*Math.PI*x/L)} ));\n const X = d3.range(501).map( v => v/250 );\n const ns = [1,3,5,7,9,11];\n const L = 1;\n const y = X.map( v => sqr(v,ns,L) );\n const ax = linePlot(X,y,{ylab:\"Amplitude\",xlab:\"Time (s)\",dims:[width,600]},{color:randomColor(),width:2});\n // add more lines\n const y2 = X.map( v => sqr(v,[1,3],L) );\n const dat2 = utils.BivariateDatum(X,y2,\"2Components\",\"lines\",{color:randomColor(),width:2});\n \n const y3 = X.map( v => sqr(v,[1,3,5,7],L) );\n const dat3 = utils.BivariateDatum(X,y3,\"4Components\",\"lines\",{color:randomColor(),width:2});\n \n const y4 = X.map( v => sqr(v,[1,3,5,7,9,11,13,15,17,19,21,23,25],L) );\n const dat4 = utils.BivariateDatum(X,y4,\"13Components\",\"lines\",{color:randomColor(),width:2});\n \n // append\n ax.appendPlot([dat2,dat3,dat4]);\n \n return ax.here();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1306,"value":"md`# Test Bed\nA location for testing new ideas.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"md`## Simple bivariate axes (SVG based)\nThis axes is primarily for making transitional data which is, for me, easier to work in the SVG framework. I would like to create an webgl version but don't have the know-how yet.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"m = {\n const m = new Map;\n m.set(\"a\",{x:[0,1,2],y:[0,0,0]});\n m.set(\"b\",{x:[1,2,3],y:[1,1,1]});\n return m\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1317,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1323,"value":"testAx = new SimpleBivariateAxes();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1540,"value":"{\n testAx.YLabel = ylab;\n testAx.XLabel = xlab\n testAx.Title = {String:title,font:{size:20}};\n let x = [0,1,2,3,4,5,6].map( v => v===0?v:2*v**2+Math.random());\n let y = x.map( v => Math.random()**2 );\n testAx.line(x,y,{id:\"test1\",color:[1,0,0]});\n testAx.line(x.map(v => v-2),y.map(v => -v/2),{id:\"test2\",color:[0,1,0],lineWidth: 2.5});\n return testAx.ChildId;\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"testAx.render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1528,"value":"ylab = \"ylabel\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1530,"value":"xlab = \"xlabel\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1531,"value":"title = \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1553,"value":"l = {\n let layout = {\n width: 500,\n height: 400,\n margins: {t:10,r:20,b:45,l:40},\n get extents() {\n return {\n width: this.width - this.margins.r - this.margins.l,\n height: this.height - this.margins.t - this.margins.b\n };\n }\n };\n return layout\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1702,"value":"{\n const e1 = l.extents;\n l.margins.t = 20;\n return [e1,l.extents]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1442,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`\n---\n\n# Dependencies\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"import {stats} from \"@khlick/statistics\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 32:"$31:body"