score:1

Are you familiar with element selectors and events in javascript?

A simple implementation would be to set up event triggers that will fire when clicking each link, using the filename as that you store in a data attribute.

<a class="view-trigger" data-filename="filename_1.csv">view result</a>
<a class="view-trigger" data-filename="filename_2.csv">view result</a>

etc

You can set up the event using something like a specific class on each of the links (in the example view-trigger.

var resultLinks = document.getElementsByClassName(".view-trigger")

for(var i = 0; i < resultLinks.length; i++) {
  (function(index) {
    resultLinks[index].addEventListener("click", function(event) {  
       var filename = event.target.getAttribute('data-filename');
       d3.csv("/static/" + filename + ".csv", function(data){...}        
     })
   })(i);
}

I haven't tested this code so you may need to fix/adjust for your case. If you are not familiar with these concepts it's worth reading a bit more about them.

Also, d3.js also seems to come with utilities to do DOM selection and handling events, so you may want to use those instead.


Related Query