Public
Edited
Dec 6, 2022
data = d3.csv("https://idk-etl-prod-download-bucket.s3.amazonaws.com/aibs_human_ctx_smart-seq/tsne.csv", d3.autoType);
metadata = d3.csv("https://idk-etl-prod-download-bucket.s3.amazonaws.com/aibs_human_ctx_smart-seq/metadata.csv")
width = 400;
height = 400;
{
return [d3.min(data, d => d.tsne_2), d3.max(data, d => d.tsne_2)]
}
{
return [d3.min(data, d => d.tsne_1), d3.max(data, d => d.tsne_1)]
}
x = d3.scaleLinear()
.range([0, width])
.domain([d3.min(data, d => d.tsne_1), d3.max(data, d => d.tsne_1)]);
y = d3.scaleLinear()
.range([height, 0])
.domain([d3.min(data, d => d.tsne_2), d3.max(data, d => d.tsne_2)]);
// context = DOM.context2d(width, height);
{
const canvas = DOM.canvas(width, height);
const context = canvas.getContext("2d");
data.forEach(d => {
context.beginPath();
context.arc(x(d.tsne_1), y(d.tsne_2), 2, 0, 2 * Math.PI);
context.fill();
});
return canvas;
// const canvas = DOM.canvas(width, height);
// const context = canvas.getContext("2d");
// const colorScale = d3.scaleOrdinal(d3.schemeTableau10)
// const points = data;//[ {x: 10, y: 10, value: 50}, {x: 20, y: 20, value: 60}, {x: 30, y: 30, value: 70}];
// data.forEach(d => {
// context.beginPath();
// context.arc(xScale(d.tsne_1), yScale(d.tsne_2), 1.5, 0, 2 * Math.PI, false);
// // context.fillStyle = colorScale(d.sample_name);
// context.fill();
// });
// context.canvas.call(zoom);
// return context.canvas
}
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.
