Also listed in…
Music
// {
// if (!note) return
// const g = d3.select(svg).select('g.notes')
// const playTime = note[0].playTime || 0
// const y = d3.scaleLinear([ now - start - 2000, now - start + 3000 ], [ width / 3, 0 ])
// const rects = g.selectAll('rect').data(notes, d => d.index)
// rects.enter()
// .append('rect')
// .attr('width', 20)
// .attr('height', 8)
// .attr('rx', 2)
// .attr('x', d => {
// const instrument = instrumentsByMidi[d.param1]
// const dx = _.findIndex(instrument.keys, { midi: d.param1 }) * column.bandwidth() / 4
// return column(instrument.index) + dx
// })
// .attr('fill', d => color(instrumentsByMidi[d.param1].index))
// .merge(rects)
// .attr('y', d => y(d.playTime))
// .attr('opacity', d => d.playTime <= playTime ? 1 : 0.2)
// return g.node()
// }
// instrumentsByMidi = {
// const keys = {}
// for (const i of instruments)
// for (const { midi } of i.keys)
// keys[midi] = i
// return keys
// }
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.
