title: How can I make each bar an image in D3?
body: <p>I am new to D3 and trying to make a graph showing the top 10 countries in Fifa 21 based on different attributes (pace, shooting, defending, etc.). I have been able to make a draft graph that works and got each bar to be a different color. As a final touch, I thought it'd be cool to make each country's bar an image of the country's flag. How can I do that?</p>
  <p>Here is what my graph currently looks like:
  <a href="https://i.stack.imgur.com/ERRnV.png" rel="nofollow noreferrer">Top 10 countries comparison</a></p>
  <p>Here is my code:</p>
  <pre><code> datasetOverall = [
      {label:&quot;Belgium&quot;, value:68.24},
      {label:&quot;France&quot;, value:67.85},
      {label:&quot;Brazil&quot;, value:71.97},
      {label:&quot;England&quot;, value:63.76},
      {label:&quot;Portugal&quot;, value:70.63},
      {label:&quot;Spain&quot;, value:69.63},
      {label:&quot;Argentina&quot;, value:69.67},
      {label:&quot;Uruguay&quot;, value:68.10},
      {label:&quot;Mexico&quot;, value:66.19},
      {label:&quot;Italy&quot;, value:68.94}
  ];
  
      datasetPace =  [
              {label:&quot;Belgium&quot;, value:68.61},
              {label:&quot;France&quot;, value:67.33},
              {label:&quot;Brazil&quot;, value:69.46},
              {label:&quot;England&quot;, value:67.87},
              {label:&quot;Portugal&quot;, value:69.38},
              {label:&quot;Spain&quot;, value:66.54},
              {label:&quot;Argentina&quot;, value:65.69},
              {label:&quot;Uruguay&quot;, value:67.24},
              {label:&quot;Mexico&quot;, value:67.01},
              {label:&quot;Italy&quot;, value:65.40} 
               ];
          
          datasetDribbling =  [
              {label:&quot;Belgium&quot;, value:66.47},
              {label:&quot;France&quot;, value:64.59},
              {label:&quot;Brazil&quot;, value:68.18},
              {label:&quot;England&quot;, value:61.67},
              {label:&quot;Portugal&quot;, value:68.36},
              {label:&quot;Spain&quot;, value:66.21},
              {label:&quot;Argentina&quot;, value:64.32},
              {label:&quot;Uruguay&quot;, value:64.09},
              {label:&quot;Mexico&quot;, value:63.95},
              {label:&quot;Italy&quot;, value:65.43} 
          ];
          
          datasetShooting =  [
              {label:&quot;Belgium&quot;, value:54.96},
              {label:&quot;France&quot;, value:53.91},
              {label:&quot;Brazil&quot;, value:59.73},
              {label:&quot;England&quot;, value:49.98},
              {label:&quot;Portugal&quot;, value:57.61},
              {label:&quot;Spain&quot;, value:56.35},
              {label:&quot;Argentina&quot;, value:53.93},
              {label:&quot;Uruguay&quot;, value:54.18},
              {label:&quot;Mexico&quot;, value:54.06},
              {label:&quot;Italy&quot;, value:55.59} 
          ];
                
          datasetPassing =  [
              {label:&quot;Belgium&quot;, value:58.97},
              {label:&quot;France&quot;, value:56.71},
              {label:&quot;Brazil&quot;, value:60.66},
              {label:&quot;England&quot;, value:51.83},
              {label:&quot;Portugal&quot;, value:60.05},
              {label:&quot;Spain&quot;, value:59.63},
              {label:&quot;Argentina&quot;, value:55.33},
              {label:&quot;Uruguay&quot;, value:55.34},
              {label:&quot;Mexico&quot;, value:56.32},
              {label:&quot;Italy&quot;, value:57.28} 
          ]; 
                  
          datasetDefending =  [
              {label:&quot;Belgium&quot;, value:52.03},
              {label:&quot;France&quot;, value:53.71},
              {label:&quot;Brazil&quot;, value:54.20},
              {label:&quot;England&quot;, value:50.33},
              {label:&quot;Portugal&quot;, value:54.80},
              {label:&quot;Spain&quot;, value:54.02},
              {label:&quot;Argentina&quot;, value:50.17},
              {label:&quot;Uruguay&quot;, value:51.91},
              {label:&quot;Mexico&quot;, value:52.81},
              {label:&quot;Italy&quot;, value:53.60} 
          ];   
          
          datasetPhysical =  [
              {label:&quot;Belgium&quot;, value:63.66},
              {label:&quot;France&quot;, value:64.50},
              {label:&quot;Brazil&quot;, value:66.41},
              {label:&quot;England&quot;, value:63.49},
              {label:&quot;Portugal&quot;, value:65.45},
              {label:&quot;Spain&quot;, value:63.42},
              {label:&quot;Argentina&quot;, value:64.11},
              {label:&quot;Uruguay&quot;, value:65.50},
              {label:&quot;Mexico&quot;, value:62.71},
              {label:&quot;Italy&quot;, value:62.91} 
          ];  
          
          datasetGoalkeeping =  [
               {label:&quot;Belgium&quot;, value:62.11},
               {label:&quot;France&quot;, value:61.68},
               {label:&quot;Brazil&quot;, value:66.10},
               {label:&quot;England&quot;, value:57.92},
               {label:&quot;Portugal&quot;, value:63.77},
               {label:&quot;Spain&quot;, value:64.22},
               {label:&quot;Argentina&quot;, value:64.65},
               {label:&quot;Uruguay&quot;, value:63.08},
               {label:&quot;Mexico&quot;, value:62.74},
               {label:&quot;Italy&quot;, value:62.42} 
          ];          
          
          var margin = {top: (parseInt(d3.select('body').style('height'), 10)/20), right: (parseInt(d3.select('body').style('width'), 10)/20), bottom: (parseInt(d3.select('body').style('height'), 10)/20), left: (parseInt(d3.select('body').style('width'), 10)/5)},
                  width = parseInt(d3.select('body').style('width'), 10) - margin.left - margin.right,
                  height = parseInt(d3.select('body').style('height'), 10) - margin.top - margin.bottom;
          
          var div = d3.select(&quot;body&quot;).append(&quot;div&quot;).attr(&quot;class&quot;, &quot;toolTip&quot;);
          
          var y = d3.scale.ordinal()
                  .rangeRoundBands([height, 0], .2, 0.5);
          
          var x = d3.scale.linear()
                  .domain([48, 74])
                  .range([0, width]);
          
          var colorColumn = &quot;label&quot;;
          
          var colorScale = d3.scale.category10();
          
          var xAxis = d3.svg.axis()
                  .scale(x)
                  .tickSize(-height)
                  .orient(&quot;bottom&quot;);
      
      var yAxis = d3.svg.axis()
              .scale(y)
              .orient(&quot;left&quot;);
      
      var svg = d3.select(&quot;body&quot;).append(&quot;svg&quot;)
              .attr(&quot;width&quot;, width + margin.left + margin.right)
              .attr(&quot;height&quot;, height + margin.top + margin.bottom)
              .append(&quot;g&quot;)
              .attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;)
              .attr(&quot;class&quot;, &quot;graph-svg-component&quot;);
      
      svg.append(&quot;g&quot;)
              .attr(&quot;class&quot;, &quot;x axis&quot;)
              .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height + &quot;)&quot;)
              .call(xAxis);
      
      d3.select(&quot;input[value=\&quot;Overall\&quot;]&quot;).property(&quot;checked&quot;, true);
      change(datasetOverall);
      
      d3.selectAll(&quot;input&quot;).on(&quot;change&quot;, selectDataset);
      
      function change(dataset) {
      
          y.domain(dataset.map(function(d) { return d.label; }));
          x.domain([d3.min(dataset, function(d) { return d.value-2; }), d3.max(dataset, function(d) { return d.value; })]);
          colorScale.domain(dataset.map(function (d){ return d[colorColumn]; }));
      
          svg.append(&quot;g&quot;)
                  .attr(&quot;class&quot;, &quot;x axis&quot;)
                  .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height + &quot;)&quot;)
                  .call(xAxis);
      
          svg.select(&quot;.y.axis&quot;).remove();
          svg.select(&quot;.x.axis&quot;).remove();
      
          svg.append(&quot;g&quot;)
                  .attr(&quot;class&quot;, &quot;y axis&quot;)
                  .call(yAxis)
                  .append(&quot;text&quot;)
                  .attr(&quot;transform&quot;, &quot;rotate(0)&quot;)
                  .attr(&quot;x&quot;, 48)
                  .attr(&quot;dx&quot;, &quot;.1em&quot;)
                  .style(&quot;text-anchor&quot;, &quot;center&quot;)
                  .style(&quot;font-weight&quot;, &quot;bold&quot;)
                  .style(&quot;font-size&quot;,&quot;35px&quot;)
                  .style(&quot;fill&quot;,&quot;navy&quot;)
                  .text(&quot;Top 10 Countries Comparison&quot;);
      
          var bar = svg.selectAll(&quot;.bar&quot;)
                  .data(dataset, function(d) {return d.label; });
          // new data:
          bar.enter().append(&quot;rect&quot;)
                  .attr(&quot;class&quot;, &quot;bar&quot;)
                  .attr(&quot;x&quot;, function(d) {return x(d.value); })
                  .attr(&quot;y&quot;, function(d) {return y(d.label); })
                  .attr(&quot;width&quot;, function(d) {return width-x(d.value); })
                  .attr(&quot;height&quot;, y.rangeBand())
                  
      
          bar
                  .on(&quot;mousemove&quot;, function(d){
                      div.style(&quot;left&quot;, d3.event.pageX+10+&quot;px&quot;);
                      div.style(&quot;top&quot;, d3.event.pageY-25+&quot;px&quot;);
                      div.style(&quot;display&quot;, &quot;inline-block&quot;);
                      div.html((d.label)+&quot;&lt;br&gt;&quot;+(d.value));
                  });
          bar
                  .on(&quot;mouseout&quot;, function(d){
                      div.style(&quot;display&quot;, &quot;none&quot;);
                  });
      
          // removed data:
          bar.exit().remove();
      
          // updated data:
          bar.transition()
                  .duration(1000)
                  .attr(&quot;x&quot;, function(d) {return 0; })
                  .attr(&quot;y&quot;, function(d) {return y(d.label); })
                  .attr(&quot;width&quot;, function(d) {return x(d.value); })
                  .attr(&quot;height&quot;, y.rangeBand())
                  .attr(&quot;fill&quot;, function (d){ return colorScale(d[colorColumn]); });
      
      }      
      
      function selectDataset()
      {
          var value = this.value;
          if (value == &quot;Overall&quot;)
          {
              change(datasetOverall);
          }
          else if (value == &quot;Pace&quot;)
          {
              change(datasetPace);
          }
          else if (value == &quot;Dribbling&quot;)
          {
              change(datasetDribbling);
          }
          else if (value == &quot;Shooting&quot;)
          {
              change(datasetShooting);
          }
          else if (value == &quot;Passing&quot;)
          {
              change(datasetPassing);
          }
          else if (value == &quot;Defending&quot;)
          {
              change(datasetDefending);
          }
          else if (value == &quot;Physical&quot;)
          {
              change(datasetPhysical);
          }
          else if (value == &quot;Goalkeeping&quot;)
          {
              change(datasetGoalkeeping);
          }
      }
  </code></pre>