Venues of D3.js is built on top of the D3.js v5.0, which means we need to include D3.js files into our HTML page. Add following line in your head tag:
 
<script src=" https://d3js.org/d3.v5.min.js "></script>

 

Now we add Venues SDK:

<script src=" https://sdk.venues.here.com/d3/v0/d3-venues.min.js "> </script>

<link rel="stylesheet" href=" https://sdk.venues.here.com/d3/v0/d3-venues.min.css ">

 

We also need a container for our map to render. A unique element _id_ or _class_ attribute is required and will be specified again in the initialization code:

<div id="map"></div>

 

And some styles for the map container to show correctly:

  <style>

    #map {

      position: absolute;

      top: 0;

      right: 0;

      bottom: 0;

      left: 0;

    }

  </style>

 

Once we have completed these steps we can easily load the map by executing the following code:

 

<script>

  // Instantiate the Venues SDK

  var myVenue = d3.venues('API_KEY')

                  .load('VENUE_ID')

 

  // Load the map the container element

  d3.select('#map')

    .call(myVenue)

</script>

 

That's all it takes to load your venue map.