CS-GY 6313 - Information Visualization
New York University
2025-10-10
User Interface | Graphics Library | Notebook |
---|---|---|
observablehq.com | D3 | Week 6 Lab Notebook |
Today we will be a exploring the following topics:
Image souce: GeekForGeeks
<button>
and <input>
.interactivity = {
const svg = d3.create("svg")
.attr('width', width)
.attr('height', 50);
const data = [1, 2, 3];
const circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 10)
.attr("cy", 25)
.attr("cx", (d, i) => 30 + i * 30)
.on("click", function (event, d) {
console.log(`clicked on: ${d}`);
const circle = d3.select(this); // can't use arrow scoping
circle.style("stroke", "orange").style("stroke-width", "3px");
});
return svg.node();
}
.on(<EVENT>, <HANDLER FUNCTION>)
= We are attaching the <HANDLER FUNCTION>
onto the <EVENT>
."click"
= We want to attach our function to whenever the user mouse-clicks onto a circle.function(event, d)
= This handler function has access to the event details as well as the data binded to it.W3Schools to look up the common event types and their functions