Public
Edited
Oct 28, 2022
createHeader = (g, { data }) => {
g.selectAll('g')
.data(data)
.join('g')
.attr('transform', d => `translate(${yH(d)}, 0)`)
.each(function createHeaderCell(d,i) {
const item = d3.select(this)
.call(createBox, { label: capitalize(d) });
});
}
createRows = (g, { data }) => {
const rowData = data.map(({ label, status }) => [
{ id: 'label',
type: 'text',
value: label,
},
...WEEKDAYS.map((id) => ({
id,
type: 'solid',
value: status[id],
}))
]);
g.selectAll('g')
.data(rowData)
.join('g')
.each(function (d,i) {
const item = d3.select(this)
.call(createRow, { data: d, rowNumber: i + 1 });
});
}
createRow = (g, { data, rowNumber }) => {
g.selectAll('g')
.data(data)
.join('g')
.attr('transform', d => `translate(${yH(d.id)}, ${yV(rowNumber)})`)
.each(function createHeaderCell(d,i) {
const item = d3.select(this)
.call(createBox, { label: capitalize(d.value) });
});
}
createBox = (g, { label }) => {
g.append('rect')
.attr('rx', 5)
.attr('ry', 5)
.attr('fill', OPTIONS.COLORS.HEADER_FILL)
.attr('stroke', OPTIONS.COLORS.HEADER_STROKE)
.attr('width', OPTIONS.ROW.WIDTH)
.attr('height', OPTIONS.ROW.HEIGHT);
g.append('text')
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.attr('x', OPTIONS.ROW.WIDTH / 2)
.attr('y', OPTIONS.ROW.HEIGHT / 2)
.text(label);
}
yH = d3.scaleBand()
.domain(COLUMNS)
.range([200, OPTIONS.WIDTH])
.paddingInner(0.2);
yV = d3.scaleLinear()
.domain([0, 10])
.range([0, OPTIONS.HEIGHT]);
data = [
getRowData('A', 'WWW?H'),
getRowData('B', 'WWW?H'),
getRowData('C', 'WWW?H'),
getRowData('D', 'WWW?H'),
getRowData('E', 'WWW?H'),
getRowData('F', 'WWW?H'),
]
getRowData = (label, status) => ({ label, status: stringToStatus(status)})
capitalize = (str) => `${str[0].toUpperCase()}${str.slice(1)}`
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.
