Public
Edited
Mar 10, 2023
numbers = [5,8,3,6,9,10]
names = ["Eric", "Michelle", "Tina"]
viz = d3.select(mySVG)
boxes = viz.selectAll("rect") //select all things inside viz and find any rectangles
.data(numbers) //binds the visual to numbers (the data)
.join("rect") // above 3 lines create 3 rectangles
.attr("width", d => d*10) // d => data; for loop
.attr("height", d=> d*10)
.attr("x", (d,i) => i*100) // i => index; spaces the elements 50 pixels apart
.attr("y", 20)
.style("opacity", 0.5)
label = viz.selectAll("text") //creates text objects from dataset
.data(names)
.join("text")
.text(d => d)
.attr("x", (d,i) => i*100)
.attr("y", 15)
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.
