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
• 18,570 points

edited Sep 21, 2018 by Hannah 704 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
• 52,360 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
• 52,360 points
606 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
• 18,570 points
445 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,160 points
9,210 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,160 points
5,836 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,890 points
353 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,130 points
990 views
0 votes
1 answer

Support for ES6 modules syntax on IBM bluemix

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

answered Aug 10, 2018 in DevOps on Cloud by ajs3033
• 7,300 points
439 views
+1 vote
1 answer

Unable to install connector for Power Bi and PostgreSQL

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

answered Aug 22, 2018 in Power BI by nirvana
• 3,130 points
2,447 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
• 52,360 points
330 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
• 52,360 points
1,172 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP