The avatar for @msurguy
Maksim Surguy
Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy
Published
Edited
Feb 23, 2021
9 stars
2
Insert cell
md`# Mars Waveform`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Waveform = waveformData.create(waveformPeaksFile)
Insert cell
Insert cell
x = d3
.scaleLinear()
.domain([0, Waveform.length * 2])
.rangeRound([0, width])
Insert cell
y = d3
.scaleLinear()
.domain([d3.min(min_frequencies), d3.max(max_frequencies)])
.rangeRound([height / 2, -height / 2])
Insert cell
min_frequencies = channelData.min_array()
Insert cell
max_frequencies = channelData.max_array()
Insert cell
curve = d3.curveLinear
Insert cell
area = d3
.line()
.x((d, i) => x(i))
.y((d, i) => y(d))
.curve(d3.curveNatural)
// .curve(d3.curveStep) // Try this one for fun
Insert cell
Insert cell
chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height);

svg

.datum(waveformPeaks)
.append("path")
.attr('transform', () => `translate(0, ${height / 2})`)
.attr("d", area)
.attr("fill", "none")
.attr('stroke', 'black')
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr('stroke-width', '0.1mm');

return svg.node();
}
Insert cell
d3 = require("d3@6")
Insert cell
import { slider } from "@jashkenas/inputs"
Insert cell

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.
Learn more