Map Data Visualization Challenge Issue (Circle overlap not fixed by sort)

Code Feedback
1

Hey guys,

I currently have a working app for the map data visualization challenge (https://codepen.io/qwirkyrabbit/pen/ZoLoMQ). So far all the requirements in the challenge have been met such as the zoom method, the meteor placements, the meteor size simulation, etc. However, I’m running across an issue that I can’t seem to figure out.

The circles which represent the meteorites, have it so that the bigger ones seem to overlap some of the smaller ones. Therefore, when a user tries to select the ones overlapped, the data that shows is for the larger one covering it. I have tried a fix to this by setting an attribute to the circle [ … .attr(‘pointer-events’, ‘stroke’) … ] but I feel like it’s not a thorough solution for the problem I have.

I was referencing how the other campers did it and came across the sort method to arrange the meteors depending on the sizes. This solution though did not have the expected results. While it did sort the circles according to the sizes, it was removing the larger ones (e.g. Sikhote-Alin - the largest by mass). I’m confused how this is happening… Help!

If anyone wants to give feedback on the current version of the challenge I have, please feel free to do so. It’s also a bit messy for now due to the amount of commented out code I have there so please bear with me. I’ll be updating that in the near future.

2

It’s a little hard to read your code, but I do not see where you did the sorting of the mass data. I used the sort method (descending) and it worked fine for me. Also the plotting method I used seems to be a little different than yours , I basically plotted circles using the projected long/lat as the center of the circles and scaled the radius of the circles proportional to the mass size.
These were the general steps I took to do that project:

  1. Transposed the data to make it easier to sort by mass

  2. Filtered out null long/lat data points

  3. Sorted the transposed data , descending

  4. Created the geoMercator projection and added world map data into path

  5. Appended the sorted transposed data to the projection above using circles with cx,cy being projected with respect to the lat/long of meteorites and r being a d3 scaled representation of the meteorite mass

  6. Added tool tip info

And that was it really, you can find my code here https://github.com/Dereje1/Globe-Data/blob/master/js/index.js
Hope that helps

3

Thanks Dereje1. I modified that pen and I realized I had to append circles to the meteor data by adding it to a group beforehand like the one below. Previously, I couldn’t figure out why sort wasn’t working and that was because the circle was appended to the svg directly.

var meteors = svg.append('g')
      .selectAll("circle")
      .data(data.features)
      .attr('d', meteorPath)
      .enter().append("circle")
      .attr('cx', function(d) { 
      ...

It was very confusing at first but I finally managed to sort it out correctly and display the meteors according to size. I updated the pen here with my poor attempt in creating a fisheye distortion effect: https://codepen.io/qwirkyrabbit/full/XqMPKv/