Published unlisted
Edited
Sep 22, 2020
mc_scatterplot = {
let svg = d3.create('svg').attr('width', width).attr('height', height)
let g = svg.append('g').attr('transform', `translate(${pad},${pad})`)
// TODO: data join on your data Array to create a scatterplot of circles
// * use your linear scales to position the circles
// * assign a fill to each circle that is unique to its category: terrier, or hound
// TODO: axes for your scales
return svg.node()
}
viewof bin_res = slider({
min: 10,
max: 50,
step: 1,
value: 1,
description: 'Bin resolution'
})
binned_scatterplot = {
let svg = d3.create('svg').attr('width', width).attr('height', height)
let g = svg.append('g').attr('transform', `translate(${pad},${pad})`).attr('class', 'plot')
// Optional: create a black background rectangle, to make your rectangles in the heatmap pop out
// TODO: perform your data join, creating a rectangle for every cell in binned_data
// * you will use your band scales to determine the x and y positions
// * you will use the bandwidths of the band scales to determine the width and height of rectangles
// * you will use your complementary color scale for the fill of the rectangle
// TODO: axes (use the same linear scales that you used in the above scatterplot)
return svg.node()
}
binned_data = {
let binned_data = []
return binned_data
}
data = FileAttachment("vgg_umap@4.json").json()
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.
