Published
Edited
Aug 15, 2022
1 star
finalVis = {
const svg = html `<svg width=${width} height=${height} />`
d3.select(svg)
.selectAll('path') // this is just a random entity name
.data( voices_rests )
.join('path')
// Using our line generator here
.attr('d', line.defined(d => d.value !== null)) // to achieve breaking of line --> line segments
.style('stroke', coloring)
//.style('stroke', d => colors(d))
//.style('stroke', 'black')
.style('stroke-width', 2)
.style('fill', 'transparent')
d3.select(svg)
.append('g')
.attr('transform', `translate(0,${ height - margin.bottom })`)
.call(xAxis)
// This removes the horizontal line on the axis between the ticks and the rest of the chart.
// Purely an aesthetic choice
.selectAll('.domain').remove()
// x-axis label
d3.select(svg)
.append('text')
.attr('x', width/2)
.attr('y', height)
.attr('text-anchor', 'middle')
.style('font-size', '12px')
.style('font-weight', 'bold')
.text("Time")
d3.select(svg)
.append('g')
.attr('transform', `translate(${ margin.left },0)`)
.call(yAxis)
// This removes the vertical line on the axis between the ticks and the rest of the chart.
// Purely an aesthetic choice
.selectAll('.domain').remove()
// y-axis label
d3.select(svg)
.append('g')
.attr('transform', `translate(${margin.left - 25},${(height - margin.bottom + margin.top)/2 + 12})`)
.append('text')
.attr('transform', 'rotate(270)')
.attr('text-anchor', 'start')
.style('font-size', '12px')
.style('font-weight', 'bold')
.text('Pitches (midi)')
return svg
}
wtc1f01 = FileAttachment("wtc1f01.mid")
unclean_data = midiconvert.parse(await wtc1f01.arrayBuffer())
data = unclean_data.tracks.filter(t => t.notes.length !=0)
notes = data.map(t => t.notes)
notes.forEach(function(voice,index,array){
voice.forEach(function(t,index,array){
t.offset = t.time + t.duration;
t.class = "onset";
})
})
voices_offsets = {
let voices_offsets = [];
// for each array item within our central array
notes.forEach(function(voice,index,array){
// create a new array
let voice_offsets = [];
for(let i=0; i<voice.length; i++){
voice_offsets.push(voice[i]);
let offset = {midi:voice[i].midi, time:voice[i].offset, class:'offset'};
voice_offsets.push(offset);
}
voices_offsets.push(voice_offsets);
// yield voices_offsets;
})
// get the new created arrays
yield voices_offsets; // use yield (instead of return) for handling the data load
}
voices_rests = {
let voices_rests = [];
// for each array item within our central array
voices_offsets.forEach(function(voice_offsets,index,array){
// create a new array
let voice_rests = [];
voice_rests.push(voice_offsets[0]);
for(let i=1; i<voice_offsets.length; i++){
if ((voice_offsets[i].time != voice_offsets[i-1].time) && (voice_offsets[i].class == 'onset')){
// include extra point before with value null
voice_rests.push({value:null});
voice_rests.push(voice_offsets[i]);
} else {
voice_rests.push(voice_offsets[i]);
}
}
voices_rests.push(voice_rests);
})
// get the new created arrays
return voices_rests;
}
// we need to flatt all offsets (time + duration) in one array
// we first get to the level of t.notes and we flat them into one array; there we get for each item the offset (time + duration)
offsets = data.map(t => t.notes).flat().map(d => d.time + d.duration)
startTime = 0
endTime = Math.max(...offsets)
xScale = d3.scaleLinear(
// domain
[ startTime, endTime ],
// range
[ margin.left, width - margin.right ]
)
xAxis = d3.axisBottom(xScale)
yScale = d3.scaleLinear(
// The lowest key on the piano is MIDI note number 21. The highest key is MIDI note number 108.
[ 21, 108 ],
[ height - margin.bottom, margin.top ]
)
yAxis = d3.axisLeft(yScale)
colors = {
return d3.scaleOrdinal(
voices_rests,
d3.schemeCategory10
)
}
line = d3.line()
.x(d => xScale(d.time))
.y(d => yScale(d.midi))
.curve(curveStyle)
width = 900
height = 500
margin = ({
top: 10,
right: 80,
bottom: 30,
left: 35
})
midiconvert = require('midiconvert')
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.