Published unlisted
Edited
Apr 10, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
plot = {
let svg = d3.create('svg').attr('width', width).attr('height', height)
let g = svg.append('g').attr('transform', `translate(${margin},${margin})`)
// label the view
svg.append('line').attr('x1', 5).attr('x2', width-10).attr('y1', 10).attr('y2', 10)
.attr('stroke', d3.hcl(0,0,50)).attr('stroke-width', 3)
svg.append('rect').attr('x', margin-2).attr('y', 5).attr('width', 204).attr('height', 24)
.attr('stroke', 'none').attr('fill', d3.hcl(0,0,100))
svg.append('text').attr('x', margin).attr('y', 17).attr('fill', d3.hcl(0,0,30))
.attr('font-size', '22px').text('Channel Correlation')
// create links between clusters
// overlay links between clusters for the selected instances
// draw rectangles for all clusters
// support hovering of links
return svg.node()
}
Insert cell
linked_scatterplot = {
let local_margin = 10, total_scatter_size = scatter_size+local_margin*2
let svg = d3.create('svg').attr('width', width).attr('height', total_scatter_size+margin)
let g = svg.append('g').attr('transform', `translate(${local_margin},${margin})`)
// label the view
svg.append('line').attr('x1', 5).attr('x2', width-10).attr('y1', 10).attr('y2', 10)
.attr('stroke', d3.hcl(0,0,50)).attr('stroke-width', 3)
svg.append('rect').attr('x', margin-2).attr('y', 5).attr('width', 183).attr('height', 24)
.attr('stroke', 'none').attr('fill', d3.hcl(0,0,100))
svg.append('text').attr('x', margin).attr('y', 17).attr('fill', d3.hcl(0,0,30))
.attr('font-size', '22px').text('Sample Projection')
// draw scatterplot of instances
// support brushing of scatterplot:
// 1. gather instances that fall within the brush
// 2. populate grid of images from the instances
// 3. update correlation view with those selected instances
return svg.node()
}
Insert cell
viewof plot_view = drawdom(plot,4)
Insert cell
plot_view
Insert cell
Insert cell
mutable selected_ids = []
Insert cell
Insert cell
Insert cell
height = 500
Insert cell
margin = 40
Insert cell
plot_width = width-2*margin
Insert cell
plot_height = height-2*margin
Insert cell
cluster_height = margin/2
Insert cell
r = 5
Insert cell
scatter_size = 300
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more