title: maximum number of svg elements for the browser in a map
body: <p>I am creating a map with leaflet and d3. A lot of circles will be plotted on a map. In terms of browser compatibility, there is an expected limit of how many svg elements the browser can render. In terms of user experience however, I would prefer that the user can see as many elements on the map as possible (otherwise the user might need to zoom in and out constantly and would need to wait for the ajax to return data). There will be some optimisation that I need to consider (user waiting time user vs. server query load vs. what the browser can handle). </p>
  
  <p>See plot, there is a limit right now on the number of points that the server returns and thus only a portion of the map is filled. </p>
  
  <p><img src="https://i.stack.imgur.com/DWj2J.png" alt="enter image description here"></p>
  
  <p>The browser cannot handle a fully filled map here and the user would need to wait too long for the server response as well. </p>
  
  <p>I suppose the problem that I am faced with needs to be solved by answering two questions:</p>
  
  <ul>
  <li>Is there a standard in terms of what the average browser can handle in terms of number of simple svg shapes (circles) on a map? </li>
  <li>What is the best technique to show as many shapes on the map as possible? </li>
  </ul>
  
  <p>I'm considering the following points but I am unsure if it will help; </p>
  
  <ul>
  <li>use squares instead of circles </li>
  <li>use the leaflet API instead of the D3 </li>
  </ul>