In the previous code snippet, there was an attempt to attach an HTML img element to a parent that is an SVG. It's important to note that this approach is not feasible and won't work as intended. Another suggested solution in a linked question involved using the foreignObject tag to include HTML content within the SVG, but this method is generally discouraged. Instead, the proposed solution was to create SVG patterns to facilitate the transformation of a single sprite image into appropriate coordinates for each flag. Here's how you can integrate this approach into your existing code...
Access the full code here (the stack snippet had to be edited due to size constraints).
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body {
font-family: Lato;
background-color: #F5F5F5;
}
</style>
</head>
<body>
<div class="body">
<div class="container-fluid">
<h1 class="text-center title">Countries linked by Border</h1>
<div class="text-center">
<div id="results"></div>
</div>
</div>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
// JavaScript code here
</script>
</body>
</html>