Fill circle with JS image

0 votes

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
Sep 21, 2018 in Power BI by Hannah
• 14,070 points

edited Sep 21, 2018 by Hannah 29 views
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

1 answer to this question.

0 votes

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') 
})
answered Sep 21, 2018 by Kalgi
• 40,420 points

Related Questions In Power BI

0 votes
1 answer

Integrate Google Analytics data with Power BI data

When you use standard google analytics connector ...READ MORE

answered Oct 3, 2018 in Power BI by Kalgi
• 40,420 points
45 views
0 votes
1 answer

What options do I have for viewing and working with data on premises

There are three ways to achieve the ...READ MORE

answered Oct 15, 2018 in Power BI by Hannah
• 14,070 points
19 views
0 votes
1 answer

how can I connect my web api with Power BI Reports?

Go to Home > Edit Queries > ...READ MORE

answered Oct 18, 2018 in Power BI by Annie97
• 2,190 points
1,180 views
0 votes
1 answer

How to export Power Queries from One Workbook to Another with VBA?

Try solving it using the Workbook. Query ...READ MORE

answered Oct 22, 2018 in Power BI by Annie97
• 2,190 points
343 views
0 votes
1 answer

Adding public contact from request to aws

Third one seems to be the best ...READ MORE

answered Jun 28, 2018 in DevOps on Cloud by DareDev
• 6,810 points
32 views
0 votes
1 answer

Displaying Table Schema using Power BI with Azure IoT Hub

Answering your first question, Event Hubs are ...READ MORE

answered Aug 1, 2018 in IoT (Internet of Things) by nirvana
• 3,060 points
77 views
0 votes
1 answer

Support for ES6 modules syntax on IBM bluemix

There is no native support for es6 ...READ MORE

answered Aug 9, 2018 in DevOps on Cloud by ajs3033
• 7,280 points
59 views
0 votes
1 answer

Unable to install connector for Power Bi and PostgreSQL

I think the problem is not at ...READ MORE

answered Aug 21, 2018 in Power BI by nirvana
• 3,060 points
597 views
0 votes
1 answer

Looking for a way to to list all cloud services with their description

A jQuery selector like this should do ...READ MORE

answered Sep 21, 2018 in Power BI by Kalgi
• 40,420 points
17 views
0 votes
1 answer

How to add an image to power bi report – power bi web

There are visuals (e.g. table) that can ...READ MORE

answered Sep 27, 2018 in Power BI by Kalgi
• 40,420 points
39 views