D3.js Scrolling

[Noah Hallberg]

I have a scatter plot which uses three different CSV's. The following Javascript controls the placement of points from one of these CSV's:

Enter code here...svg.append('g')

    .selectAll("dot")
    .data(files[2])
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.Index); } )
      .attr("cy", function (d) { return y(d.Value); } )
      .attr("r", 4)
      .style("fill", function (d, i) { 
      if(i === 0) {
        return "#f05050"
      } else {
        return "#d3d3d3"
      }
    
    })

Right now, the points from this CSV are grey except for the point in the 0 index which is red. My scatter plot stays in place when I scroll and there is text to the left of it that scrolls. My question is, how can I change the point in the 0 index to be red after I scroll a certain distance? Any suggestions would be greatly appreciated. Thanks in advance!

[Ian Johnson]

Hi Noah,

I recommend separating your efforts into two distinct working pieces:

1) render your scatterplot and be able to update its position with a function call (regardless of scrolling). Perhaps craft a function that will change the color accordingly and call it on button click or from the console.

2) figure out how to trigger a function using Intersection Observer API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

I notice some issues in your d3 code that are subtle, the first render will work but its likely to break if you run it again. you do .selectAll("dot") when it should be .selectAll("circle.dot") (you should also .classed("dot", true) to your circle).

You are changing color based on the order of elements, you probably want to use your d.Index to change the color.

It's hard to give more specific advice without seeing a live example.

good luck!

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/cf1f9b7c-b677-4beb-990b-6731b5efc2b1o%40googlegroups.com.

--

Ian Johnson - 周彦

http://enjalot.github.io/