Public
Edited
Feb 15, 2023
md`# Scratch`
data = FileAttachment("ECDC_rates.json").json()
{
const sortMap = a => a=='R' ? 0 : a=='Y' ? 1 : 2;
const arr = ['Y','G','R'];
const arrS = arr.sort((a,b) => sortMap(a) - sortMap(b));
return arrS;
}
function transpose(m) {
return m[0].map((x,i) => m.map(x => x[i]));
}
eventMask = [[false, true, false],[false, true, true],[false, false, true]];
function countIn2DArr(arr, predicate = a=>a) {
let ret = 0;
arr.forEach(a => a.forEach(b => ret += (predicate(b) ? 1 : 0)));
return ret;
}
countIn2DArr(eventMask)
{// Set up the SVG canvas
const width = 500;
const height = 500;
const margin = { top: 20, right: 20, bottom: 20, left: 20 };
const svg = d3.select(DOM.svg(width, height));
svg.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// Set the scale for the x-axis and y-axis
const xScale = d3.scaleLinear().domain([0, 1]).range([0, width]);
const yScale = d3.scaleLinear().domain([0, 1]).range([height, 0]);
// Create the x-axis and y-axis
const xAxis = d3.axisBottom(xScale).tickFormat(d3.format('.2f')).tickSize(-height);
const yAxis = d3.axisLeft(yScale).tickFormat(d3.format('.2f')).tickSize(-width);
// Add the x-axis and y-axis to the SVG canvas
svg.append('g')
.attr('class', 'x-axis')
.attr('transform', `translate(0, ${height})`)
.call(xAxis);
svg.append('g')
.attr('class', 'y-axis')
.call(yAxis);
// Add lines originating at (0,0) and ending at right- and top- bounds, slanted at different angles
for (let i = 0; i <= 90; i += 15) {
const radians = i * Math.PI / 180;
const x2 = 1;
const y2 = 1/Math.tan(radians);
svg.append('line')
.attr('x1', xScale(0))
.attr('y1', yScale(0))
.attr('x2', xScale(x2))
.attr('y2', yScale(y2))
.attr('stroke', 'black')
.attr('stroke-width', 2)
.attr('stroke-dasharray', '4 2');
}
// Add labels for the B04 and B08 axes
svg.append('text')
.attr('x', xScale(0.5))
.attr('y', height + 15)
.attr('text-anchor', 'middle')
.text('B04');
svg.append('text')
.attr('x', -15)
.attr('y', yScale(0.5))
.attr('text-anchor', 'end')
.text('B08')
.attr('transform', 'rotate(-90, -15, ' + yScale(0.5) + ')');
return svg.node();
}
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.
