Fill circle with JS image

Question

I have been trying to fill my circles with image of a country flag to show which circle represents which country but i have failed and any answer that i found it didn't worked. Here is my code.

JS script

d3.csv('dataVPcsvTest.csv', function (data) {
  // Variables
  var body = d3.select('body')
    var margin = { top: 100, right: 100, bottom: 100, left: 100 }
    var h = 1200 - margin.top - margin.bottom
    var w = 1200 - margin.left - margin.right
    // Scales
  var colorScale = d3.scale.category20()
  var xScale = d3.scale.linear()
    .domain([
        d3.min([0,d3.min(data,function (d) { return d.asd })]),
        d3.max([4000,d3.max(data,function (d) { return d.asd })])
        ])
    .range([0,w])
  var yScale = d3.scale.linear()
    .domain([
        d3.min([0,d3.min(data,function (d) { return d.aror })]),
        d3.max([1100,d3.max(data,function (d) { return d.aror })])
        ])
    .range([h,0])
    // SVG
    var svg = body.append('svg')
        .attr('height',h + margin.top + margin.bottom)
        .attr('width',w + margin.left + margin.right)
      .append('g')
        .attr('transform','translate(' + margin.left + ',' + margin.top + ')')
  // X-axis

    var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient('bottom')
  // Y-axis
    var yAxis = d3.svg.axis()
      .scale(yScale)
    .orient('left')

  // Circles
  var circles = svg.selectAll('circle')
      .data(data)
      .enter()
    .append('circle')
      .attr('cx',function (d) { return xScale(d.asd) })
      .attr('cy',function (d) { return yScale(d.aror) })
      .attr('r','20')
      .attr('stroke','black')
      .attr('stroke-width',1)
      .attr('fill',function (d,i) { return colorScale(i)})
      .on('mouseover', function () {
        d3.select(this)
          .transition()
          .duration(500)
          .attr('r',30)
          .attr('stroke-width',3)
      })
      .on('mouseout', function () {
        d3.select(this)
          .transition()
          .duration(500)
          .attr('r',20)
          .attr('stroke-width',1)
      })
    .append('title') // Tooltip
      .text(function (d) { return d.state +
                           '\nKWh: ' + d.aror +
                           '\nGDP: ' + d.asd })

  // X-axis
  svg.append('g')
      .attr('class','axis')
      .attr('transform', 'translate(0,' + h + ')')
      .call(xAxis)
    .append('text') // X-axis Label
      .attr('class','label')
      .attr('y',-10)
      .attr('x',w)
      .attr('dy','.71em')
      .style('text-anchor','end')
      .text('GDP')
  // Y-axis
  svg.append('g')
      .attr('class', 'axis')
      .call(yAxis)
    .append('text') // y-axis Label
      .attr('class','label')
      .attr('transform','rotate(-90)')
      .attr('x',0)
      .attr('y',5)
      .attr('dy','.71em')
      .style('text-anchor','end')
      .text('Electric power consumption > KWh')
})

"state","aror","asd"
"Russia",927.21,1900.00
"India",835.5,1870.00
"Germany",579.21,3600.00
"Canada",565.73,1780.00
"South Korea",505.86,1110.00
"Brazil",480.12,2480.00
"France",476.5,2780.00
"United Kingdom",346.16,2440.00
"Italy",327.46,2190.00
"Spain",258.48,1480.00
"Mexico",249.67,1160.00
"Australia",239.31,1380.00
"Saudi Arabia",226.57,669.51
"Iran",199.79,514.06
"Turkey",197.94,774.78
"Ukraine",167.4,163.42
"Indonesia",165.71,846.48
"Thailand",154.19,345.67
"Poland",147.67,515.67
"Egypt",138.38,235.98
"Sweden",132.57,539.28
"Malaysia",122.12,287.93
"Argentina",120.86,446.04
"Netherlands",117.45,836.07
"Norway",114.78,491.06
"Venezuela",97.73,316.48
"Vietnam",94.28,141.67

Comments

You haven't actually specified the image you want to fill in the code.

---

I have a csv file as well! Ill just edit my answer and add that code block

Answer 1

In SVG, you need to define the circle as clip-path and then use that clip-path in an image:

var isoCountries = {
    'AF' : 'Afghanistan',
    'AX' : 'Aland Islands',
    'AL' : 'Albania',
    'DZ' : 'Algeria',
    'AS' : 'American Samoa',
    'AD' : 'Andorra',
   ....
};

const isocountry = function(cname){
  let entries = Object.entries(isoCountries);
  let entry = entries.filter(([code,name])=>name==cname);
  if(entry.length>0)
    return entry[0][0];
  return "NONE";
}

d3.csv('dataVPcsvTest.csv', function (data) {
  // Variables
  var body = d3.select('body')
    var margin = { top: 100, right: 100, bottom: 100, left: 100 }
    var h = 1200 - margin.top - margin.bottom
    var w = 1200 - margin.left - margin.right
    // Scales
  var colorScale = d3.scale.category20()
  var xScale = d3.scale.linear()
    .domain([
        d3.min([0,d3.min(data,function (d) { return d.asd })]),
        d3.max([4000,d3.max(data,function (d) { return d.asd })])
        ])
    .range([0,w])
  var yScale = d3.scale.linear()
    .domain([
        d3.min([0,d3.min(data,function (d) { return d.aror })]),
        d3.max([1100,d3.max(data,function (d) { return d.aror })])
        ])
    .range([h,0])
    // SVG
    var svg = body.append('svg')
        .attr('height',h + margin.top + margin.bottom)
        .attr('width',w + margin.left + margin.right);
    var svgDefs = svg.append("defs");
    var svgGroup = svg
      .append('g')
        .attr('transform','translate(' + margin.left + ',' + margin.top + ')')
  // X-axis

    var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient('bottom')
  // Y-axis
    var yAxis = d3.svg.axis()
      .scale(yScale)
    .orient('left')

  // Circles
  var circles = svgDefs.selectAll('clipPath')
      .data(data)
      .enter()
    .append("clipPath")
      .attr("id", function(d,i){return d.state+i; })
    .append("circle")
      .attr('cx',function (d) { return xScale(d.asd) })
      .attr('cy',function (d) { return yScale(d.aror) })
      .attr('r','20');

  svgGroup.selectAll("image").data(data).enter()
    .append("image")
    .attr("href", function(d){return `http://www.countryflags.io/${isocountry(d.state)}/flat/64.png`;})
      .attr('x',function (d) { return xScale(d.asd)-40 })
      .attr('y',function (d) { return yScale(d.aror)-40 })
      .attr('clip-path',  function(d,i){return `url(#${encodeURIComponent(d.state)}${i})`; })
      .attr('height', '80')
      .on('mouseover', function () {
        d3.select(this)
          .transition()
          .duration(500)
          .attr('r',30)
          .attr('stroke-width',3)
      })
      .on('mouseout', function () {
        d3.select(this)
          .transition()
          .duration(500)
          .attr('r',20)
          .attr('stroke-width',1)
      })
    .append('title') // Tooltip
      .text(function (d) { return d.state +
                           '\nKWh: ' + d.aror +
                           '\nGDP: ' + d.asd })

  ;

  // X-axis
  svg.append('g')
      .attr('class','axis')
      .attr('transform', 'translate(0,' + h + ')')
      .call(xAxis)
    .append('text') // X-axis Label
      .attr('class','label')
      .attr('y',-10)
      .attr('x',w)
      .attr('dy','.71em')
      .style('text-anchor','end')
      .text('GDP')
  // Y-axis
  svg.append('g')
      .attr('class', 'axis')
      .call(yAxis)
    .append('text') // y-axis Label
      .attr('class','label')
      .attr('transform','rotate(-90)')
      .attr('x',0)
      .attr('y',5)
      .attr('dy','.71em')
      .style('text-anchor','end')
      .text('Electric power consumption > KWh') 
})