D3 Examples - Static D3 Force

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg {border: solid}
  </style>
</head>
​
<body>
  <script>
    var data = [
      {
            id: '\uD83D\uDE02',
            name: 'Face with tears of joy',
            type: 'emoji',
            volume: 936,
        }, {
            id: '\u2764',
            name: 'Heavy heart',
            type: 'emoji',
            volume: 852,
        }, {
            id: '\uD83D\uDE0D',
            name: 'Smiling face with heart-shaped eyes',
            type: 'emoji',
            volume: 687,
        }, {
            id: '\u2665',
            name: 'Heart suit',
            type: 'emoji',
            volume: 654,
        }, {
            id: '\uD83D\uDE2D',
            name: 'Loudly crying face',
            type: 'emoji',
            volume: 522,
        }, {
            id: '\uD83D\uDE0A',
            name: 'Smiling face with smiling eyes',
            type: 'emoji',
            volume: 488,
        }, {
            id: '\u267B',
            name: 'Universal recycling symbol',
            type: 'emoji',
            volume: 485,
        }, {
            id: '\uD83D\uDE12',
            name: 'Unamused face',
            type: 'emoji',
            volume: 443,
        }, {
            id: '\uD83D\uDC95',
            name: 'Two hearts',
            type: 'emoji',
            volume: 384,
        }, {
            id: '\uD83D\uDE18',
            name: 'Face throwing a kiss',
            type: 'emoji',
            volume: 380,
        }, {
            id: '\uD83D\uDE29',
            name: 'Weary face',
            type: 'emoji',
            volume: 346,
        }, {
            id: '\u263A',
            name: 'White smiling face',
            type: 'emoji',
            volume: 335,
        }, {
            id: '\uD83D\uDC4C',
            name: 'OK hand sign',
            type: 'emoji',
            volume: 313,
        }, {
            id: '\uD83D\uDE14',
            name: 'Pensive face',
            type: 'emoji',
            volume: 285,
        }, {
            id: '\uD83D\uDE0F',
            name: 'Smirking face',
            type: 'emoji',
            volume: 277,
        }, {
            id: '\uD83D\uDE01',
            name: 'Grinning face with smiling eyes',
            type: 'emoji',
            volume: 270,
        }, {
            id: '\u2B05',
            name: 'Leftwards black arrow',
            type: 'emoji',
            volume: 225,
        }, {
            id: '\uD83D\uDE09',
            name: 'Winking face',
            type: 'emoji',
            volume: 213,
        }, {
            id: '\uD83D\uDC4D',
            name: 'Thumbs up sign',
            type: 'emoji',
            volume: 188,
        }, {
            id: '\uD83D\uDE0C',
            name: 'Relieved face',
            type: 'emoji',
            volume: 182,
        }, {
            id: '\uD83D\uDE4F',
            name: 'Person with folded hands',
            type: 'emoji',
            volume: 176,
        }
    ];
    
    var width = 500;
    var height = 500;
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
        .attr("viewBox", [-width/2, -height/2, width, height]);
        
    var volumeScale = d3.scaleLinear()
      .domain(d3.extent(data, datum => datum.volume))
      .range([10, 30]);
    
    data = data.map(datum => (
      Object.assign({}, datum, {
        r: volumeScale(datum.volume)
      })
    ));
    
    var simulation = d3.forceSimulation(data)
      .velocityDecay(0.3)
      .alphaDecay(0.1)
      .force('collide', d3.forceCollide().strength(0.2).radius(d => d.r))
        .stop();
    console.time()
    for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
    simulation.tick();
  };
    console.timeEnd()
    
        svg.append('g')
        .classed('container', true)
      .selectAll('circle')
      .data(data)
      .enter()
      .append('circle')
        .attr('fill', '#f6a')
        .attr('stroke', '#000000')
      .attr('r', d => d.r)
        .attr('cx', d => d.x)
        .attr('cy', d => d.y)
    
    var SVGRect = document.querySelector('.container')
        .getBBox();
    
    console.log(SVGRect)
        
    d3.select("svg")
      .attr("viewBox", [SVGRect.x, SVGRect.y, SVGRect.width, SVGRect.height])
//      .attr("preserveAspectRatio", "xMidYMid slice");
​
  </script>
</body>
​
    