Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<div id="mosaic"></div>
count = 200 // change this number and hit Run Cell >
<style>
#mosaic {line-height: 0}
#mosaic div {
width: 20px;
height: 20px;
display: inline-block;
}
</style>
randColor = () => {
let r = Math.random() * 255;
let g = Math.random() * 255;
let b = Math.random() * 255;
return "rgb(" + r + "," + g + "," + b + ")";
}
boxes = d3.select(mosaic)
.selectAll("div")
.data(d3.range(count))
.join("div")
.style("background-color", randColor)
<svg id="randcircles" width="400" height="400"></svg>
randLocation = () => Math.random() * 400
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")
.style("opacity", 0.7)
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.
