@kommitment
https://www.kommitment.works
Public
Edited
May 1, 2024
lambdaform = html `
<form>
<div class="plot">
<input type="range" id="nLambda"
min="1.1"
max="4"
step="0.001"
value="2">
λ = <span id="nLambda-value">2.0</span>
<br>
<svg class="chart" ></svg>
</div>
</form>
`
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();
}
height = 150
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
