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();
}
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.