31:Tbc1,chart = { const height = 200; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const data = runningFraction; const samples = pastSamples; const indices = pastIndices; const pastData = d3.group( samples.map((sample, i) => { return sample; }), (d, i) => indices[i] ); const max_index = d3.max(pastData.keys()); const x = d3 .scaleLinear() .domain(d3.extent(data, (d, i) => i)) .range([margin.left, width - margin.right]); //const meanRate = d3.mean(rates); const y = d3 .scaleLinear() .domain(d3.extent([...samples], (d, i) => d)) //.nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) ); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Population mean wealth trajectory (grey are past ones)") ); const line = d3 .line() .defined(d => !isNaN(d)) .x((d, i) => x(i)) .y(d => y(d)); // const ensembleAvg = d3.line() // .defined(d => !isNaN(d)) // .x((d,i) => x(i)) // .y((d,i) => y(Math.pow(Math.E, i*meanRate))) const baseLine = d3 .line() .defined(d => !isNaN(d)) .x((d, i) => x(i)) .y((d, i) => y(1)); svg.append("g").call(xAxis); svg.append("g").call(yAxis); // svg.append("path") // .datum(data) // .attr("fill", "none") // .attr("stroke", "red") // .attr("stroke-width", 5) // .attr("stroke-linejoin", "round") // .attr("stroke-linecap", "round") // .attr("d", line); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", "grey") .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", baseLine); // svg.append("path") // .datum(data) // .attr("fill", "none") // .attr("stroke", "blue") // .attr("stroke-width", 1) // .attr("stroke-linejoin", "round") // .attr("stroke-linecap", "round") // .attr("d", ensembleAvg); //console.log(pastData); Array.from(pastData.entries()).forEach(entry => { const v = entry[1]; const k = entry[0]; //console.log(k,v); const line_color = k == max_index ? "red" : "lightgrey"; const stroke_width = k == max_index ? 5 : 1; svg .append("path") .datum(v) .attr("fill", "none") .attr("stroke", line_color) .attr("stroke-width", stroke_width) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); }); return svg.node(); }32:Ta0a,trajectory_chart = { const height = 200; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const rng = d3.randomInt(form_data.n); const randIndices = new Set([ ...Array(5) .fill(1) .map(i => rng()), "max", "min" ]); const data = output.trajectories.flatMap((X, t) => { const x_mean = d3.mean(X); return [ ...Array.from(X) .map((v, i) => { return { v: v / x_mean, i: i, t: t }; }) .filter(d => randIndices.has(d.i)), { v: d3.max(X) / x_mean, i: "max", t: t }, { v: d3.min(X) / x_mean, i: "min", t: t } ]; }); const trajectories = d3.group(data, d => d.i); const x = d3 .scaleLinear() .domain(d3.extent(data, d => d.t)) .range([margin.left, width - margin.right]); //const meanRate = d3.mean(rates); const y = d3 .scaleLinear() .domain(d3.extent(data, d => d.v)) //.nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) ); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Individual rescaled wealth trajectory") ); const line = d3 .line() .defined(d => !isNaN(d.v)) .x(d => x(d.t)) .y(d => y(d.v)); svg.append("g").call(xAxis); svg.append("g").call(yAxis); // console.log(x.domain(), y.domain()); const extreme_keys = new Set(["max", "min"]); Array.from(trajectories.entries()).forEach(entry => { const v = entry[1]; const k = entry[0]; //console.log(k,v); const line_color = extreme_keys.has(k) ? "magenta" : "lightgrey"; const stroke_width = extreme_keys.has(k) ? 2 : 1; // console.log(k, v, x(v[0].t), x(v[0].v)); //console.log(line(v)); svg .append("path") .datum(v) .attr("fill", "none") .attr("stroke", line_color) .attr("stroke-width", stroke_width) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); }); //debugger; return svg.node(); }33:Taf2,hist_chart = { const height = 200; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // .attr("width", width + margin.left + margin.right) // .attr("height", height + margin.top + margin.bottom) // svg.append("g") // .attr("transform", // "translate(" + margin.left + "," + margin.top + ")"); // //.attr("viewBox", [0, 0, width, height]); // const data = runningFraction; // const samples = pastSamples; // const indices = pastIndices; // const pastData = d3.group(samples.map((sample,i) => { // return sample; // }), (d,i) => indices[i]); // const max_index = d3.max(pastData.keys()); // const max_time = pastData.get(max_index).length - 1; // const hist_data = Array.from(pastData.entries()).map(([k,v]) => { // return v[max_time]; // }); const hist_data = output.X; //console.log(max_time, hist_data); const x = d3 .scaleLinear() .domain(d3.extent(hist_data)) .range([margin.left + 10, width - margin.right]); // set the parameters for the histogram const histogram = d3 .histogram() .value(function(d) { return d; }) // I need to give the vector of value .domain(x.domain()) // then the domain of the graphic .thresholds(x.ticks(100)); // then the numbers of bins const bins = histogram(hist_data); bins[0].y = bins[0].length; for (var i = 1; i < bins.length; i++) { bins[i].y = bins[i].length + bins[i - 1].y; } bins.forEach(bin => { bin.y = bin.y / form_data.n; }); // console.log(bins); const y = d3 .scaleLinear() .domain([0, d3.max(bins, d => d.y)]) //.nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) ); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Wealth distribution") ); svg.append("g").call(xAxis); svg.append("g").call(yAxis); // append the bar rectangles to the svg element svg .selectAll("rect") .data(bins) .enter() .append("rect") .attr("x", 1) .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.y) + ")"; }) .attr("width", function(d) { return x(d.x1) - x(d.x0); }) .attr("height", function(d) { return y(0) - y(d.y); }) .style("fill", "#69b3a2"); return svg.node(); }34:T604,output = { resample; let X = new Float64Array(form_data.n).map(x => 1.0); let x_mean = d3.mean(X); let W = 0; let trajectories = [X]; let temporalWealths = [x_mean]; // let temporalAverages = [x_mean]; const mu = parseFloat(form_data.mu); const sigma = parseFloat(form_data.sigma); const tau = parseFloat(form_data.tau); const dt = parseFloat(form_data.dt); const dt_sqrt = Math.sqrt(dt); const chunk_size = 100; //const factor = form_data.mu - Math.pow(form_data.sigma, 2)/2; //let t = 0; const rng = d3.randomNormal(); // const rng = d3.randomCauchy(); while (true) { // For improved drawing add chunk_size iterations at a time before yield for (let i = 0; i < chunk_size; i++) { X = X.map(x => { const dW = rng(); const dx = x * (mu * dt + sigma * dt_sqrt * dW) - tau * (x - x_mean) * dt; return x + dx; //Math.min(Math.max(dx, Number.MIN_VALUE), Number.MAX_VALUE); }); x_mean = d3.mean(X); const sample = x_mean; temporalWealths.push(sample); trajectories.push(X); mutable pastSamples.push(sample); mutable pastIndices.push(parseInt(resample)); } mutable pastSamples = mutable pastSamples; mutable pastIndices = mutable pastIndices; const output = { runningFractions: temporalWealths, X: X, trajectories: trajectories }; if (noLoop || temporalWealths.length > 1000) { yield Promises.delay(1, output); break; } yield Promises.delay(1, output); } }35:[] 2f:{"title":"Geometric Brownian Motion: Ergodicity breaking","cells":[{"id":322,"value":"md`# Geometric Brownian Motion: Ergodicity breaking\n\nHere is what the parameters may mean:\n\n* mu: expected wealth growth every year\n* sigma: parameter to control for wealth growth volatility\n* tau: percentage income pooled (if negative it means people get benefits from pooled income)\n* dt: time step size\n* n population: size of the population\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"viewof form_data = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"viewof resample = {\n const btn = html`