0

I am facing an issue while doing d3.js maps, the issue is every country I am able to fill the color but coming to islands I am unable to see the islands places

    attr("stroke", function(d){
                    console.log("stroke",d.properties.name_sort)
                var s = d.properties.name_sort+"";
                if(s.includes("Islands")){
                  return "#FF0000";
                }
              return "#fff";
              })
              .attr("stroke-width", function(d){    
                var s = d.properties.name_sort+"";        
                if(s.includes("Islands")){ 
                  return 2;
                }
              return 0.1;
              })

please observe the image when I hard code it

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Ratnam
  • 1
  • 1
  • Which country are you particularly talking about? – Chilarai Jul 24 '20 at 04:33
  • Can you show what you have? Seeing neither your code nor your output, in addition to not knowing what islands, any attempt at an answer would likely be too speculative to be of use for you. – Andrew Reid Jul 24 '20 at 04:42
  • The total islands are not appearing in mapview, if I hard code like like attr("stroke", function(d){ var s = d.properties.name_sort+""; if(s.includes("Islands")){ return "#FF0000"; } return "#fff"; }) .attr("stroke-width", function(d){ var s = d.properties.name_sort+""; if(s.includes("Islands")){ return 2; } return 0.1; }) – Ratnam Jul 24 '20 at 05:07
  • But as per the correct approach, we should not hard code. can you help me out – Ratnam Jul 24 '20 at 05:08
  • @Chilarai we have a list of countries so we don't know how many countries having islands so in this scenario how to handle this kind of issue. – Ratnam Jul 24 '20 at 05:17
  • 1
    It's a difficult question - the islands are too small to be visible by fill alone. The simplest solution would be to give everything a stroke. If using topojson you could potentially find a way to add a stroke to islands (no matter their size, eg Greenland) only programmatically. Another approach might be to calculate the projected size of each polygon when drawing it (d3.geoBounds for example) and use that to either add a stroke, or replace the feature with a circle. Some of an answer would depend on how your data is structured. I could write an answer for the last option if it sounds useful – Andrew Reid Jul 24 '20 at 05:26
  • Thank you @AndrewReid I will try last option – Ratnam Jul 24 '20 at 05:54
  • I got this bounds (2) [Array(2), Array(2)] 0: Array(2) 0: -180 1: -90 length: 2 __proto__: Array(0) 1: Array(2) 0: 180 1: 90 length: 2 __proto__: Array(0) length: 2 can you give me idea how to move forward now @AndrewReid – Ratnam Jul 24 '20 at 06:13
  • I'll be able to look tomorrow in greater detail, just headed to bed at the moment. If you could include a link to the geojson that would make an answer more useful, though this is not neccesary, you can strip data fields if they are sensitive. – Andrew Reid Jul 24 '20 at 06:29
  • Unfortunately, there are too many small land locked countries that are not visible (Luxembourg, Burundi, etc) that will also be included if scanning for rendered size. This might alter your desired outcome, so I haven't posted it. – Andrew Reid Jul 24 '20 at 17:36

0 Answers0