title: Select all elements with a common attribute and are 'visible'
body: <p><strong>Background</strong></p>
  
  <p>I am building an application in D3/Javascript, although this may also be broader question about data/view modelling design. D3 has some useful data modelling capability so may be relevant to this. I am new to D3 and Javascript though!</p>
  
  <p>The application:</p>
  
  <ul>
  <li>Plots a relatively large dataset (>5000) of events over time</li>
  <li>Should allow selected events to be hidden and re-shown by the user</li>
  <li>Should draw a line between events of a similar type, but only those that are still visible</li>
  </ul>
  
  <p><strong>Problem</strong></p>
  
  <p>I am unsure how to best model this, particularly how to manage those nodes which are hidden, should still remain in the data model, but not taken into account when building the line through similar event types.</p>
  
  <p>For the "Hide nodes" use case, I set each component's style to 'visibility: hidden'. These could be re-added later, so I don't want to remove them from the underlying data model.</p>
  
  <p>I am unsure how to go about managing the "Line through similar event types" use case - only using data from visible events.</p>
  
  <p>I think the key question is how do I build a list of events with a common attribute and that are still visible. Can I use D3's select mechanism? If so, I don't necessarily want to append the common attribute to the SVG element due to the large data set. Is there another way?</p>
  
  <p>I could have probably asked this question in one line, but I hope the context helps describes what I'm after!</p>
  
  <p>Many thanks for your help.</p>