D3.JS playground - UK map made of around 300 dots

D3.js

var svg = createSVG();

// Associate each circle with a unique ID so that exit()
// and updates properly affect the correct element.
var circle = svg.selectAll("circle").data($data,ƒ('id'));

circle.enter().append('circle')     
  .attr('opacity',0)    
  .attr('class',"m") 
  .attr("cx", ƒ('x')) 
  .attr("cy", ƒ('y'))   
  .on("click", function(d) { 
    //remove from graphic
    this.parentNode.removeChild(this); 
    //need to remove the data too
    $data.splice( $data.indexOf(d) , 1);
    });;
  
circle.transition().duration(300)
  .attr('opacity',0.6)
  .attr('r', 4)
  .attr("cx", ƒ('x'))
  .attr("cy", ƒ('y'));

circle.exit().transition().duration(300)
  .attr('opacity',0)
  .remove();

// Only create the SVG once (changing $data causes all code to be re-run)
//.attr('viewBox','150 10 30 35') was added to the append('svg) below - what does it do?
function createSVG(){
  var svg = d3.select('#playground').selectAll('svg').data([0]);
  svg.enter().append('svg');
  return svg;
}

function bmi(datum){
  return datum.weight / Math.pow(datum.height/100,2);
}

data.js

// Try adding, removing, *reordering*, or changing values
[{id:0,x:319,y:231.5},{id:1,x:297,y:162},{id:2,x:304,y:151},{id:3,x:161,y:174.5},{id:4,x:141.5,y:326.5},{id:5,x:131.5,y:326.5},{id:6,x:4,y:314},{id:7,x:171.5,y:316.5},{id:8,x:161.5,y:316.5},{id:9,x:151.5,y:316.5},{id:10,x:141.5,y:316.5},{id:11,x:241.587,y:306.196},{id:12,x:231.587,y:306.196},{id:13,x:221.587,y:306.196},{id:14,x:211.587,y:306.196},{id:15,x:201.587,y:306.196},{id:16,x:191.587,y:306.196},{id:17,x:181.587,y:306.196},{id:18,x:171.587,y:306.196},{id:19,x:161.587,y:306.196},{id:20,x:151.587,y:306.196},{id:21,x:261.587,y:296.196},{id:22,x:251.587,y:296.196},{id:23,x:241.587,y:296.196},{id:24,x:231.587,y:296.196},{id:25,x:221.587,y:296.196},{id:26,x:211.587,y:296.196},{id:27,x:201.587,y:296.196},{id:28,x:191.587,y:296.196},{id:29,x:181.587,y:296.196},{id:30,x:171.587,y:296.196},{id:31,x:161.587,y:296.196},{id:32,x:261.413,y:286.804},{id:33,x:251.413,y:286.804},{id:34,x:241.413,y:286.804},{id:35,x:231.413,y:286.804},{id:36,x:221.413,y:286.804},{id:37,x:211.413,y:286.804},{id:38,x:201.413,y:286.804},{id:39,x:191.413,y:286.804},{id:40,x:181.413,y:286.804},{id:41,x:171.413,y:286.804},{id:42,x:51.4231,y:286.654},{id:43,x:261.413,y:276.804},{id:44,x:251.413,y:276.804},{id:45,x:241.413,y:276.804},{id:46,x:231.413,y:276.804},{id:47,x:221.413,y:276.804},{id:48,x:211.413,y:276.804},{id:49,x:201.413,y:276.804},{id:50,x:191.413,y:276.804},{id:51,x:181.413,y:276.804},{id:52,x:171.413,y:276.804},{id:53,x:161.413,y:276.804},{id:54,x:151.413,y:276.804},{id:55,x:71.4231,y:276.654},{id:56,x:61.4231,y:276.654},{id:57,x:51.4231,y:276.654},{id:58,x:41.4231,y:276.654},{id:59,x:271.5,y:266.5},{id:60,x:261.5,y:266.5},{id:61,x:251.5,y:266.5},{id:62,x:241.534,y:266.621},{id:63,x:231.5,y:266.5},{id:64,x:221.5,y:266.5},{id:65,x:211.5,y:266.5},{id:66,x:201.5,y:266.5},{id:67,x:191.5,y:266.5},{id:68,x:181.5,y:266.5},{id:69,x:171.5,y:266.5},{id:70,x:161.5,y:266.5},{id:71,x:151.5,y:266.5},{id:72,x:111.5,y:266.5},{id:73,x:101.5,y:266.5},{id:74,x:91.5,y:266.5},{id:75,x:81.5769,y:266.346},{id:76,x:71.5,y:266.5},{id:77,x:61.5,y:266.5},{id:78,x:51.5,y:266.5},{id:79,x:41.3913,y:266.413},{id:80,x:271.659,y:256.455},{id:81,x:261.5,y:256.5},{id:82,x:251.5,y:256.5},{id:83,x:241.5,y:256.5},{id:84,x:231.659,y:256.455},{id:85,x:221.534,y:256.621},{id:86,x:211.5,y:256.5},{id:87,x:201.5,y:256.5},{id:88,x:191.659,y:256.455},{id:89,x:181.534,y:256.621},{id:90,x:171.5,y:256.5},{id:91,x:161.5,y:256.5},{id:92,x:111.5,y:256.5},{id:93,x:101.5,y:256.5},{id:94,x:91.5,y:256.5},{id:95,x:81.5,y:256.5},{id:96,x:71.5,y:256.5},{id:97,x:61.5,y:256.5},{id:98,x:51.5,y:256.5},{id:99,x:271.587,y:246.196},{id:100,x:261.587,y:246.196},{id:101,x:251.587,y:246.196},{id:102,x:241.587,y:246.196},{id:103,x:231.587,y:246.196},{id:104,x:221.587,y:246.196},{id:105,x:211.587,y:246.196},{id:106,x:201.587,y:246.196},{id:107,x:191.587,y:246.196},{id:108,x:181.587,y:246.196},{id:109,x:171.587,y:246.196},{id:110,x:111.5,y:246.5},{id:111,x:101.5,y:246.5},{id:112,x:91.5,y:246.5},{id:113,x:81.5,y:246.5},{id:114,x:71.5769,y:246.346},{id:115,x:51.5,y:246.5},{id:116,x:251.587,y:236.196},{id:117,x:241.587,y:236.196},{id:118,x:231.587,y:236.196},{id:119,x:221.587,y:236.196},{id:120,x:211.587,y:236.196},{id:121,x:201.587,y:236.196},{id:122,x:191.587,y:236.196},{id:123,x:181.587,y:236.196},{id:124,x:171.587,y:236.196},{id:125,x:161.587,y:236.196},{id:126,x:121.5,y:236.5},{id:127,x:111.577,y:236.346},{id:128,x:101.5,y:236.5},{id:129,x:91.5,y:236.5},{id:130,x:81.5,y:236.5},{id:131,x:71.5769,y:236.346},{id:132,x:61.5,y:236.5},{id:133,x:51.5,y:236.5},{id:134,x:121.545,y:226.227},{id:135,x:111.545,y:226.227},{id:136,x:101.545,y:226.227},{id:137,x:91.5455,y:226.227},{id:138,x:81.5455,y:226.227},{id:139,x:71.5455,y:226.227},{id:140,x:61.5455,y:226.227},{id:141,x:51.5455,y:226.227},{id:142,x:241.722,y:226.056},{id:143,x:231.722,y:226.056},{id:144,x:221.722,y:226.056},{id:145,x:211.722,y:226.056},{id:146,x:201.722,y:226.056},{id:147,x:191.722,y:226.056},{id:148,x:181.722,y:226.056},{id:149,x:171.722,y:226.056},{id:150,x:161.722,y:226.056},{id:151,x:121.545,y:216.227},{id:152,x:111.545,y:216.227},{id:153,x:101.545,y:216.227},{id:154,x:91.5455,y:216.227},{id:155,x:81.5455,y:216.227},{id:156,x:71.5455,y:216.227},{id:157,x:61.5455,y:216.227},{id:158,x:51.5455,y:216.227},{id:159,x:41.5,y:216},{id:160,x:241.722,y:216.056},{id:161,x:231.722,y:216.056},{id:162,x:221.722,y:216.056},{id:163,x:211.722,y:216.056},{id:164,x:201.722,y:216.056},{id:165,x:191.722,y:216.056},{id:166,x:181.722,y:216.056},{id:167,x:279,y:203},{id:168,x:241.534,y:206.621},{id:169,x:231.621,y:206.534},{id:170,x:221.5,y:206.5},{id:171,x:211.534,y:206.621},{id:172,x:201.534,y:206.621},{id:173,x:191.735,y:206.618},{id:174,x:121.423,y:206.654},{id:175,x:111.423,y:206.654},{id:176,x:101.423,y:206.654},{id:177,x:91.5,y:206.5},{id:178,x:81.5,y:206.5},{id:179,x:71.5,y:206.5},{id:180,x:61.4231,y:206.654},{id:181,x:51.5,y:206.5},{id:182,x:231.534,y:196.621},{id:183,x:221.534,y:196.621},{id:184,x:211.534,y:196.621},{id:185,x:201.308,y:196.769},{id:186,x:191.534,y:196.621},{id:187,x:181.735,y:196.618},{id:188,x:151.413,y:196.804},{id:189,x:121.308,y:196.769},{id:190,x:111.5,y:196.5},{id:191,x:101.5,y:196.5},{id:192,x:91.5345,y:196.621},{id:193,x:81.5,y:196.5},{id:194,x:71.5,y:196.5},{id:195,x:61.5,y:196.5},{id:196,x:51.5,y:196.5},{id:197,x:231.587,y:186.196},{id:198,x:221.587,y:186.196},{id:199,x:211.587,y:186.196},{id:200,x:201.587,y:186.196},{id:201,x:191.587,y:186.196},{id:202,x:181.587,y:186.196},{id:203,x:171.587,y:186.196},{id:204,x:131.587,y:186.196},{id:205,x:121.587,y:186.196},{id:206,x:111.587,y:186.196},{id:207,x:91.587,y:186.196},{id:208,x:81.5,y:186.5},{id:209,x:71.5769,y:186.346},{id:210,x:101.722,y:186.056},{id:211,x:211.587,y:176.196},{id:212,x:201.587,y:176.196},{id:213,x:191.587,y:176.196},{id:214,x:181.587,y:176.196},{id:215,x:171.587,y:176.196},{id:216,x:151.587,y:176.196},{id:217,x:141.587,y:176.196},{id:218,x:121.587,y:176.196},{id:219,x:111.587,y:176.196},{id:220,x:101.587,y:176.196},{id:221,x:91.587,y:176.196},{id:222,x:81.5,y:176.5},{id:223,x:71.5,y:176.5},{id:224,x:211.5,y:166.5},{id:225,x:201.5,y:166.5},{id:226,x:191.659,y:166.455},{id:227,x:181.587,y:166.196},{id:228,x:171.587,y:166.196},{id:229,x:161.5,y:166.5},{id:230,x:151.196,y:166.413},{id:231,x:141.587,y:166.196},{id:232,x:121.5,y:166.5},{id:233,x:111.659,y:166.455},{id:234,x:101.5,y:166.5},{id:235,x:91.5,y:166.5},{id:236,x:81.5,y:166.5},{id:237,x:211.5,y:156.5},{id:238,x:201.769,y:156.308},{id:239,x:191.735,y:156.382},{id:240,x:181.265,y:156.382},{id:241,x:171.659,y:156.455},{id:242,x:161.735,y:156.382},{id:243,x:151.659,y:156.455},{id:244,x:101.5,y:156.5},{id:245,x:91.5,y:156.5},{id:246,x:303,y:147},{id:247,x:201.587,y:146.196},{id:248,x:191.587,y:146.196},{id:249,x:181.587,y:146.196},{id:250,x:171.587,y:146.196},{id:251,x:161.587,y:146.196},{id:252,x:151.587,y:146.196},{id:253,x:141.587,y:146.196},{id:254,x:121.587,y:146.196},{id:255,x:111.587,y:146.196},{id:256,x:191.587,y:136.196},{id:257,x:181.587,y:136.196},{id:258,x:171.587,y:136.196},{id:259,x:161.587,y:136.196},{id:260,x:151.587,y:136.196},{id:261,x:141.587,y:136.196},{id:262,x:131.587,y:136.196},{id:263,x:121.722,y:136.056},{id:264,x:181.413,y:126.804},{id:265,x:171.413,y:126.804},{id:266,x:161.413,y:126.804},{id:267,x:151.413,y:126.804},{id:268,x:141.413,y:126.804},{id:269,x:131.413,y:126.804},{id:270,x:181.413,y:116.804},{id:271,x:171.413,y:116.804},{id:272,x:161.5,y:116.5},{id:273,x:151.413,y:116.804},{id:274,x:141.413,y:116.804},{id:275,x:131.413,y:116.804},{id:276,x:121.5,y:116.5},{id:277,x:191.5,y:106.5},{id:278,x:181.5,y:106.5},{id:279,x:171.5,y:106.5},{id:280,x:161.5,y:106.5},{id:281,x:151.5,y:106.5},{id:282,x:141.5,y:106.5},{id:283,x:131.5,y:106.5},{id:284,x:121.5,y:106.5},{id:285,x:201.5,y:96.5},{id:286,x:191.5,y:96.5},{id:287,x:181.5,y:96.5},{id:288,x:171.5,y:96.5},{id:289,x:161.5,y:96.5},{id:290,x:151.5,y:96.5},{id:291,x:141.5,y:96.5},{id:292,x:131.5,y:96.5},{id:293,x:201.587,y:86.1957},{id:294,x:191.587,y:86.1957},{id:295,x:181.587,y:86.1957},{id:296,x:171.587,y:86.1957},{id:297,x:161.587,y:86.1957},{id:298,x:151.587,y:86.1957},{id:299,x:141.587,y:86.1957},{id:300,x:131.587,y:86.1957},{id:301,x:121.587,y:86.1957},{id:302,x:201.587,y:76.1957},{id:303,x:191.587,y:76.1957},{id:304,x:181.587,y:76.1957},{id:305,x:171.587,y:76.1957},{id:306,x:161.587,y:76.1957},{id:307,x:151.587,y:76.1957},{id:308,x:141.587,y:76.1957},{id:309,x:131.587,y:76.1957},{id:310,x:121.587,y:76.1957},{id:311,x:111.587,y:76.1957},{id:312,x:161.722,y:66.0556},{id:313,x:151.722,y:66.0556},{id:314,x:141.722,y:66.0556},{id:315,x:131.722,y:66.0556},{id:316,x:101.722,y:66.0556},{id:317,x:161.722,y:56.0556},{id:318,x:151.722,y:56.0556},{id:319,x:141.722,y:56.0556},{id:320,x:111.722,y:56.0556},{id:321,x:101.722,y:56.0556},{id:322,x:171.5,y:46.5},{id:323,x:161.5,y:46.5},{id:324,x:151.5,y:46.5},{id:325,x:141.5,y:46.5},{id:326,x:121.5,y:46.5},{id:327,x:111.5,y:46.5},{id:328,x:181.5,y:36.5},{id:329,x:171.5,y:36.5},{id:330,x:161.5,y:36.5},{id:331,x:151.5,y:36.5}]

Description.txt

This is code for the D3 playground. 3 files, one for each pane in the playground.
Playground is over here: http://phrogz.net/js/d3-playground/#BlankDefault

Once you enter all 3 relevant code blocks into the playground you should see a UK map image. There are a few erroneous dots which you can remove from the data/SVG by clicking.

The reason I have created the code in the playground is because I had a JPG image of the UK similar to the generated SVG but I needed x/y points from this static image so that I can create a dynamic map in SVG using D3.JS for a website I'm building. I used OpenCV to detect the circles/dots in the original graphic, which OpenCV output as x/y coordinates. OpenCV isn't perfect and I ended up detecting a few extra dots so I needed a nice and easy way to remove them.

gistfile1.css

circle { stroke-width:1px; vector-effect:non-scaling-stroke }
circle.m { fill:#def; stroke:#369 }
circle.f { fill:#fee; stroke:#e99 }