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
