Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
  <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
​
<script type="text/javascript">
​
var data = [
{id: "1", radius: 20, x_val: 0.334790757, y_val: 0.156605191, image_path: "https://randomuser.me/api/portraits/women/1.jpg"},
{id: "2", radius: 20, x_val: -0.204756774, y_val: -0.388404751, image_path: "https://randomuser.me/api/portraits/women/2.jpg"},
{id: "3", radius: 20, x_val: 0.702469968, y_val: 0.045801931, image_path: "https://randomuser.me/api/portraits/women/3.jpg"},
{id: "4", radius: 20, x_val: -0.911378448, y_val: -0.445450321, image_path: "https://randomuser.me/api/portraits/women/4.jpg"},
{id: "5", radius: 20, x_val: -0.245811524, y_val: 0.277729166, image_path: "https://randomuser.me/api/portraits/women/5.jpg"},
{id: "6", radius: 20, x_val: 0.773081863, y_val: 0.76229372, image_path: "https://randomuser.me/api/portraits/women/6.jpg"},
{id: "7", radius: 20, x_val: -0.574288503, y_val: 0.552123129, image_path: "https://randomuser.me/api/portraits/women/7.jpg"},
{id: "8", radius: 20, x_val: -0.338911226, y_val: -0.853602376, image_path: "https://randomuser.me/api/portraits/women/8.jpg"},
{id: "9", radius: 20, x_val: -0.849335788, y_val: 0.311814767, image_path: "https://randomuser.me/api/portraits/women/9.jpg"},
{id: "10", radius: 20, x_val: -0.180794396, y_val: 0.890253191, image_path: "https://randomuser.me/api/portraits/women/10.jpg"},
{id: "11", radius: 20, x_val: 0.588851692, y_val: 0.42256672, image_path: "https://randomuser.me/api/portraits/women/11.jpg"},
{id: "12", radius: 20, x_val: 0.368237316, y_val: -0.837831399, image_path: "https://randomuser.me/api/portraits/women/12.jpg"},
{id: "13", radius: 20, x_val: 0.56361437, y_val: 1.277495247, image_path: "https://randomuser.me/api/portraits/women/13.jpg"},
{id: "14", radius: 20, x_val: 0.168138125, y_val: 0.426170484, image_path: "https://randomuser.me/api/portraits/women/14.jpg"},
{id: "15", radius: 20, x_val: 0.765285021, y_val: 0.32310202, image_path: "https://randomuser.me/api/portraits/women/15.jpg"},
{id: "16", radius: 20, x_val: -0.864044016, y_val: 0.029689866, image_path: "https://randomuser.me/api/portraits/women/16.jpg"},
{id: "17", radius: 20, x_val: 0.691260147, y_val: 0.061070992, image_path: "https://randomuser.me/api/portraits/women/17.jpg"},
{id: "18", radius: 20, x_val: -0.547793722, y_val: 0.111670825, image_path: "https://randomuser.me/api/portraits/women/18.jpg"},
{id: "19", radius: 20, x_val: -0.111244855, y_val: -0.333935318, image_path: "https://randomuser.me/api/portraits/women/19.jpg"},
{id: "20", radius: 20, x_val: -0.838513438, y_val: 0.10936556, image_path: "https://randomuser.me/api/portraits/women/20.jpg"},
{id: "21", radius: 20, x_val: -0.312114272, y_val: -0.135453409, image_path: "https://randomuser.me/api/portraits/women/21.jpg"},
{id: "22", radius: 20, x_val: 0.312246617, y_val: -0.584216577, image_path: "https://randomuser.me/api/portraits/women/22.jpg"},
{id: "23", radius: 20, x_val: -0.148313622, y_val: 0.335917196, image_path: "https://randomuser.me/api/portraits/women/23.jpg"},
{id: "24", radius: 20, x_val: -0.151756055, y_val: 0.84091095, image_path: "https://randomuser.me/api/portraits/women/24.jpg"},
{id: "25", radius: 20, x_val: 0.863161169, y_val: 0.607673434, image_path: "https://randomuser.me/api/portraits/women/25.jpg"},
{id: "26", radius: 20, x_val: 0.004003922, y_val: 0.962834773, image_path: "https://randomuser.me/api/portraits/women/26.jpg"},
{id: "27", radius: 20, x_val: -0.105006278, y_val: 0.429322534, image_path: "https://randomuser.me/api/portraits/women/27.jpg"},
{id: "28", radius: 20, x_val: 0.212054484, y_val: -0.569736364, image_path: "https://randomuser.me/api/portraits/women/28.jpg"},
{id: "29", radius: 20, x_val: 1.034331038, y_val: 0.71569881, image_path: "https://randomuser.me/api/portraits/women/29.jpg"},
{id: "30", radius: 20, x_val: -1.041962909, y_val: -0.379549948, image_path: "https://randomuser.me/api/portraits/women/30.jpg"},
{id: "31", radius: 20, x_val: 0.10105984, y_val: -0.466085645, image_path: "https://randomuser.me/api/portraits/women/31.jpg"},
{id: "32", radius: 20, x_val: -0.719152913, y_val: 0.495752538, image_path: "https://randomuser.me/api/portraits/women/32.jpg"},
{id: "33", radius: 20, x_val: -1.011484085, y_val: -0.059343228, image_path: "https://randomuser.me/api/portraits/women/33.jpg"},
{id: "34", radius: 20, x_val: -0.190660952, y_val: 0.791028885, image_path: "https://randomuser.me/api/portraits/women/34.jpg"},
{id: "35", radius: 20, x_val: -0.780570494, y_val: 0.11823081, image_path: "https://randomuser.me/api/portraits/women/35.jpg"},
{id: "36", radius: 20, x_val: -1.027792586, y_val: 0.098964596, image_path: "https://randomuser.me/api/portraits/women/36.jpg"},
{id: "37", radius: 20, x_val: -0.299054157, y_val: 0.415406701, image_path: "https://randomuser.me/api/portraits/women/37.jpg"},
{id: "38", radius: 20, x_val: 0.056880943, y_val: 0.594216999, image_path: "https://randomuser.me/api/portraits/women/38.jpg"},
{id: "39", radius: 20, x_val: 0.436866257, y_val: -0.582105601, image_path: "https://randomuser.me/api/portraits/women/39.jpg"},
{id: "40", radius: 20, x_val: -0.897539567, y_val: -0.527927961, image_path: "https://randomuser.me/api/portraits/women/40.jpg"},
{id: "41", radius: 20, x_val: 0.398396413, y_val: -0.810909779, image_path: "https://randomuser.me/api/portraits/women/41.jpg"},
{id: "42", radius: 20, x_val: -0.038487244, y_val: -0.198274195, image_path: "https://randomuser.me/api/portraits/women/42.jpg"},
{id: "43", radius: 20, x_val: -0.1607122, y_val: -0.066081945, image_path: "https://randomuser.me/api/portraits/women/43.jpg"},
{id: "44", radius: 20, x_val: 0.624229598, y_val: 0.206099603, image_path: "https://randomuser.me/api/portraits/women/44.jpg"},
{id: "45", radius: 20, x_val: 0.105623677, y_val: -0.273188439, image_path: "https://randomuser.me/api/portraits/women/45.jpg"},
{id: "46", radius: 20, x_val: 0.185464178, y_val: 0.696391181, image_path: "https://randomuser.me/api/portraits/women/46.jpg"},
{id: "47", radius: 20, x_val: 0.148443186, y_val: -0.554113172, image_path: "https://randomuser.me/api/portraits/women/47.jpg"},
{id: "48", radius: 20, x_val: -0.222730368, y_val: 0.016298078, image_path: "https://randomuser.me/api/portraits/women/48.jpg"},
{id: "49", radius: 20, x_val: -0.422747079, y_val: -0.026463688, image_path: "https://randomuser.me/api/portraits/women/49.jpg"},
{id: "50", radius: 20, x_val: 0.748536381, y_val: 0.020930189, image_path: "https://randomuser.me/api/portraits/women/50.jpg"},
{id: "51", radius: 20, x_val: -0.145746243, y_val: 0.533654958, image_path: "https://randomuser.me/api/portraits/men/1.jpg"},
{id: "52", radius: 20, x_val: 0.30926205, y_val: 0.46917112, image_path: "https://randomuser.me/api/portraits/men/2.jpg"},
{id: "53", radius: 20, x_val: 1.129504459, y_val: 0.79373548, image_path: "https://randomuser.me/api/portraits/men/3.jpg"},
{id: "54", radius: 20, x_val: -0.400271288, y_val: -0.041699005, image_path: "https://randomuser.me/api/portraits/men/4.jpg"},
{id: "55", radius: 20, x_val: -0.713066764, y_val: -0.065581945, image_path: "https://randomuser.me/api/portraits/men/5.jpg"},
{id: "56", radius: 20, x_val: 0.141405684, y_val: -0.683829363, image_path: "https://randomuser.me/api/portraits/men/6.jpg"},
{id: "57", radius: 20, x_val: -0.491503428, y_val: 0.277648091, image_path: "https://randomuser.me/api/portraits/men/7.jpg"},
{id: "58", radius: 20, x_val: -0.272968807, y_val: 0.348613547, image_path: "https://randomuser.me/api/portraits/men/8.jpg"},
{id: "59", radius: 20, x_val: -0.659780854, y_val: -0.101035208, image_path: "https://randomuser.me/api/portraits/men/9.jpg"},
{id: "60", radius: 20, x_val: -0.213466844, y_val: 0.114517042, image_path: "https://randomuser.me/api/portraits/men/10.jpg"},
{id: "61", radius: 20, x_val: -1.123708627, y_val: 0.080158161, image_path: "https://randomuser.me/api/portraits/men/11.jpg"},
{id: "62", radius: 20, x_val: 0.301739795, y_val: 0.335032382, image_path: "https://randomuser.me/api/portraits/men/12.jpg"},
{id: "63", radius: 20, x_val: -0.365948302, y_val: 0.806027335, image_path: "https://randomuser.me/api/portraits/men/13.jpg"},
{id: "64", radius: 20, x_val: -0.756748614, y_val: -0.242801765, image_path: "https://randomuser.me/api/portraits/men/14.jpg"},
{id: "65", radius: 20, x_val: 0.197125938, y_val: -0.568411685, image_path: "https://randomuser.me/api/portraits/men/15.jpg"},
{id: "66", radius: 20, x_val: 0.061806516, y_val: -0.265423738, image_path: "https://randomuser.me/api/portraits/men/16.jpg"},
{id: "67", radius: 20, x_val: -0.006932884, y_val: -0.545363391, image_path: "https://randomuser.me/api/portraits/men/17.jpg"},
{id: "68", radius: 20, x_val: 0.050319626, y_val: 1.065291393, image_path: "https://randomuser.me/api/portraits/men/18.jpg"},
{id: "69", radius: 20, x_val: 0.068829406, y_val: -0.792930357, image_path: "https://randomuser.me/api/portraits/men/19.jpg"},
{id: "70", radius: 20, x_val: -0.07217268, y_val: -0.527362828, image_path: "https://randomuser.me/api/portraits/men/20.jpg"},
{id: "71", radius: 20, x_val: -0.220561666, y_val: -0.069526494, image_path: "https://randomuser.me/api/portraits/men/21.jpg"},
{id: "72", radius: 20, x_val: 0.206770378, y_val: -0.726994465, image_path: "https://randomuser.me/api/portraits/men/22.jpg"},
{id: "73", radius: 20, x_val: -0.423110523, y_val: 0.650330091, image_path: "https://randomuser.me/api/portraits/men/23.jpg"},
{id: "74", radius: 20, x_val: 1.07959183, y_val: 0.645939956, image_path: "https://randomuser.me/api/portraits/men/24.jpg"},
{id: "75", radius: 20, x_val: 1.042263734, y_val: 0.648208849, image_path: "https://randomuser.me/api/portraits/men/25.jpg"},
{id: "76", radius: 20, x_val: 0.299699774, y_val: -0.300878926, image_path: "https://randomuser.me/api/portraits/men/26.jpg"},
{id: "77", radius: 20, x_val: -0.054868007, y_val: 0.602020056, image_path: "https://randomuser.me/api/portraits/men/27.jpg"},
{id: "78", radius: 20, x_val: 0.111385781, y_val: -0.311267823, image_path: "https://randomuser.me/api/portraits/men/28.jpg"},
{id: "79", radius: 20, x_val: 0.116579742, y_val: -0.189353546, image_path: "https://randomuser.me/api/portraits/men/29.jpg"},
{id: "80", radius: 20, x_val: 0.151960716, y_val: -0.223236084, image_path: "https://randomuser.me/api/portraits/men/30.jpg"},
{id: "81", radius: 20, x_val: -0.489367706, y_val: 0.022963543, image_path: "https://randomuser.me/api/portraits/men/31.jpg"},
{id: "82", radius: 20, x_val: 0.735904739, y_val: 0.995753046, image_path: "https://randomuser.me/api/portraits/men/32.jpg"},
{id: "83", radius: 20, x_val: -0.116236155, y_val: 0.294305471, image_path: "https://randomuser.me/api/portraits/men/33.jpg"},
{id: "84", radius: 20, x_val: 0.01487044, y_val: 0.181612745, image_path: "https://randomuser.me/api/portraits/men/34.jpg"},
{id: "85", radius: 20, x_val: 0.094360886, y_val: -0.205817704, image_path: "https://randomuser.me/api/portraits/men/35.jpg"},
{id: "86", radius: 20, x_val: 0.018350436, y_val: 0.019521295, image_path: "https://randomuser.me/api/portraits/men/36.jpg"},
{id: "87", radius: 20, x_val: -0.632485155, y_val: 0.104547253, image_path: "https://randomuser.me/api/portraits/men/37.jpg"},
{id: "88", radius: 20, x_val: -0.177321043, y_val: 0.5748001, image_path: "https://randomuser.me/api/portraits/men/38.jpg"},
{id: "89", radius: 20, x_val: -0.183306303, y_val: -0.698285551, image_path: "https://randomuser.me/api/portraits/men/39.jpg"},
{id: "90", radius: 20, x_val: 0.232208529, y_val: -0.123386219, image_path: "https://randomuser.me/api/portraits/men/40.jpg"},
{id: "91", radius: 20, x_val: -1.091069808, y_val: -0.315369715, image_path: "https://randomuser.me/api/portraits/men/41.jpg"},
{id: "92", radius: 20, x_val: 1.157430691, y_val: 0.46812619, image_path: "https://randomuser.me/api/portraits/men/42.jpg"},
{id: "93", radius: 20, x_val: 0.354764121, y_val: -0.328915035, image_path: "https://randomuser.me/api/portraits/men/43.jpg"},
{id: "94", radius: 20, x_val: 0.544870452, y_val: 1.053133002, image_path: "https://randomuser.me/api/portraits/men/44.jpg"},
{id: "95", radius: 20, x_val: -0.178834217, y_val: -0.028700018, image_path: "https://randomuser.me/api/portraits/men/45.jpg"},
{id: "96", radius: 20, x_val: 0.750237455, y_val: -1.169977696, image_path: "https://randomuser.me/api/portraits/men/46.jpg"},
{id: "97", radius: 20, x_val: -0.632356987, y_val: -0.078457383, image_path: "https://randomuser.me/api/portraits/men/47.jpg"},
{id: "98", radius: 20, x_val: -0.707892656, y_val: -0.061103491, image_path: "https://randomuser.me/api/portraits/men/48.jpg"},
{id: "99", radius: 20, x_val: -0.484449085, y_val: 0.14630526, image_path: "https://randomuser.me/api/portraits/men/49.jpg"},
{id: "100", radius: 20, x_val: -1.131738627, y_val: 0.001494601, image_path: "https://randomuser.me/api/portraits/men/50.jpg"}
];
  
  
​
 
  var margin = {top: 40, right: 40, bottom: 40, left:40};
  var width = window.innerWidth - 100 - margin.left - margin.right;
  var height = window.innerHeight - 100 - margin.top - margin.bottom;
  var xScale = d3.scaleLinear().range([0, width]);
  var yScale = d3.scaleLinear().range([height, 0]);
  var xAxis = d3.axisBottom().scale(xScale);
  var yAxis = d3.axisLeft().scale(yScale);
  
​
    xScale.domain(d3.extent(data, function(d){ return d.x_val; })).nice();
    yScale.domain(d3.extent(data, function(d){ return d.y_val; })).nice();
​
    var svg = d3.select('body')
      .append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
​
    var defs = svg.append("defs");
 
  
​
    defs.selectAll(".bubble-pattern")
      .data(data)
      .enter().append("pattern")
      .attr("class", "bubble-pattern")
      .attr("id", function(d) { return d.id })
      .attr("height", "100%")
      .attr("width", "100%")
      .attr("patternContentUnits", "objectBoundingBox")
      .append("image")
      .attr("height", 1)
      .attr("width", 1)
      .attr("preserveAspectRatio", "none")
      .attr("xmlns:xlink", "http://w3.org/1999/xlink")
      .attr("xlink:href", function(d) { return d.image_path })
​
    var node = svg.selectAll('.node')
      .data(data)
      .enter().append('circle')
      .attr('class', 'node')
      .attr('cx', function(d){return xScale(d.x_val);})
      .attr('cy', function(d){ return yScale(d.y_val); })
      .attr('r', function(d){ return d.radius ; })
      .style("stroke", "green")
      .style("stroke-width", 2)
      .attr("fill", function(d) { return "url(#" + d.id + ")" });
  
  var simulation = d3.forceSimulation(data)
​
  .force('x', d3.forceX().x(d => xScale(d.x_val)))
  .force('y', d3.forceY().y(d => yScale(d.y_val)))
  .force('collision', d3.forceCollide().radius(function(d) { return d.radius + 1 }) )
      .on('tick', function() {
        svg.selectAll('.node')
          .attr('cx', function(d) { return d.x; })
          .attr('cy', function(d) { return d.y; })
      })
  
  
  
​
  
​
​
​
  
​
  
</script>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
elizhahnpro
0viewers