names = ["Eric","Vinay","Chase","Lucy"]
numbers = [1,2,3,4,5,6,7]
<svg width="800" height="200"></svg>
mySVG = d3.select(svgObject)
mySVG.selectAll("rect")
.data(numbers)
.join("rect")
.attr("width", d => d * 5) // given d (the data element from numbers) give me back d times 5
.attr("height",d => d * 5)
.attr("x", d => d * spacing)
.attr("y", 50)
spacing = 50 // this is just a variable to illustrate that we can use it in the code above and below.
mySVG.selectAll("text")
.data(names)
.join("text")
.text(d => d)
.attr("y", 40)
.attr("x", (d,i) => i * spacing + spacing)
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.
