2d:null 2e:["$","title",null,{"children":"Chaos Example: | Johannes Mainusch | Observable"}] 33:Tfdc, viewof chaos = { var lambda= 2, years = 30; let data = generateChaos (lambda, years, 0.001); console.log (data) plotChart (data, "enter"); // // select and update the slider for nLambda // const svg = d3.select("#nLambda") .on("input", function() { d3.select("#nLambda-value").text(+this.value); lambda = this.value; data = generateChaos (lambda, years, 0.001); plotChart (data, "update"); }); // // get document.width // function getDocumentWidth () { // get document width var width = document.width; if (width === undefined) { // if document width fails, e.g., this page http://jblevins.org/projects/markdown-mode/ // then find the biggest element available to grab width var widthElt = (document.getElementsByTagName('html')[0] || document.getElementsByTagName('body')[0] || document.querySelector('*')); // use widthElt’s width or worst-case fallback to the window width = widthElt ? widthElt.offsetWidth : window.innerWidth; } return width; } // // this funditon creates the chaotic data // function generateChaos (lambda, iterations, startDensity) { var myArray = []; var i = 0; var density = startDensity; while (i++ < iterations) { myArray.push ({"x":i, "y":density}); density = lambda*density*(1.0-density); } return myArray; } function plotChart (data, mode) { var margin = {top: 20, right: 20, bottom: 40, left: 80}, width = 0.96*getDocumentWidth() - margin.left - margin.right, //height = height - margin.top - margin.bottom, barWidth = width / data.length; d3.select("g").remove(); // remove old svg 'g' elements var chart = d3.select(".chart") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");; var x = d3.scaleLinear() .range([0, width]) .domain([0, data.length]); var y = d3.scaleLinear() // .domain([0, d3.max(data, function(d) { return d.y; })]) .domain([0, 1]) .range([height, 0]); /* the axis */ var xAxis = g => g .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x)) // .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", width - margin.right) .attr("y", -4) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "end") .text(data.x)) var yAxis = g => g .attr("transform", `translate(0,0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margin.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)) chart .append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("x", width) .attr("y", 18) .attr("dy", ".71em") .style("text-anchor", "end") .text("year");; chart .append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Frog density in the pond");; /* the bars */ d3.selectAll("bar").remove(); var bar = chart.selectAll("bar") .data(data) .enter(); bar.append("rect") .attr("class", "bar") .attr("fill", "steelblue") .attr("x", function(d) { return x(d.x)-barWidth; }) .attr("y", function(d) { return y(d.y); }) .attr("width", barWidth -1) .attr("height", function(d) { return height - y(d.y); }); // bar.append("text") .attr("x", function(d) { return x(d.x)-barWidth/2; }) .attr("y", function(d) { return y(d.y) + 6; }) .attr("dy", ".75em") .attr("fill", "white") .attr("writing-mode", "tb") .attr("text-anchor", "middle") .text(function(d) { return Math.round(100*d.y)+"%" }) .style("font", "10px sans-serif"); } return svg.node(); }34:[] 31:{"id":"40c9f89e1cad2e6b","slug":"chaos-example","title":"Chaos Example:","thumbnail":"82a4a449d2ee1e5b1349b4d8610e533da210045c892dd94f2cc89b45afc86372","access_level":"public","create_time":"$D2018-02-18T13:27:25.568Z","update_time":"$D2024-05-01T10:39:00.351Z","view_time":null,"first_public_time":"$D2018-02-18T21:16:47.993Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ae5e0aa7324794cc","login":"ahojsenn","name":"Johannes Mainusch","avatar_url":"https://avatars-next.observableusercontent.com/e0207661263f514787582149fc224d289f2498ae5ad80bd02aaa3145c65b94d2","tier":"starter_2024"},"version":272,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"277b45a6eb5af5e8","login":"ahojsenn","name":"Johannes Mainusch","avatar_url":"https://avatars-next.observableusercontent.com/e0207661263f514787582149fc224d289f2498ae5ad80bd02aaa3145c65b94d2","tier":null}],"members":[{"type":"individual","id":"277b45a6eb5af5e8","login":"ahojsenn","name":"Johannes Mainusch","avatar_url":"https://avatars-next.observableusercontent.com/e0207661263f514787582149fc224d289f2498ae5ad80bd02aaa3145c65b94d2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Chaos Example:","cells":[{"id":0,"value":"md`# Chaos Example:\n\nYoY growth of frogs in the pond.\nTo predict the number of frogs next year, we measure the density (N) of frogs in the pond this year. \nBrilliant mathematicians say, next years density of frogs (N1) will be calculated by \n\n N1 = λ*N*(1-N) \n\nWhere λ is a growth factor, that relates to the food and subsequently frog reproduction rate. Basically λ has to do with the frogs sexlife.\nRead:\nThe curious incident of the dog in the night-time by Mark Haddon!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"lambdaform = html `\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"height = 150","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"