Public
Edited
Feb 24, 2021
md`# Ich denke das ist schon Faltung?`
s = document.createElement("div")
drawing = {
svg
.append("g")
.attr("transform", `translate(0,${height / 2})`)
.call(d3.axisBottom(x).ticks(2));
svg
.append("g")
.attr("transform", `translate(${width / 2},0)`)
.call(d3.axisLeft(y).ticks(4));
// ###########################
drawFunction(x => +!(x < 0 || x > 1), "red", "second");
drawFunction(t => mathjs.integrate(mul(t), -6, 6, 0.01), "cyan", "integral");
drawFunction(x => +!(x + 0 < 0 || x + 0 > 1), "blue", "mainPath");
drawFunction(mul(0), "green", "multiplication", "green");
var iteration = 0;
}
{
d3.selectAll("#mainPath")
.datum(getDataFromFunction(x => +!(x + k < 0 || x + k > 1)))
.attr(
"d",
d3
.line()
.x(d => x(d[0]))
.y(d => y(d[1]))
);
d3.selectAll("#multiplication")
.datum(getDataFromFunction(mul(k)))
.attr(
"d",
d3
.line()
.x(d => x(d[0]))
.y(d => y(d[1]))
);
}
function drawFunction(myFunction, color, id, fill) {
var data = getDataFromFunction(myFunction);
// if (id) svg.attr("id", id);
svg
.append("path")
.datum(data)
.attr("fill", fill || "none")
.attr("stroke", color)
.attr("stroke-width", 1.5)
.attr("id", id)
.attr(
"d",
d3
.line()
.x(d => x(d[0]))
.y(d => y(d[1]))
)
.style("opacity", "0.5");
}
function getDataFromFunction(myFunction) {
var myImage = myDomain.map(d => myFunction(d, 0));
return d3.zip(myDomain, myImage);
}
myDomain = linSpace(-2 * Math.PI, 2 * Math.PI, 1000)
// Create a linear space
// Start: xMin, Stop: xMax, n: numSteps
function linSpace(start, stop, n) {
var arr = [];
const step = (stop - start) / n;
for (var loc = start; loc <= stop; loc = loc + step) {
arr.push(loc);
}
return arr;
}
y = d3
.scaleLinear()
.domain([-1.1, 1.1])
.range([height, 0])
x = d3
.scaleLinear()
.domain(d3.extent(myDomain))
.range([0, width])
width = 1.618 * height - margin.left - margin.right
svg = d3
.select(s)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
mul = k => x => +!(x < 0 || x > 1) * +!(x + k < 0 || x + k > 1)
height = 500 - margin.top - margin.bottom
margin = ({ top: 10, right: 30, bottom: 30, left: 60 })
mathjs = {
var mathjs = await require("mathjs");
/**
* Calculate the numeric integration of a function
* @param {Function} f
* @param {number} start
* @param {number} end
* @param {number} [step=0.01]
*/
function integrate (f, start, end, step) {
let total = 0
step = step || 0.01
for (let x = start; x < end; x += step) {
total += f(x + step / 2) * step
}
return total
}
/**
* A transformation for the integrate function. This transformation will be
* invoked when the function is used via the expression parser of math.js.
*
* Syntax:
*
* integrate(integrand, variable, start, end)
* integrate(integrand, variable, start, end, step)
*
* Usage:
*
* math.evaluate('integrate(2*x, x, 0, 2)')
* math.evaluate('integrate(2*x, x, 0, 2, 0.01)')
*
* @param {Array.<math.Node>} args
* Expects the following arguments: [f, x, start, end, step]
* @param {Object} math
* @param {Object} [scope]
*/
integrate.transform = function (args, math, scope) {
// determine the variable name
if (!args[1].isSymbolNode) {
throw new Error('Second argument must be a symbol')
}
const variable = args[1].name
// evaluate start, end, and step
const start = args[2].compile().evaluate(scope)
const end = args[3].compile().evaluate(scope)
const step = args[4] && args[4].compile().evaluate(scope) // step is optional
// create a new scope, linked to the provided scope. We use this new scope
// to apply the variable.
const fnScope = Object.create(scope)
// construct a function which evaluates the first parameter f after applying
// a value for parameter x.
const fnCode = args[0].compile()
const f = function (x) {
fnScope[variable] = x
return fnCode.evaluate(fnScope)
}
// execute the integration
return integrate(f, start, end, step)
}
// mark the transform function with a "rawArgs" property, so it will be called
// with uncompiled, unevaluated arguments.
integrate.transform.rawArgs = true
// import the function into math.js. Raw functions must be imported in the
// math namespace, they can't be used via `evaluate(scope)`.
mathjs.import({
integrate: integrate
})
//mathjs.import(require('mathjs-simple-integral'));
return mathjs;
}
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.
