Ph.D. Student at UC Berkeley EECS. Prev. @FormidableLabs.
Public
Edited
Oct 11, 2021
1 fork
1 star
function collatz(n, stoppingTime = 0) {
// Base case, n has reached 1.
if (n === 1) {
return stoppingTime;
}
// Recursive case: n is even.
if (n % 2 === 0) {
return collatz(n / 2, stoppingTime + 1);
}
// Recursive case: n is odd.
return collatz(3 * n + 1, stoppingTime + 1);
}
collatzScatterplot = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// Define scales.
const x = d3
.scaleLinear()
.domain(d3.extent(dataScatterplot, (d) => d.x))
.rangeRound([margin.left, width - margin.right]);
const y = d3
.scaleLinear()
.domain(d3.extent(dataScatterplot, (d) => d.y))
.rangeRound([height - margin.bottom, margin.top]);
// Generate the scatterplot points.
svg
.append("g")
.selectAll("circle")
.data(dataScatterplot)
.join("circle")
.attr("cx", (d) => x(d.x))
.attr("cy", (d) => y(d.y))
.attr("fill", "steelblue")
.attr("r", 3);
// Define axes.
const xAxis = svg
.append("g")
.attr("transform", `translate(0, ${height - 35})`)
.call(d3.axisBottom(x).tickSizeOuter(0));
xAxis
.append("text")
.attr("x", width - margin.right)
.attr("y", -10)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.attr("font-size", "0.75rem")
.attr("font-weight", "bold")
.attr("font-family", "'Helvetica Neue', sans-serif")
.text("Starting value (n)");
const yAxis = svg
.append("g")
.attr("transform", `translate(${margin.left - 5}, 0)`)
.call(d3.axisLeft(y).tickSizeOuter(0));
yAxis
.select(".tick:last-of-type text")
.clone()
.attr("x", 10)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.attr("font-size", "0.75rem")
.attr("font-family", "'Helvetica Neue', sans-serif")
.text("Stopping time");
svg.selectAll(".tick line").remove();
return svg.node();
}
collatz(9248)
collatz(27)
collatzHistogram = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const max = d3.max(dataHistogram);
// Generate a threshold for each stopping time value.
const thresholds = [];
for (let i = 0; i <= max; i++) {
thresholds.push(i);
}
// Apply the data to the thresholds.
const bins = d3.bin().thresholds(thresholds)(dataHistogram);
// Define scales.
const x = d3
.scaleLinear()
.domain([bins[0].x0, bins[bins.length - 1].x1])
.range([margin.left, width - margin.right]);
const y = d3
.scaleLinear()
.domain([0, d3.max(bins, (d) => d.length)])
.nice()
.range([height - margin.bottom, margin.top]);
// Generate bars for the histogram.
svg
.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(bins)
.join("rect")
.attr("x", (d) => x(d.x0) + 1)
.attr("width", (d) => Math.max(0, x(d.x1) - x(d.x0) - 1))
.attr("y", (d) => y(d.length))
.attr("height", (d) => y(0) - y(d.length));
// Generate axes.
const xAxis = svg
.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(
d3
.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0)
);
xAxis
.append("text")
.attr("x", width - margin.right)
.attr("y", -15)
.attr("fill", "currentColor")
.attr("font-weight", "bold")
.attr("font-size", "0.75rem")
.attr("font-weight", "bold")
.attr("font-family", "'Helvetica Neue', sans-serif")
.attr("text-anchor", "end")
.text("Stopping time");
const yAxis = svg
.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y).tickSizeOuter(0));
yAxis
.select(".tick:last-of-type text")
.clone()
.attr("x", 10)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.attr("font-size", "0.75rem")
.attr("font-family", "'Helvetica Neue', sans-serif")
.text("Number of starting values (n) in bin");
svg.selectAll(".tick line").remove();
return svg.node();
}
collatzHistogramBin5 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const max = d3.max(dataHistogram);
// Generate a threshold for each stopping time value.
const thresholds = [];
for (let i = 0; i <= max; i += 5) {
thresholds.push(i);
}
// Apply the data to the thresholds.
const bins = d3.bin().thresholds(thresholds)(dataHistogram);
// Define scales.
const x = d3
.scaleLinear()
.domain([bins[0].x0, bins[bins.length - 1].x1])
.range([margin.left, width - margin.right]);
const y = d3
.scaleLinear()
.domain([0, d3.max(bins, (d) => d.length)])
.nice()
.range([height - margin.bottom, margin.top]);
// Generate bars for the histogram.
svg
.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(bins)
.join("rect")
.attr("x", (d) => x(d.x0) + 1)
.attr("width", (d) => Math.max(0, x(d.x1) - x(d.x0) - 1))
.attr("y", (d) => y(d.length))
.attr("height", (d) => y(0) - y(d.length));
// Generate axes.
const xAxis = svg
.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(
d3
.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0)
);
xAxis
.append("text")
.attr("x", width - margin.right)
.attr("y", -15)
.attr("fill", "currentColor")
.attr("font-weight", "bold")
.attr("font-size", "0.75rem")
.attr("font-weight", "bold")
.attr("font-family", "'Helvetica Neue', sans-serif")
.attr("text-anchor", "end")
.text("Stopping time");
const yAxis = svg
.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y).tickSizeOuter(0));
yAxis
.select(".tick:last-of-type text")
.clone()
.attr("x", 10)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.attr("font-size", "0.75rem")
.attr("font-family", "'Helvetica Neue', sans-serif")
.text("Number of starting values (n) in bin");
svg.selectAll(".tick line").remove();
return svg.node();
}
dataHailstone = new Array(100).fill().reduce((acc, _, i) => {
const line = [];
let currentN = i + 1;
function collatz(n, iteration) {
line.push({ value: n, iteration: iteration });
if (n === 1) {
return line;
}
if (n % 2 === 0) {
return collatz(n / 2, iteration + 1);
}
return collatz(3 * n + 1, iteration + 1);
}
return [...acc, collatz(currentN, 0)];
}, [])
collatzHailstone = {
replay;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const x = d3
.scaleLinear()
.domain(d3.extent(dataHailstone.flat().map((d) => d.iteration)))
.range([margin.left, width - margin.right]);
const y = d3
.scaleLinear()
.domain(d3.extent(dataHailstone.flat().map((d) => d.value)))
.range([height - margin.top, margin.bottom]);
const xAxis = svg
.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(
d3
.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0)
);
xAxis
.append("text")
.attr("x", width - margin.right)
.attr("y", -15)
.attr("fill", "currentColor")
.attr("font-weight", "bold")
.attr("font-size", "0.75rem")
.attr("font-weight", "bold")
.attr("font-family", "'Helvetica Neue', sans-serif")
.attr("text-anchor", "end")
.text("Iteration Count");
const yAxis = svg
.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y).tickSizeOuter(0));
yAxis
.select(".tick:last-of-type text")
.clone()
.attr("x", 10)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.attr("font-size", "0.75rem")
.attr("font-family", "'Helvetica Neue', sans-serif")
.text("Computation Value");
svg.selectAll(".tick line").remove();
const paths = dataHailstone.map((datum) => {
const line = d3
.line()
.curve(d3.curveBasis)
.x((d) => x(d.iteration))
.y((d) => y(d.value));
return line(datum);
});
svg
.append("g")
.selectAll(".line")
.remove()
.data(paths)
.join("path")
.attr("class", ".line")
.attr("d", (d) => d)
.attr("stroke", "steelblue")
.attr("fill", "none")
.attr("stroke-miterlimit", "1")
.attr("stroke-dasharray", "0,1")
.call(reveal);
return svg.node();
}
reveal = (path) =>
path.each(function (p, i) {
d3.select(this)
.transition()
.delay(i * 500)
.duration(500)
.attrTween("stroke-dasharray", function () {
const length = this.getTotalLength();
return d3.interpolate(`0,${length}`, `${length},${length}`);
});
})
height = 600
margin = ({ top: 40, left: 60, right: 40, bottom: 40 });
d3 = require('d3@6');
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.