<div id ='chart'>
<h3><code>points().pointsDisplay();<code></h3>
<p>Add points on the map using <code>points()</code> and customising the points using <code>pointDisplay()</code>.<br>The <code>default</code> symbol is set to <code><a href = 'https://github.com/d3/d3-shape#symbolCross' target = _blank>symbolWye</a></code></p>
  <p>Using the custom reusable component changing the symbol to text.</p>  
</div>  
<div id="elm"></div>

#chart{
  margin: 1em;
}

//RedSift
//points()
//pointsDisplay()
//add points onto the map using points()
//customising the points using pointsDisplay()

//supply a custom component
 function displayText(selection) {   
   selection.each(function(d, i) {  //parameters: d and i
     
         let node = d3.select(this)     //select svg element
                      .selectAll('text') //select all the text
                      .data([ d ]);  //iterate through the data  
     
           node = node.enter()  //indicates that data will be added to selection
                      .append('text')   //add text
                      .attr('stroke', 'white')  //style text
                      .merge(node);     //merge the text to a single array
     
            node.text(d[2]);      //get the third item in the array
     });
 }

let geo = d3_rs_geo.html()
                   .points([ [ -76.852587, 38.991621, 'JFK'], [ -0.076132, 51.5074, 'LHR' ] ]) //add points
                   .pointsDisplay(displayText);   //customise the points, 

    d3.select('#elm')
      .datum({ url: 'https://static.redsift.io/thirdparty/topojson/examples/world-50m.json' }) //world topoJSON
      .call(geo);