The avatar for @emfielduva
Eric Field
Building and Using Tools to See. UVA Architecture + Data Science. IT Director. Instructor.
Public
Edited
Feb 6, 2024
Insert cell
Insert cell
count = 200
Insert cell
<style>
#mosaic {line-height: 0}
#mosaic div {
width: 20px;
height: 20px;
display: inline-block;
}
</style>
Insert cell
<div id="mosaic"></div>
Insert cell
randColor = () => {
let r = Math.random() * 255;
let g = Math.random() * 255;
let b = Math.random() * 255;
return "rgb(" + r +"," + g +"," + b +")";
}
Insert cell
randColor()
Insert cell
boxes = d3.select(mosaic)
.selectAll("div")
.data(d3.range(count))
.join("div")
.style("background-color", randColor)
Insert cell
Insert cell
randLocation =() => Math.random() * 400
Insert cell
circles = d3.select(randCircles)
.selectAll("circle")
.data(d3.range(count))
.join("circle")
.attr("cx", randLocation)
.attr("cy", randLocation)
.attr("r", 12)
.style("fill","yellow")
.style("stroke","black")
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