25:["$","title",null,{"children":"Chaos 2 | Johannes Mainusch | Observable"}] 4c:T20fc,{ var yMax = 1, yMin = 0, iterations = 100, rectSize = 5, xMin = 1, xMax = 4; var data = generateData (xMin, xMax, iterations); plotBifurcationChart (data); // // select and update the slider for xMin // d3.select("#xMin") .on("input", function() { xMin = (this.value < xMax) ? this.value : xMax*0.9999; d3.select("#xMin-value").text(+xMin); data = generateData (xMin, xMax, iterations); plotBifurcationChart (data); }); // // select and update the slider for xMax // d3.select("#xMax") .on("input", function() { xMax = (this.value > xMin) ? this.value : xMin*1.0001; d3.select("#xMax-value").text(+xMax); data = generateData (xMin, xMax, iterations); plotBifurcationChart (data); }); // // get document.width // function getDocumentWidth () { // get document width , this is from the internet... 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 generateData (xMin, xMax, iterations) { var myArray = [], point = {}, lambda = xMin, y=0.01; do { for (var i=0; i 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("lambda"); chart .append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", -40) .attr("dy", ".71em") .style("text-anchor", "end") .text("y"); /* the circes */ var bar = chart.selectAll("bar") .data(data) .enter(); var circle = bar.append("circle") .attr("class", "crc") .attr("cx", function(d) { return x(d.x); }) .attr("cy", function(d) { return y(d.y); }) .attr("r", 3 ); /* the mouse positiion */ var chart = d3.select(".chart"); chart.on("mouseout", function () { chart.selectAll(".redLine").remove(); }) chart.on("mousemove", // drawRedLine function () { var mx = d3.mouse(this)[0], my = d3.mouse(this)[1]; chart.selectAll(".redLine").remove(); d3.select("#xMouse-value").text(mx) d3.select("#yMouse-value").text(my) //console.log (d3.mouse(this)); chart .append ("path") .attr("class", "redLine") .attr("stroke", "red") .attr("d", "M "+mx+","+(height+margin.top)+",L "+mx+","+0+" Z"); chart .append ("text") .attr("class", "redLine") .text( Math.round(10000*x.invert(mx-margin.left))/10000 ) .attr("x", mx+2) .attr("y", 0) .attr("dy", ".75em") .attr("fill", "red") .attr("text-anchor", "left") .style("font", "12px sans-serif"); var histogram = new Histogram1D ( yMin, yMax, 100); var tmpx = x.invert(mx-margin.left); var tmpData = generateData (tmpx, tmpx, 2000); for (var i = 0; i< tmpData.length; i++) { //console.log ("filling: "+ tmpData[i].y ); histogram.fill (tmpData[i].y); } //histogram.plot(); plotHistogram ( histogram ); } ); } // // plot a Histogram // function plotHistogram (histogram) { //console.log ("in plotHistogram: " + histogram.bins[4]); var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 0.85*getDocumentWidth()/2 - margin.left - margin.right, height = 300 - margin.top - margin.bottom; d3.select("#histogram g").remove(); // remove old svg 'g' elements var histogramDiv = d3.select("#histogram") //let histogramDiv = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)) //.attr("id", "histogram") .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([histogram.xMin, histogram.xMax]); var y = d3.scaleLinear() // .domain([0, d3.max(data, function(d) { return d.y; })]) .range([height, 0]) .domain([0, d3.max(histogram.bins) ]); /* 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)) histogramDiv .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("distribution of y");; histogramDiv .append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", -40) .attr("dy", ".71em") .style("text-anchor", "end") .text("y"); var lineFunction = d3.line() .x(function (d,i) { return x(i/histogram.nBins); }) .y(function (d,i) { return y(d)}); histogramDiv.append("path") .attr("d", lineFunction(histogram.bins) ) .attr('stroke', 'blue') .attr('stroke-width', 2) .attr('fill', 'none'); // textbox stats histogramDiv.append("text") // .attr("class", "axis") .attr("y", 10) .attr("x", 10) .append("tspan") .text("N: " + histogram.nEntries) .append("tspan") .text("underflow: " + histogram.underflow) .attr("x", 10) .attr("dy", 10) .append("tspan") .text("overflow: " + histogram.overflow) .attr("x", 10) .attr("dy", 10) .append("tspan") .text("average: " + Math.round (histogram.average*100)/100) .attr("x", 10) .attr("dy", 10); } }4d:[] 48:{"id":"c307c1cfc790f76e","slug":"chaos-2","title":"Chaos 2","thumbnail":"6c43016a1c76de1af66f4c897dd45edc305f2c4bb09478835b28a0b35caa91f2","access_level":"public","create_time":"$D2018-02-19T19:11:49.389Z","update_time":"$D2018-03-06T18:12:36.728Z","view_time":null,"first_public_time":"$D2018-02-20T22:07:48.046Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"ae5e0aa7324794cc","login":"ahojsenn","name":"Johannes Mainusch","avatar_url":"https://avatars-next.observableusercontent.com/e0207661263f514787582149fc224d289f2498ae5ad80bd02aaa3145c65b94d2","tier":"starter_2024","bio":"@kommitment\n\nhttps://www.kommitment.works","followed_by_you":false,"follows_you":false},"version":322,"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,"bio":"@kommitment\n\nhttps://www.kommitment.works","followed_by_you":false,"follows_you":false}],"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Chaos 2","cells":[{"id":0,"value":"md`# Chaos 2\nThis is taking the [logistic equation](https://beta.observablehq.com/@ahojsenn/chaos-example) a little further, building something to look into stable and chaotic regions...\n
\nN(t+1) = λ*N(t)*(1-N(t))\n
\n

\n xMouse = xxx\n yMouse = xxx\n
`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"myForm = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":" html` `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"import {viewof Histogram1D} from \"@ahojsenn/histogram1d\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"documentWidth = {\n//\n// get document.width\n//\nfunction getDocumentWidth () {\n // get document width , this is from the internet...\n var width = document.width;\n if (width === undefined) {\n // if document width fails, e.g., this page http://jblevins.org/projects/markdown-mode/\n // then find the biggest element available to grab width\n var widthElt = (document.getElementsByTagName('html')[0] ||\n document.getElementsByTagName('body')[0] ||\n document.querySelector('*'));\n\n // use widthElt’s width or worst-case fallback to the window\n width = widthElt ? widthElt.offsetWidth : window.innerWidth;\n }\n return width;\n}\n return getDocumentWidth ();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"xMin = Generators.input(myForm.xMin)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"xMax = Generators.input(myForm.xMax)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"data = {\n let iterations = 100;\n //\n// this funditon creates the chaotic data\n//\nfunction generateData (xMin, xMax, iterations) {\n\tvar myArray = [],\n point = {},\n lambda = xMin,\n y=0.01;\n do {\n for (var i=0; i\n.axis text,tspan{\n font: 10px sans-serif;\n }\n\n .axis path,\n .axis line {\n fill: none;\n stroke: #000;\n shape-rendering: crispEdges;\n }\n\n .plot {\n background-color: rgba(220, 220, 220, 0.2);\n }\n\n .chart,.histogram {\n background-color: rgba(200, 200, 200, 0.2);\n border: solid grey 1px;\n margin: 10px;\n padding: 5px;\n }\n\n .crc {\n fill: rgba(0, 0, 200, 0.2);\n }\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null