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',
'AO' : 'Angola',
'AI' : 'Anguilla',
'AQ' : 'Antarctica',
'AG' : 'Antigua And Barbuda',
'AR' : 'Argentina',
'AM' : 'Armenia',
'AW' : 'Aruba',
'AU' : 'Australia',
'AT' : 'Austria',
'AZ' : 'Azerbaijan',
'BS' : 'Bahamas',
'BH' : 'Bahrain',
'BD' : 'Bangladesh',
'BB' : 'Barbados',
'BY' : 'Belarus',
'BE' : 'Belgium',
'BZ' : 'Belize',
'BJ' : 'Benin',
'BM' : 'Bermuda',
'BT' : 'Bhutan',
'BO' : 'Bolivia',
'BA' : 'Bosnia And Herzegovina',
'BW' : 'Botswana',
'BV' : 'Bouvet Island',
'BR' : 'Brazil',
'IO' : 'British Indian Ocean Territory',
'BN' : 'Brunei Darussalam',
'BG' : 'Bulgaria',
'BF' : 'Burkina Faso',
'BI' : 'Burundi',
'KH' : 'Cambodia',
'CM' : 'Cameroon',
'CA' : 'Canada',
'CV' : 'Cape Verde',
'KY' : 'Cayman Islands',
'CF' : 'Central African Republic',
'TD' : 'Chad',
'CL' : 'Chile',
'CN' : 'China',
'CX' : 'Christmas Island',
'CC' : 'Cocos (Keeling) Islands',
'CO' : 'Colombia',
'KM' : 'Comoros',
'CG' : 'Congo',
'CD' : 'Congo, Democratic Republic',
'CK' : 'Cook Islands',
'CR' : 'Costa Rica',
'CI' : 'Cote D\'Ivoire',
'HR' : 'Croatia',
'CU' : 'Cuba',
'CY' : 'Cyprus',
'CZ' : 'Czech Republic',
'DK' : 'Denmark',
'DJ' : 'Djibouti',
'DM' : 'Dominica',
'DO' : 'Dominican Republic',
'EC' : 'Ecuador',
'EG' : 'Egypt',
'SV' : 'El Salvador',
'GQ' : 'Equatorial Guinea',
'ER' : 'Eritrea',
'EE' : 'Estonia',
'ET' : 'Ethiopia',
'FK' : 'Falkland Islands (Malvinas)',
'FO' : 'Faroe Islands',
'FJ' : 'Fiji',
'FI' : 'Finland',
'FR' : 'France',
'GF' : 'French Guiana',
'PF' : 'French Polynesia',
'TF' : 'French Southern Territories',
'GA' : 'Gabon',
'GM' : 'Gambia',
'GE' : 'Georgia',
'DE' : 'Germany',
'GH' : 'Ghana',
'GI' : 'Gibraltar',
'GR' : 'Greece',
'GL' : 'Greenland',
'GD' : 'Grenada',
'GP' : 'Guadeloupe',
'GU' : 'Guam',
'GT' : 'Guatemala',
'GG' : 'Guernsey',
'GN' : 'Guinea',
'GW' : 'Guinea-Bissau',
'GY' : 'Guyana',
'HT' : 'Haiti',
'HM' : 'Heard Island & Mcdonald Islands',
'VA' : 'Holy See (Vatican City State)',
'HN' : 'Honduras',
'HK' : 'Hong Kong',
'HU' : 'Hungary',
'IS' : 'Iceland',
'IN' : 'India',
'ID' : 'Indonesia',
'IR' : 'Iran, Islamic Republic Of',
'IQ' : 'Iraq',
'IE' : 'Ireland',
'IM' : 'Isle Of Man',
'IL' : 'Israel',
'IT' : 'Italy',
'JM' : 'Jamaica',
'JP' : 'Japan',
'JE' : 'Jersey',
'JO' : 'Jordan',
'KZ' : 'Kazakhstan',
'KE' : 'Kenya',
'KI' : 'Kiribati',
'KR' : 'Korea',
'KW' : 'Kuwait',
'KG' : 'Kyrgyzstan',
'LA' : 'Lao People\'s Democratic Republic',
'LV' : 'Latvia',
'LB' : 'Lebanon',
'LS' : 'Lesotho',
'LR' : 'Liberia',
'LY' : 'Libyan Arab Jamahiriya',
'LI' : 'Liechtenstein',
'LT' : 'Lithuania',
'LU' : 'Luxembourg',
'MO' : 'Macao',
'MK' : 'Macedonia',
'MG' : 'Madagascar',
'MW' : 'Malawi',
'MY' : 'Malaysia',
'MV' : 'Maldives',
'ML' : 'Mali',
'MT' : 'Malta',
'MH' : 'Marshall Islands',
'MQ' : 'Martinique',
'MR' : 'Mauritania',
'MU' : 'Mauritius',
'YT' : 'Mayotte',
'MX' : 'Mexico',
'FM' : 'Micronesia, Federated States Of',
'MD' : 'Moldova',
'MC' : 'Monaco',
'MN' : 'Mongolia',
'ME' : 'Montenegro',
'MS' : 'Montserrat',
'MA' : 'Morocco',
'MZ' : 'Mozambique',
'MM' : 'Myanmar',
'NA' : 'Namibia',
'NR' : 'Nauru',
'NP' : 'Nepal',
'NL' : 'Netherlands',
'AN' : 'Netherlands Antilles',
'NC' : 'New Caledonia',
'NZ' : 'New Zealand',
'NI' : 'Nicaragua',
'NE' : 'Niger',
'NG' : 'Nigeria',
'NU' : 'Niue',
'NF' : 'Norfolk Island',
'MP' : 'Northern Mariana Islands',
'NO' : 'Norway',
'OM' : 'Oman',
'PK' : 'Pakistan',
'PW' : 'Palau',
'PS' : 'Palestinian Territory, Occupied',
'PA' : 'Panama',
'PG' : 'Papua New Guinea',
'PY' : 'Paraguay',
'PE' : 'Peru',
'PH' : 'Philippines',
'PN' : 'Pitcairn',
'PL' : 'Poland',
'PT' : 'Portugal',
'PR' : 'Puerto Rico',
'QA' : 'Qatar',
'RE' : 'Reunion',
'RO' : 'Romania',
'RU' : 'Russian Federation',
'RW' : 'Rwanda',
'BL' : 'Saint Barthelemy',
'SH' : 'Saint Helena',
'KN' : 'Saint Kitts And Nevis',
'LC' : 'Saint Lucia',
'MF' : 'Saint Martin',
'PM' : 'Saint Pierre And Miquelon',
'VC' : 'Saint Vincent And Grenadines',
'WS' : 'Samoa',
'SM' : 'San Marino',
'ST' : 'Sao Tome And Principe',
'SA' : 'Saudi Arabia',
'SN' : 'Senegal',
'RS' : 'Serbia',
'SC' : 'Seychelles',
'SL' : 'Sierra Leone',
'SG' : 'Singapore',
'SK' : 'Slovakia',
'SI' : 'Slovenia',
'SB' : 'Solomon Islands',
'SO' : 'Somalia',
'ZA' : 'South Africa',
'GS' : 'South Georgia And Sandwich Isl.',
'ES' : 'Spain',
'LK' : 'Sri Lanka',
'SD' : 'Sudan',
'SR' : 'Suriname',
'SJ' : 'Svalbard And Jan Mayen',
'SZ' : 'Swaziland',
'SE' : 'Sweden',
'CH' : 'Switzerland',
'SY' : 'Syrian Arab Republic',
'TW' : 'Taiwan',
'TJ' : 'Tajikistan',
'TZ' : 'Tanzania',
'TH' : 'Thailand',
'TL' : 'Timor-Leste',
'TG' : 'Togo',
'TK' : 'Tokelau',
'TO' : 'Tonga',
'TT' : 'Trinidad And Tobago',
'TN' : 'Tunisia',
'TR' : 'Turkey',
'TM' : 'Turkmenistan',
'TC' : 'Turks And Caicos Islands',
'TV' : 'Tuvalu',
'UG' : 'Uganda',
'UA' : 'Ukraine',
'AE' : 'United Arab Emirates',
'GB' : 'United Kingdom',
'US' : 'United States',
'UM' : 'United States Outlying Islands',
'UY' : 'Uruguay',
'UZ' : 'Uzbekistan',
'VU' : 'Vanuatu',
'VE' : 'Venezuela',
'VN' : 'Viet Nam',
'VG' : 'Virgin Islands, British',
'VI' : 'Virgin Islands, U.S.',
'WF' : 'Wallis And Futuna',
'EH' : 'Western Sahara',
'YE' : 'Yemen',
'ZM' : 'Zambia',
'ZW' : 'Zimbabwe'
};
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')
})
