Published
Edited
Jul 15, 2021
1 fork
2 stars
md`# Spiral Waveform`
viewof audioFile = fileInput({
initialUrl: await FileAttachment("frere-jacque.mp3").url()
})
audioFile
audiobuffer.getChannelData(0).length
step = Math.floor(audiobuffer.getChannelData(0).length / nbSamples);
nonZeroIndex = rawSamples.findIndex(d => d !==0)
nonZeroIndexEnd = [...rawSamples].reverse().findIndex(d => d !==0)
samples = rawSamples.slice(nonZeroIndex, rawSamples.length -22).map(d => Math.abs(d))
transform = (numbers) => {
return Math.sqrt(Math.abs(numbers))
}
width=1200
viewof nbWindow = slider({
title: 'number of windows',
value: 10,
step: 10,
min: 10,
max: 100,
})
import {movingAverage} from "@d3/moving-average"
values = movingAverage(samples,nbWindow)
samples
md`## Utils`
lineRadial = d3.lineRadial()
.defined(d => !isNaN(d))
.angle((d,i) => xRadial(i))
.radius((d,i) => yRadial(i) + yScale(d))
areaRadial = d3.areaRadial()
.defined(d => !isNaN(d))
.angle((d,i) => xRadial(i))
.innerRadius((d,i) => yRadial(i) - yScale(d))
.outerRadius((d,i) => yRadial(i) + yScale(d))
// .radius((d,i) => yRadial(i) + yScale(d))
xRadial = d3.scaleLinear()
.domain([0, samples.length])
.range([0, 2 * Math.PI * nbSpirals])
yRadial = d3.scaleLinear()
.domain([0, samples.length])
.range([width/4, (width - margin * 2)/2])
yScale = d3.scaleLinear()
.domain(d3.extent(values))
.range([0, 40])
viewof margin = slider({
title: 'margin',
value: 10,
step: 4,
min: 0,
max: 40
})
audioContext = new (window.AudioContext || window.webkitAudioContext)();
md`## Libraries`
import { slider, checkbox } from '@jashkenas/inputs'
import {fileInput} from "@mbostock/file-input"
d3 = require("d3@6")
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.
