example = Piano([60], {start: 48, end: 88})
Piano = function(notes, options) {
return diagram(makePiano(notes, options));
}
P = function(notes, options) {
return diagram(makePiano(notes, options));
}
function diagram(piano) {
const selectedColor = "#f1ff5e";
const height = piano.filter(key => key.type=="white")[0].coord.y.max
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// Draw white keys first: cannot set z-index for svg
svg.selectAll("rect.white").data(piano.filter(key => key.type=="white"))
.enter()
.append("rect")
.attr("x", key => key.coord.x.min)
.attr("y", key => key.coord.y.min)
.attr("width", key => key.coord.x.max - key.coord.x.min)
.attr("height", key => key.coord.y.max - key.coord.y.min)
.attr("stroke", "#ccc")
.attr("fill", key => key.selected ? selectedColor : "#fff")
.attr("stroke-width", 1);
// Draw black keys
svg.selectAll("rect.black").data(piano.filter(key => key.type=="black"))
.enter()
.append("rect")
.attr("x", key => key.coord.x.min)
.attr("y", 0)
.attr("width", key => key.coord.x.max - key.coord.x.min)
.attr("height", key => key.coord.y.max - key.coord.y.min)
.attr("stroke", "#ccc")
.attr("fill", "#444")
.attr("stroke-width", 1);
svg.selectAll("rect.black").data(piano.filter(key => key.type=="black" && key.selected))
.enter()
.append("rect")
.attr("x", key => key.coord.x.min + 2)
.attr("y", 0)
.attr("width", key => key.coord.x.max - key.coord.x.min - 4)
.attr("height", key => key.coord.y.max - key.coord.y.min - 2)
.attr("fill", selectedColor)
return svg.node();
}
// Create a piano object that contains informations to draw piano keyboard
function makePiano(selected=[], opt) {
const widthRatio=0.7;
const heightRatio=0.6;
const defaults = {
start: 29,
end: 101
};
let options = Object.assign({}, defaults, opt);
const lowestNote = options.start;
const highestNote = options.end;
const numKeys = highestNote - lowestNote + 1;
const isWhite = num => ![1, 4, 6, 9, 11].includes((num + lowestNote + 3) % 12);
const numLowerWhites = keyIndex => (
d3.range(keyIndex).reduce((acc, val) => (isWhite(val) ? acc+1 : acc), 0)
);
// Total # of white keys
const numWhiteKeys = numLowerWhites(numKeys);
// Dimension of keys
const whiteWidth = width / numWhiteKeys;
const blackWidth = whiteWidth * widthRatio;
const height = whiteWidth * 6;
return d3.range(numKeys).map(i => {
const num = i+lowestNote
const offset = isWhite(i) ? 0 : -blackWidth/2;
return {
index: i,
num,
type: isWhite(i) ? "white" : "black",
// Piano coordinate: x: lower to higher key, y: near to far
coord: {
x: {
min: whiteWidth * numLowerWhites(i) + offset,
max: whiteWidth * numLowerWhites(i) + offset + (isWhite(i) ? whiteWidth : blackWidth)
},
y: {
min: isWhite(i) ? 0 : (1 - heightRatio) * height,
max: height
}
},
selected: selected.includes(i+lowestNote),
};
})
}
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.
