D3 Change Elements Based On Two Different Datasets?

I am new to d3 and no javascript expert. I've found similar questions, but none that are quite what I'm looking for. I have two csv files, one with school data that looks like th

Solution 1:

If you want to be able to select an element based on its data attribute, the easiest way to do that is to give the element a class name based on that data. For example, all your school elements could have a class based on their id in the data, "s-1", "s-203", etc.

Then, when you find that id referenced in a row from your network data table, it is easy to select the corresponding element and change it however you want.

Here's an example. I'm using Array.forEach() instead of a for loop, but it is a similar idea to what you had. I'm not quite sure how you were using your filtered data array and why it wasn't working for you, but hopefully this will get you started:

http://fiddle.jshell.net/V5DCx/

However, instead of scanning through the net data on every click, it might be worth manipulating the data up front and including it in the school's data objects. You can use d3.nest to group the network data into sub-arrays based on the id, and then sort through the school array once, attaching the correct network sub-array to the school data before attaching the school data to your d3 graphics. Then it will be right there waiting in your function(d) event handler.