2b:null 2c:["$","title",null,{"children":"How a power law emerges from aggregation | Ulf Aslak | Observable"}] 31:Tb98,{ // Layout var width = 300 var height = 230 var margin0 = ({top: 20, right: 20, bottom: 30, left: 40}) var margin1 = ({top: 20, right: 20, bottom: 30, left: 40+width}) var sMin = 1e-2 var sMax = 1e1 var xMin = 0 var xMax = 10 var yMin = 0 var yMax0 = 0.9 var yMax1 = yMax0 / 1 var xtickmod = 2 var ytickmod = 0.3 // Make data let xdata = linspace(xMin, xMax, 100) let ydata = logspace(Math.log10(sMin), Math.log10(sMax), N + 2).slice(1, -1).map(s => { let ydata_i = xdata.map(x => pdf_normal(x, l*s+mu0, s)) let ydata_i_max = _.max(ydata_i) return ydata_i }) let yMean = vertical_mean(ydata) // Scaling var x0 = d3.scaleLinear() .domain([xMin, xMax]) .range([margin0.left, width - margin0.right]) var x1 = d3.scaleLinear() .domain([xMin, xMax]) .range([margin1.left, 2 * width - margin1.right]) var y0 = d3.scaleLinear() .domain([yMin, yMax0]) .range([height - margin0.bottom, margin0.top]) var y1 = d3.scaleLinear() .domain([yMin, yMax1]) .range([height - margin1.bottom, margin1.top]) // Drawing // ------- // Canvas const { canvas, context } = createCanvas(); context.canvas.width = width * 2 context.canvas.height = height const pixelRatio = resize(canvas, width * 2, height); context.scale(pixelRatio, pixelRatio); context.lineWidth = 1 // Figure 1 context.font = "12px Helvetica Neue"; context.fillText(String(N) + " Gaussians", width - 93, 30) for (let i in ydata) { context.beginPath() context.moveTo(x0(xdata[0]), y0(ydata[i][0])) for (let j in xdata) { context.lineTo(x0(xdata[j]), y0(ydata[i][j])) } context.stroke() } // Figure 2 context.font = "12px Helvetica Neue"; context.fillText("Aggregated", 2 * width - 85, 30) context.beginPath() context.moveTo(x1(xdata[0]), y1(yMean[0])) for (let j in xdata) { context.lineTo(x1(xdata[j]), y1(yMean[j])) } context.stroke() // Mask out curves out of domain context.beginPath() // top context.fillStyle = "white" context.fillRect(0, 0, width*2, margin0.top) context.stroke() context.beginPath() // left context.fillRect(0, 0, margin0.left, height) context.stroke() context.beginPath() // mid context.fillRect(width-margin0.right, 0, margin0.right+margin1.left-width, height) context.stroke() context.beginPath() // right context.fillRect(2*width-margin1.right, 0, margin1.right, height) context.stroke() context.beginPath() // bottom context.fillRect(0, height-margin0.bottom, 2*width, margin0.bottom) context.stroke() // Axes drawAxes(context, margin0, xMin, xMax, yMin, yMax0, x0, y0, width, height, xtickmod, ytickmod) drawAxes(context, margin1, xMin, xMax, yMin, yMax1, x1, y1, 2 * width, height, xtickmod, ytickmod) return context.canvas }32:Tc51,{ // Layout var width = 300 var height = 250 var margin0 = ({top: 20, right: 20, bottom: 30, left: 40}) var margin1 = ({top: 20, right: 20, bottom: 30, left: 40+width}) var xbuf = 10 var ybuf = 10 var sMin = 1e-2 var sMax = 1e1 var xMin = sMin * xbuf**(-1) var xMax = sMax * xbuf var yMin0 = 100 var yMin1 = 100 var yMax0 = 0 var yMax1 = 0 // Make data let xdata = logspace(Math.log10(xMin), Math.log10(xMax), 1000) let ydata = logspace(Math.log10(sMin), Math.log10(sMax), N+2).slice(1, -1).map(s => { let ydata_i = xdata.map(x => pdf_normal(x, l*s+mu0, s)) let ydata_i_max = _.max(ydata_i) if (yMin0 > ydata_i_max * ybuf ** (-1)) yMin0 = ydata_i_max * ybuf ** (-1) if (yMax0 < ydata_i_max * ybuf) yMax0 = ydata_i_max * ybuf return ydata_i }) let yMean = vertical_mean(ydata) yMin1 = yMin0 / N yMax1 = yMax0 / N // Scaling var x0 = d3.scaleLog() .domain([xMin, xMax]) .range([margin0.left, width - margin0.right]) var x1 = d3.scaleLog() .domain([xMin, xMax]) .range([margin1.left, 2 * width - margin1.right]) var y0 = d3.scaleLog() .domain([yMin0, yMax0]) .range([height - margin0.bottom, margin0.top]) var y1 = d3.scaleLog() .domain([yMin1, yMax1]) .range([height - margin1.bottom, margin1.top]) // Drawing // ------- // Canvas const { canvas, context } = createCanvas(); context.canvas.width = 2 * width context.canvas.height = height const pixelRatio = resize(canvas, 2 * width, height); context.scale(pixelRatio, pixelRatio); context.lineWidth = 1 // Figure 1 context.font = "12px Helvetica Neue"; context.fillText(String(N) + " Gaussians", width - 93, 40) for (let i in ydata) { context.beginPath() context.moveTo(x0(xdata[0]), y0(ydata[i][0])) for (let j in xdata) { context.lineTo(x0(xdata[j]), y0(ydata[i][j])) } context.stroke() } // Figure 2 context.font = "12px Helvetica Neue"; context.fillText("Aggregated", 2 * width - 85, 30) context.beginPath() context.moveTo(x1(xdata[0]), y1(yMean[0])) for (let j in xdata) { context.lineTo(x1(xdata[j]), y1(yMean[j])) } context.stroke() // Mask out curves out of domain context.beginPath() // top context.fillStyle = "white" context.fillRect(0, 0, width*2, margin0.top) context.stroke() context.beginPath() // left context.fillRect(0, 0, margin0.left, height) context.stroke() context.beginPath() // mid context.fillRect(width-margin0.right, 0, margin0.right+margin1.left-width, height) context.stroke() context.beginPath() // right context.fillRect(2*width-margin1.right, 0, margin1.right, height) context.stroke() context.beginPath() // bottom context.fillRect(0, height-margin0.bottom, 2*width, margin0.bottom) context.stroke() drawAxesLog(context, margin0, xMin, xMax, yMin0, yMax0, x0, y0, width, height) drawAxesLog(context, margin1, xMin, xMax, yMin1, yMax1, x1, y1, 2 * width, height) return context.canvas }33:Tba6,{ // Layout var width = 300 var height = 230 var margin0 = ({top: 20, right: 20, bottom: 30, left: 40}) var margin1 = ({top: 20, right: 20, bottom: 30, left: 40+width}) var sMin = 1e-2 var sMax = 1e1 var xMin = 0 var xMax = 10 var yMin = 0 var yMax0 = 0.9 var yMax1 = yMax0 / 1 var xtickmod = 2 var ytickmod = 0.3 // Make data let xdata = linspace(xMin, xMax, 100) let ydata = logspace(Math.log10(sMin), Math.log10(sMax), N_ray + 2).slice(1, -1).map(s => { let ydata_i = xdata.map(x => pdf_rayleigh(x, null, s)) let ydata_i_max = _.max(ydata_i) return ydata_i }) let yMean = vertical_mean(ydata) // Scaling var x0 = d3.scaleLinear() .domain([xMin, xMax]) .range([margin0.left, width - margin0.right]) var x1 = d3.scaleLinear() .domain([xMin, xMax]) .range([margin1.left, 2 * width - margin1.right]) var y0 = d3.scaleLinear() .domain([yMin, yMax0]) .range([height - margin0.bottom, margin0.top]) var y1 = d3.scaleLinear() .domain([yMin, yMax1]) .range([height - margin1.bottom, margin1.top]) // Drawing // ------- // Canvas const { canvas, context } = createCanvas(); context.canvas.width = width * 2 context.canvas.height = height const pixelRatio = resize(canvas, width * 2, height); context.scale(pixelRatio, pixelRatio); context.lineWidth = 1 // Figure 1 context.font = "12px Helvetica Neue"; context.fillText(String(N_ray) + " Rayleigh dist.", width - 110, 30) for (let i in ydata) { context.beginPath() context.moveTo(x0(xdata[0]), y0(ydata[i][0])) for (let j in xdata) { context.lineTo(x0(xdata[j]), y0(ydata[i][j])) } context.stroke() } // Figure 2 context.font = "12px Helvetica Neue"; context.fillText("Aggregated", 2 * width - 85, 30) context.beginPath() context.moveTo(x1(xdata[0]), y1(yMean[0])) for (let j in xdata) { context.lineTo(x1(xdata[j]), y1(yMean[j])) } context.stroke() // Mask out curves out of domain context.beginPath() // top context.fillStyle = "white" context.fillRect(0, 0, width*2, margin0.top) context.stroke() context.beginPath() // left context.fillRect(0, 0, margin0.left, height) context.stroke() context.beginPath() // mid context.fillRect(width-margin0.right, 0, margin0.right+margin1.left-width, height) context.stroke() context.beginPath() // right context.fillRect(2*width-margin1.right, 0, margin1.right, height) context.stroke() context.beginPath() // bottom context.fillRect(0, height-margin0.bottom, 2*width, margin0.bottom) context.stroke() // Axes drawAxes(context, margin0, xMin, xMax, yMin, yMax0, x0, y0, width, height, xtickmod, ytickmod) drawAxes(context, margin1, xMin, xMax, yMin, yMax1, x1, y1, 2 * width, height, xtickmod, ytickmod) return context.canvas }34:Tc65,{ // Layout var width = 300 var height = 250 var margin0 = ({top: 20, right: 20, bottom: 30, left: 40}) var margin1 = ({top: 20, right: 20, bottom: 30, left: 40+width}) var xbuf = 10 var ybuf = 10 var sMin = 1e-2 var sMax = 1e1 var xMin = sMin * xbuf**(-1) var xMax = sMax * xbuf var yMin0 = 100 var yMin1 = 100 var yMax0 = 0 var yMax1 = 0 // Make data let xdata = logspace(Math.log10(xMin), Math.log10(xMax), 100) let ydata = logspace(Math.log10(sMin), Math.log10(sMax), N_ray+2).slice(1, -1).map(s => { let ydata_i = xdata.map(x => pdf_rayleigh(x, null, s)) let ydata_i_max = _.max(ydata_i) if (yMin0 > ydata_i_max * ybuf ** (-1)) yMin0 = ydata_i_max * ybuf ** (-1) if (yMax0 < ydata_i_max * ybuf) yMax0 = ydata_i_max * ybuf return ydata_i }) let yMean = vertical_mean(ydata) yMin1 = yMin0 / N_ray yMax1 = yMax0 / N_ray // Scaling var x0 = d3.scaleLog() .domain([xMin, xMax]) .range([margin0.left, width - margin0.right]) var x1 = d3.scaleLog() .domain([xMin, xMax]) .range([margin1.left, 2 * width - margin1.right]) var y0 = d3.scaleLog() .domain([yMin0, yMax0]) .range([height - margin0.bottom, margin0.top]) var y1 = d3.scaleLog() .domain([yMin1, yMax1]) .range([height - margin1.bottom, margin1.top]) // Drawing // ------- // Canvas const { canvas, context } = createCanvas(); context.canvas.width = 2 * width context.canvas.height = height const pixelRatio = resize(canvas, 2 * width, height); context.scale(pixelRatio, pixelRatio); context.lineWidth = 1 // Figure 1 context.font = "12px Helvetica Neue"; context.fillText(String(N_ray) + " Rayleigh dist.", width - 110, 30) for (let i in ydata) { context.beginPath() context.moveTo(x0(xdata[0]), y0(ydata[i][0])) for (let j in xdata) { context.lineTo(x0(xdata[j]), y0(ydata[i][j])) } context.stroke() } // Figure 2 context.font = "12px Helvetica Neue"; context.fillText("Aggregated", 2 * width - 85, 30) context.beginPath() context.moveTo(x1(xdata[0]), y1(yMean[0])) for (let j in xdata) { context.lineTo(x1(xdata[j]), y1(yMean[j])) } context.stroke() // Mask out curves out of domain context.beginPath() // top context.fillStyle = "white" context.fillRect(0, 0, width*2, margin0.top) context.stroke() context.beginPath() // left context.fillRect(0, 0, margin0.left, height) context.stroke() context.beginPath() // mid context.fillRect(width-margin0.right, 0, margin0.right+margin1.left-width, height) context.stroke() context.beginPath() // right context.fillRect(2*width-margin1.right, 0, margin1.right, height) context.stroke() context.beginPath() // bottom context.fillRect(0, height-margin0.bottom, 2*width, margin0.bottom) context.stroke() drawAxesLog(context, margin0, xMin, xMax, yMin0, yMax0, x0, y0, width, height) drawAxesLog(context, margin1, xMin, xMax, yMin1, yMax1, x1, y1, 2 * width, height) return context.canvas }35:Tba6,{ // Layout var width = 300 var height = 230 var margin0 = ({top: 20, right: 20, bottom: 30, left: 40}) var margin1 = ({top: 20, right: 20, bottom: 30, left: 40+width}) var sMin = 1e-2 var sMax = 1e1 var xMin = 0 var xMax = 10 var yMin = 0 var yMax0 = 0.9 var yMax1 = yMax0 / 1 var xtickmod = 2 var ytickmod = 0.3 // Make data let xdata = linspace(xMin, xMax, 100) let ydata = logspace(Math.log10(sMin), Math.log10(sMax), N_gamma + 2).slice(1, -1).map(s => { let ydata_i = xdata.map(x => pdf_gamma(x, k_gamma, s)) let ydata_i_max = _.max(ydata_i) return ydata_i }) let yMean = vertical_mean(ydata) // Scaling var x0 = d3.scaleLinear() .domain([xMin, xMax]) .range([margin0.left, width - margin0.right]) var x1 = d3.scaleLinear() .domain([xMin, xMax]) .range([margin1.left, 2 * width - margin1.right]) var y0 = d3.scaleLinear() .domain([yMin, yMax0]) .range([height - margin0.bottom, margin0.top]) var y1 = d3.scaleLinear() .domain([yMin, yMax1]) .range([height - margin1.bottom, margin1.top]) // Drawing // ------- // Canvas const { canvas, context } = createCanvas(); context.canvas.width = width * 2 context.canvas.height = height const pixelRatio = resize(canvas, width * 2, height); context.scale(pixelRatio, pixelRatio); context.lineWidth = 1 // Figure 1 context.font = "12px Helvetica Neue"; context.fillText(String(N_gamma) + " Gamma dist.", width - 105, 30) for (let i in ydata) { context.beginPath() context.moveTo(x0(xdata[0]), y0(ydata[i][0])) for (let j in xdata) { context.lineTo(x0(xdata[j]), y0(ydata[i][j])) } context.stroke() } // Figure 2 context.font = "12px Helvetica Neue"; context.fillText("Aggregated", 2 * width - 85, 30) context.beginPath() context.moveTo(x1(xdata[0]), y1(yMean[0])) for (let j in xdata) { context.lineTo(x1(xdata[j]), y1(yMean[j])) } context.stroke() // Mask out curves out of domain context.beginPath() // top context.fillStyle = "white" context.fillRect(0, 0, width*2, margin0.top) context.stroke() context.beginPath() // left context.fillRect(0, 0, margin0.left, height) context.stroke() context.beginPath() // mid context.fillRect(width-margin0.right, 0, margin0.right+margin1.left-width, height) context.stroke() context.beginPath() // right context.fillRect(2*width-margin1.right, 0, margin1.right, height) context.stroke() context.beginPath() // bottom context.fillRect(0, height-margin0.bottom, 2*width, margin0.bottom) context.stroke() // Axes drawAxes(context, margin0, xMin, xMax, yMin, yMax0, x0, y0, width, height, xtickmod, ytickmod) drawAxes(context, margin1, xMin, xMax, yMin, yMax1, x1, y1, 2 * width, height, xtickmod, ytickmod) return context.canvas }36:Tc85,{ // Layout var width = 300 var height = 250 var margin0 = ({top: 20, right: 20, bottom: 30, left: 40}) var margin1 = ({top: 20, right: 20, bottom: 30, left: 40+width}) var xbufmin = 1 var xbufmax = 10 var ybuf = 10 var sMin = 1e-2 var sMax = 1e1 var xMin = sMin * xbufmin**(-1) var xMax = sMax * xbufmax var yMin0 = 100 var yMin1 = 100 var yMax0 = 0 var yMax1 = 0 // Make data let xdata = logspace(Math.log10(xMin), Math.log10(xMax), 100) let ydata = logspace(Math.log10(sMin), Math.log10(sMax), N_gamma+2).slice(1, -1).map(s => { let ydata_i = xdata.map(x => pdf_gamma(x, k_gamma, s)) let ydata_i_max = _.max(ydata_i) if (yMin0 > ydata_i_max * ybuf ** (-1)) yMin0 = ydata_i_max * ybuf ** (-1) if (yMax0 < ydata_i_max * ybuf) yMax0 = ydata_i_max * ybuf return ydata_i }) let yMean = vertical_mean(ydata) yMin1 = yMin0 / N_gamma yMax1 = yMax0 / N_gamma // Scaling var x0 = d3.scaleLog() .domain([xMin, xMax]) .range([margin0.left, width - margin0.right]) var x1 = d3.scaleLog() .domain([xMin, xMax]) .range([margin1.left, 2 * width - margin1.right]) var y0 = d3.scaleLog() .domain([yMin0, yMax0]) .range([height - margin0.bottom, margin0.top]) var y1 = d3.scaleLog() .domain([yMin1, yMax1]) .range([height - margin1.bottom, margin1.top]) // Drawing // ------- // Canvas const { canvas, context } = createCanvas(); context.canvas.width = 2 * width context.canvas.height = height const pixelRatio = resize(canvas, 2 * width, height); context.scale(pixelRatio, pixelRatio); context.lineWidth = 1 // Figure 1 context.font = "12px Helvetica Neue"; context.fillText(String(N_gamma) + " Gamma dist.", width - 105, 30) for (let i in ydata) { context.beginPath() context.moveTo(x0(xdata[0]), y0(ydata[i][0])) for (let j in xdata) { context.lineTo(x0(xdata[j]), y0(ydata[i][j])) } context.stroke() } // Figure 2 context.font = "12px Helvetica Neue"; context.fillText("Aggregated", 2 * width - 85, 30) context.beginPath() context.moveTo(x1(xdata[0]), y1(yMean[0])) for (let j in xdata) { context.lineTo(x1(xdata[j]), y1(yMean[j])) } context.stroke() // Mask out curves out of domain context.beginPath() // top context.fillStyle = "white" context.fillRect(0, 0, width*2, margin0.top) context.stroke() context.beginPath() // left context.fillRect(0, 0, margin0.left, height) context.stroke() context.beginPath() // mid context.fillRect(width-margin0.right, 0, margin0.right+margin1.left-width, height) context.stroke() context.beginPath() // right context.fillRect(2*width-margin1.right, 0, margin1.right, height) context.stroke() context.beginPath() // bottom context.fillRect(0, height-margin0.bottom, 2*width, margin0.bottom) context.stroke() drawAxesLog(context, margin0, xMin, xMax, yMin0, yMax0, x0, y0, width, height) drawAxesLog(context, margin1, xMin, xMax, yMin1, yMax1, x1, y1, 2 * width, height) return context.canvas }37:Tc1f,{ // Layout var width = 300 var height = 230 var margin0 = ({top: 20, right: 20, bottom: 30, left: 40}) var margin1 = ({top: 20, right: 20, bottom: 30, left: 40+width}) var sMin = 1e-2 var sMax = 1e1 var xMin = 0 var xMax = 2 var yMin = 0 var yMax0 = 5 var yMax1 = yMax0 / 1 var xtickmod = 1 var ytickmod = 1 // Make data let xdata = linspace(xMin, xMax, 100) let ydata = logspace(Math.log10(sMin), Math.log10(sMax), N_lognormal + 2).slice(1, -1).map(s => { //let ydata = linspace(sMin, sMax, N_lognormal + 2).slice(1, -1).map(s => { let ydata_i = xdata.map(x => pdf_lognormal(x, Math.log10(l_lognormal*s+mu0_lognormal), s)) let ydata_i_max = _.max(ydata_i) return ydata_i }) let yMean = vertical_mean(ydata) // Scaling var x0 = d3.scaleLinear() .domain([xMin, xMax]) .range([margin0.left, width - margin0.right]) var x1 = d3.scaleLinear() .domain([xMin, xMax]) .range([margin1.left, 2 * width - margin1.right]) var y0 = d3.scaleLinear() .domain([yMin, yMax0]) .range([height - margin0.bottom, margin0.top]) var y1 = d3.scaleLinear() .domain([yMin, yMax1]) .range([height - margin1.bottom, margin1.top]) // Drawing // ------- // Canvas const { canvas, context } = createCanvas(); context.canvas.width = width * 2 context.canvas.height = height const pixelRatio = resize(canvas, width * 2, height); context.scale(pixelRatio, pixelRatio); context.lineWidth = 1 // Figure 1 context.font = "12px Helvetica Neue"; context.fillText(String(N_lognormal) + " Lognormal dist.", width - 135, 30) for (let i in ydata) { context.beginPath() context.moveTo(x0(xdata[0]), y0(ydata[i][0])) for (let j in xdata) { context.lineTo(x0(xdata[j]), y0(ydata[i][j])) } context.stroke() } // Figure 2 context.font = "12px Helvetica Neue"; context.fillText("Aggregated", 2 * width - 85, 30) context.beginPath() context.moveTo(x1(xdata[0]), y1(yMean[0])) for (let j in xdata) { context.lineTo(x1(xdata[j]), y1(yMean[j])) } context.stroke() // Mask out curves out of domain context.beginPath() // top context.fillStyle = "white" context.fillRect(0, 0, width*2, margin0.top) context.stroke() context.beginPath() // left context.fillRect(0, 0, margin0.left, height) context.stroke() context.beginPath() // mid context.fillRect(width-margin0.right, 0, margin0.right+margin1.left-width, height) context.stroke() context.beginPath() // right context.fillRect(2*width-margin1.right, 0, margin1.right, height) context.stroke() context.beginPath() // bottom context.fillRect(0, height-margin0.bottom, 2*width, margin0.bottom) context.stroke() // Axes drawAxes(context, margin0, xMin, xMax, yMin, yMax0, x0, y0, width, height, xtickmod, ytickmod) drawAxes(context, margin1, xMin, xMax, yMin, yMax1, x1, y1, 2 * width, height, xtickmod, ytickmod) return context.canvas }38:Tce4,{ // Layout var width = 300 var height = 250 var margin0 = ({top: 20, right: 20, bottom: 30, left: 40}) var margin1 = ({top: 20, right: 20, bottom: 30, left: 40+width}) var xbufmin = 1e0 var xbufmax = 1e6 var ybufmin = 1e8 var ybufmax = 1e2 var sMin = 1e-2 var sMax = 1e1 var xMin = sMin * xbufmin**(-1) var xMax = sMax * xbufmax var yMin0 = 100 var yMin1 = 100 var yMax0 = 0 var yMax1 = 0 // Make data let xdata = logspace(Math.log10(xMin), Math.log10(xMax), 100) let ydata = logspace(Math.log10(sMin), Math.log10(sMax), N_lognormal+2).slice(1, -1).map(s => { let ydata_i = xdata.map(x => pdf_lognormal(x, Math.log10(l_lognormal*s+mu0_lognormal), s)) let ydata_i_max = _.max(ydata_i) if (yMin0 > ydata_i_max * ybufmin ** (-1)) yMin0 = ydata_i_max * ybufmin ** (-1) if (yMax0 < ydata_i_max * ybufmax) yMax0 = ydata_i_max * ybufmax return ydata_i }) let yMean = vertical_mean(ydata) yMin1 = yMin0 / N_lognormal yMax1 = yMax0 / N_lognormal // Scaling var x0 = d3.scaleLog() .domain([xMin, xMax]) .range([margin0.left, width - margin0.right]) var x1 = d3.scaleLog() .domain([xMin, xMax]) .range([margin1.left, 2 * width - margin1.right]) var y0 = d3.scaleLog() .domain([yMin0, yMax0]) .range([height - margin0.bottom, margin0.top]) var y1 = d3.scaleLog() .domain([yMin1, yMax1]) .range([height - margin1.bottom, margin1.top]) // Drawing // ------- // Canvas const { canvas, context } = createCanvas(); context.canvas.width = 2 * width context.canvas.height = height const pixelRatio = resize(canvas, 2 * width, height); context.scale(pixelRatio, pixelRatio); context.lineWidth = 1 // Figure 1 context.font = "12px Helvetica Neue"; context.fillText(String(N_lognormal) + " Lognormal dist.", width - 135, 30) for (let i in ydata) { context.beginPath() context.moveTo(x0(xdata[0]), y0(ydata[i][0])) for (let j in xdata) { context.lineTo(x0(xdata[j]), y0(ydata[i][j])) } context.stroke() } // Figure 2 context.font = "12px Helvetica Neue"; context.fillText("Aggregated", 2 * width - 85, 30) context.beginPath() context.moveTo(x1(xdata[0]), y1(yMean[0])) for (let j in xdata) { context.lineTo(x1(xdata[j]), y1(yMean[j])) } context.stroke() // Mask out curves out of domain context.beginPath() // top context.fillStyle = "white" context.fillRect(0, 0, width*2, margin0.top) context.stroke() context.beginPath() // left context.fillRect(0, 0, margin0.left, height) context.stroke() context.beginPath() // mid context.fillRect(width-margin0.right, 0, margin0.right+margin1.left-width, height) context.stroke() context.beginPath() // right context.fillRect(2*width-margin1.right, 0, margin1.right, height) context.stroke() context.beginPath() // bottom context.fillRect(0, height-margin0.bottom, 2*width, margin0.bottom) context.stroke() drawAxesLog(context, margin0, xMin, xMax, yMin0, yMax0, x0, y0, width, height) drawAxesLog(context, margin1, xMin, xMax, yMin1, yMax1, x1, y1, 2 * width, height) return context.canvas }39:T519,function drawAxesLog(context, margin, xMin, xMax, yMin, yMax, x, y, width, height) { context.fillStyle = "black" context.beginPath() context.moveTo(margin.left, margin.top) context.lineTo(margin.left, height - margin.bottom) context.lineTo(width - margin.right, y(yMin)) context.stroke() // Ticks for (let power of d3.range(Math.log10(xMin), Math.log10(xMax)+1)) { let val = parseFloat("1e" + power) if (x(val) >= margin.left){ context.beginPath() context.moveTo(x(val), y(yMin)) context.lineTo(x(val), y(yMin)+5) context.stroke() context.font = "15px Helvetica Neue"; context.fillText("10", x(val)-12, y(yMin)+29) context.font = "12px Helvetica Neue"; context.fillText(power, x(val)+5, y(yMin)+22) } } for (let power of d3.range(Math.floor(Math.log10(yMin)), Math.ceil(Math.log10(yMax)))) { let val = parseFloat("1e" + power) if (y(val) <= height - margin.bottom){ context.beginPath() context.moveTo(margin.left, y(val)) context.lineTo(margin.left-5, y(val)) context.stroke() context.font = "15px Helvetica Neue"; context.fillText("10", margin.left-40, y(val)+7) context.font = "12px Helvetica Neue"; context.fillText(power, margin.left-23, y(val)-2) } } }3a:[] 2f:{"id":"4370617f9cba8c02","slug":"a-visual-exploration-of-how-a-power-law-can-emerge-from-aggre","title":"How a power law emerges from aggregation","thumbnail":"e5aa0cdc087013538fb36e69993e38740901aa733c3a4c9cedb9a4ea7aaf29ff","access_level":"public","create_time":"$D2019-09-30T07:39:18.531Z","update_time":"$D2020-03-31T07:16:12.202Z","view_time":null,"first_public_time":"$D2019-12-18T09:38:41.591Z","fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"6e39539fdcd54038","login":"ulfaslak","name":"Ulf Aslak","avatar_url":"https://avatars-next.observableusercontent.com/49dd6371d9660f6642b5c92221ac7c785d45e5d7cd9b302104e634188d045adc","tier":"starter_2024"},"version":1486,"publish_version":1486,"role":null,"authored":false,"authors":[{"type":"individual","id":"2d5d2f67a6aa1cf7","login":"ulfaslak","name":"Ulf Aslak","avatar_url":"https://avatars-next.observableusercontent.com/49dd6371d9660f6642b5c92221ac7c785d45e5d7cd9b302104e634188d045adc","tier":null}],"members":[{"type":"individual","id":"2d5d2f67a6aa1cf7","login":"ulfaslak","name":"Ulf Aslak","avatar_url":"https://avatars-next.observableusercontent.com/49dd6371d9660f6642b5c92221ac7c785d45e5d7cd9b302104e634188d045adc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"936bb5e9815c44d2","slug":"explorables","title":"Explorables","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"How a power law emerges from aggregation","cells":[{"id":0,"value":"md`# How a *power law* emerges from *aggregation*\nPower law distributions are reported many places in nature. Power laws, and in particular inverse power laws, are interesting because they can point to specific mechanisms that generated them, potentially indicating a connecting to seemingly unrelated phenomena (read about [universality](https://en.wikipedia.org/wiki/Power_law#Universality)). Power laws have no characteristic scale, meaning that scaling the input by some constant, monotously scales the output by another constant, i.e.:\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"tex.block`f(c x) = a(c x)^{-k} = c^{-k} f(x) \\propto f(x),\\!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"md`\nFurthermore, they have no characteristic average or variation/scale statistics.\n\nThere is evidence that in some systems power laws emerge when aggregating over many scales [[1](https://www.nature.com/articles/srep09136), [2](https://www.pnas.org/content/101/45/15852.short)]. In a system where the distribution of some quantity is very heavy-tailed and well approximated by a power law, this—seemingly *scale-free*—quantity may in fact be an mixture of multiple sources at different scales. Each of these sources have a characteristic scale and may be distributed according to Gaussian, lognormal or Reyleigh distributions, etc.. Thus, if aggregating distributions at different scales produces a power law aggregate function, it should hold that:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":612,"value":"tex.block`\\int_0^{\\infin}{p(x, s)f(s)ds} = cx^{-k},`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":616,"value":"md `where ${tex`p(x, s)`} is a continuous probability distribution over *x* with scale parameter *s*, ${tex`{f(s)}`} is a probability distribution over scale parameter values, and *c* and *k* are constants. This relation is in fact proven analytically [[1](https://www.nature.com/articles/srep09136), [2](https://www.pnas.org/content/101/45/15852.short)].`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"md`\nIn this notebook I visualize this phenomenon; namely that aggregation of distributions can indeed produce a power law distribution within the scale domain of the aggregated distributions. Distributions have scales in the logarithmic range 1e-2 to 1e1, and as a result the aggregate function is a power law distributed within this range. I show that this is the the case for a variety of continuous distribution types starting with the normal distribution.\n\nHere, aggregation specifically refers to taking the unweighted average of probability distributions over their entire range, ${tex`\\sum_{n=1}^N p_n`}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":568,"value":"md `
\n### Normal distribution`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1015,"value":"md `I start by considering the normal distribution:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1018,"value":"tex.block`f\\left(x;\\mu, \\sigma\\right) = \\frac{1}{\\sqrt{2\\pi\\sigma^2}}\\exp\\left(-\\frac{(x-\\mu)^2}{2\\sigma^2}\\right),`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":569,"value":"md`where ${tex`\\mu=l\\sigma+\\mu_0`}. *l* is just an tunable coefficient, initially set to ${tex`l=0`}, such that ${tex`\\mu=0`} for all distributions to begin with. First I visualize the distributions and their aggregation function in linear space.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":249,"value":"viewof N = slider({\n min: 2, \n max: 50,\n step: 1,\n value: 8,\n title: \"Number of distributions\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":873,"value":"viewof l = slider({\n min: 0, \n max: 5,\n value: 0,\n description: \"l\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":931,"value":"viewof mu0 = slider({\n min: 0, \n max: 10,\n value: 0,\n description: \"μ_0\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1405,"value":"md `##### Linear`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":577,"value":"md `This gives some intuition towards how aggregating normal distributions can produce at least a heavy tailed distribution. To give a clearer example, I visualize the distributions and aggregation in log-log space.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1408,"value":"md `##### log-log`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1433,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":580,"value":"md `This is much clearer! Bump up the number of distributions and the line straightens nicely. And try tuning *l* ${tex`\\in [0, 5]`}, to shift the distribution means and seperate them in space. Seemingly, it does not change the slope of the aggregation function and with enough distributions it is still smooth.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":937,"value":"md `Finally we can offset the baseline value of ${tex`\\mu`}. Try, for example, setting ${tex`l=0`} and tuning *mu_0* with the slider below. In the linear plot you can see that this only offsets the distributions on the x-axis. In the log-log plot, then, it appears as a singularity for high enough *mu_0*, but the aggregation function is still a power law.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":826,"value":"md `
\n### Other distributions\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":860,"value":"md `#### *Rayleigh distribution*\nThe Rayleigh distribution only has a parameter for scale, ${tex`\\sigma`}. It takes the functional form:\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":984,"value":"tex.block`f\\left(x;\\sigma\\right) = \\frac{x}{\\sigma^2}\\exp\\left(-\\frac{x^2}{2\\sigma^2}\\right)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":850,"value":"viewof N_ray = slider({\n min: 2, \n max: 50,\n step: 1,\n value: 8,\n title: \"Number of distributions\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1413,"value":"md `##### Linear`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":828,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1422,"value":"md `##### log-log`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":844,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":915,"value":"md `
\n#### *Gamma distribution*\nThe gamma distribution has both a shape parameter, *k*, and a scale parameter, ${tex`\\theta`}. It has the functional form:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1006,"value":"tex.block`f\\left(x;k,\\theta\\right) = \\frac{x^{x-1}}{\\theta^k(k-1)!}\\exp\\left(-\\frac{x}{\\theta}\\right)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":920,"value":"viewof N_gamma = slider({\n min: 2, \n max: 50,\n step: 1,\n value: 8,\n title: \"Number of distributions\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":945,"value":"viewof k_gamma = slider({\n min: 1, \n max: 10,\n step: 1,\n value: 8,\n description: \"k parameter\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1416,"value":"md `##### Linear`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":918,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1425,"value":"md `##### log-log`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":951,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1178,"value":"md `
\n#### *Lognormal distribution*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1237,"value":"md `The lognormal distribution has the same parameters as the normal distribution, but takes the form:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1238,"value":"tex.block`f\\left(x; \\mu, \\sigma\\right) = \\frac{1}{x\\sigma\\sqrt{2\\pi}} \\exp\\left( -\\frac{(\\ln x - \\mu)^2}{2\\sigma^2} \\right)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1482,"value":"viewof N_lognormal = slider({\n min: 1, \n max: 50,\n step: 1,\n value: 8,\n title: \"Number of distributions\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1181,"value":"viewof l_lognormal = slider({\n min: 0, \n max: 5,\n value: 0,\n description: \"l\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1187,"value":"viewof mu0_lognormal = slider({\n min: 1e-2, \n max: 1,\n value: 0,\n description: \"μ_0\",\n precision:3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1039,"value":"md `##### Linear`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1041,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1428,"value":"md `##### log-log`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1037,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1337,"value":"md `
\n## Discussion\nThe purpose of this exercise is to argue that *scale-full-ness* is easily mistaken for scale-free-ness (no relation to this discussion [[3](https://www.nature.com/articles/s41467-019-08746-5#Bib1), [4](https://uploads-ssl.webflow.com/58bcae2c9d6c401e73a26fed/5aa01d3e24eebb000199a0a2_loveisallyouneed.pdf)]). As we have seen, many types of distributions share the property that aggregation over a range of scales can produce power law, i.e. a seemingly scale-free distribution. It may be that some multi-scale systems are mistakenly described as scale-free when different phenomena occuring at different scales are *aggregated* over large populations, especially if data is noisy or scales differ slightly across agents. The more difficult task this leaves us with, then, is to construct multi-scale models for data from various domains (biology, transportation, social, etc.) that have previously been described as scale-free in the Complex Systems literature.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"md `### Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"function createCanvas() {\n const canvas = document.createElement('canvas');\n const context = canvas.getContext('2d');\n return { canvas, context };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"function resize(canvas, width, height) {\n \n // Device screen density, e.g. MacBook Pro is @2x\n const pixelRatio = window.devicePixelRatio;\n \n // Scale it up by pixel ratio for higher density screens\n canvas.width = width * pixelRatio;\n canvas.height = height * pixelRatio;\n \n // Set the style to the desired size so that it scales back down\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n return pixelRatio;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":494,"value":"function drawAxes(context, margin, xMin, xMax, yMin, yMax, x, y, width, height, xtickmod, ytickmod) {\n context.fillStyle = \"black\"\n context.beginPath()\n context.moveTo(margin.left, margin.top)\n context.lineTo(margin.left, height - margin.bottom)\n context.lineTo(width - margin.right, y(yMin))\n context.stroke()\n \n // Ticks\n for (let val of d3.range(xMin, xMax+1, xtickmod)) {\n context.beginPath()\n context.moveTo(x(val), y(yMin))\n context.lineTo(x(val), y(yMin)+5)\n context.stroke()\n context.font = \"15px Helvetica Neue\";\n context.fillText(val, x(val) - 4 * (String(val).length), y(yMin) + 25)\n context.font = \"12px Helvetica Neue\";\n }\n \n for (let val of d3.range(yMin, yMax, ytickmod)) {\n context.beginPath()\n context.moveTo(margin.left, y(val))\n context.lineTo(margin.left-5, y(val))\n context.stroke()\n context.font = \"15px Helvetica Neue\";\n context.fillText(val, margin.left - 22 - 6.5 * (String(val).length-1), y(val)+5)\n context.font = \"12px Helvetica Neue\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":503,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"function pdf_normal(x, mu, s) {\n return 1 / Math.sqrt(2 * Math.PI * s**2) * Math.exp(-Math.pow((x - mu), 2) / (2 * s**2))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":787,"value":"function pdf_rayleigh(x, mu, s) {\n return x / s**2 * Math.exp(-Math.pow(x, 2) / (2 * s**2))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":794,"value":"function pdf_lognormal(x, mu, s) {\n return 1 / (x * s * Math.sqrt(2 * Math.PI)) * Math.exp(-((Math.log10(x) - mu)**2) / (2 * s**2))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":888,"value":"function pdf_gamma(x, k, s) {\n return 1 / (factorial(k-1) * s**k) * x ** (k-1) * Math.exp(-x/s)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":890,"value":"function factorial(k) {\n return k > 1 ? k * factorial(k-1) : 1\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"logspace = function(start, stop, nsteps){\n var delta = (stop-start)/(nsteps-1)\n return d3.range(nsteps).map(function(i){return 10**(start+i*delta);});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":347,"value":"linspace = function(start, stop, nsteps){\n var delta = (stop-start)/(nsteps-1)\n return d3.range(nsteps).map(function(i){return start+i*delta;});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":453,"value":"function vertical_mean(a) {\n return a.reduce((acc, cur) => {\n cur.forEach((e, i) => acc[i] = acc[i] ? acc[i] + e : e);\n return acc;\n }, []).map(e => e / a.length);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"md `### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"import {slider} from \"@lemonnish/nonlinear-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"