d3 | radial force

.block

license: mit
height: 500
border: no

README.md

using Radial Force to show the data of the universe (accurate to a dot/point, give or take a dot/point)

dist.css

*{box-sizing:border-box}* body{background:#0f0a01}

dist.js

!function(n){function t(c){if(e[c])return e[c].exports;var o=e[c]={i:c,l:!1,exports:{}};return n[c].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var e={};t.m=n,t.c=e,t.i=function(n){return n},t.d=function(n,e,c){t.o(n,e)||Object.defineProperty(n,e,{configurable:!1,enumerable:!0,get:c})},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,"a",e),e},t.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},t.p="",t(t.s=0)}([function(module,exports,__webpack_require__){"use strict";eval("\n\n(function () {\n  var d3 = window.d3;\n  // create some data\n  function createNodes() {\n    return [].concat(d3.range(Math.floor(Math.random() * 100)).map(function () {\n      return { type: 'a' };\n    }), d3.range(Math.floor(Math.random() * 100)).map(function () {\n      return { type: 'b' };\n    }), d3.range(Math.floor(Math.random() * 100)).map(function () {\n      return { type: 'c' };\n    }), d3.range(Math.floor(Math.random() * 100)).map(function () {\n      return { type: 'd' };\n    }));\n  }\n  var sets = ['a', 'b', 'c', 'd'];\n  var nodes = createNodes();\n\n  var col = d3.scaleOrdinal().domain(sets).range(['#de3d83', '#00b8b8', '#e4bd0b', '#e0e5db']);\n\n  var pointScale = d3.scalePoint().domain(sets).range([0, 200]);\n\n  var select = d3.select('svg').append('g');\n\n  var simulation = d3.forceSimulation(nodes).force('charge', d3.forceCollide().radius(10)).force('r', d3.forceRadial(function (d) {\n    return pointScale(d.type);\n  })).on('tick', ticked);\n\n  var node = select.selectAll('circle');\n  restart();\n\n  d3.interval(function () {\n    nodes = [];\n    nodes = createNodes();\n    restart();\n  }, 2000, d3.now());\n\n  function restart() {\n    // apply the general update pattern to the nodes\n    node = node.data(nodes, function (d) {\n      return d.index;\n    });\n    node.exit().remove();\n    node = node.enter().append('circle').attr('r', 5).merge(node).attr('fill', function (d) {\n      return col(d.type);\n    });\n\n    // update and restart the simulation.\n    simulation.nodes(nodes);\n    simulation.alpha(1).restart();\n  }\n\n  function ticked() {\n    node.attr('cx', function (d) {\n      return d.x;\n    }).attr('cy', function (d) {\n      return d.y;\n    });\n  }\n})();//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9zY3JpcHQuanM/OWE5NSJdLCJzb3VyY2VzQ29udGVudCI6WyIoZnVuY3Rpb24gKCkge1xuICBjb25zdCBkMyA9IHdpbmRvdy5kM1xuICAvLyBjcmVhdGUgc29tZSBkYXRhXG4gIGZ1bmN0aW9uIGNyZWF0ZU5vZGVzICgpIHtcbiAgICByZXR1cm4gW10uY29uY2F0KFxuICAgICAgZDMucmFuZ2UoTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogMTAwKSkubWFwKCgpID0+IHsgcmV0dXJuIHsgdHlwZTogJ2EnIH0gfSksXG4gICAgICBkMy5yYW5nZShNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKiAxMDApKS5tYXAoKCkgPT4geyByZXR1cm4ge3R5cGU6ICdiJ30gfSksXG4gICAgICBkMy5yYW5nZShNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKiAxMDApKS5tYXAoKCkgPT4geyByZXR1cm4ge3R5cGU6ICdjJ30gfSksXG4gICAgICBkMy5yYW5nZShNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKiAxMDApKS5tYXAoKCkgPT4geyByZXR1cm4ge3R5cGU6ICdkJ30gfSlcbiAgICApXG4gIH1cbiAgY29uc3Qgc2V0cyA9IFsnYScsICdiJywgJ2MnLCAnZCddXG4gIGxldCBub2RlcyA9IGNyZWF0ZU5vZGVzKClcblxuICBjb25zdCBjb2wgPSBkMy5zY2FsZU9yZGluYWwoKVxuICAgIC5kb21haW4oc2V0cylcbiAgICAucmFuZ2UoWycjZGUzZDgzJywgJyMwMGI4YjgnLCAnI2U0YmQwYicsICcjZTBlNWRiJ10pXG5cbiAgY29uc3QgcG9pbnRTY2FsZSA9IGQzLnNjYWxlUG9pbnQoKVxuICAgIC5kb21haW4oc2V0cylcbiAgICAucmFuZ2UoWzAsIDIwMF0pXG5cbiAgY29uc3Qgc2VsZWN0ID0gZDMuc2VsZWN0KCdzdmcnKVxuICAgIC5hcHBlbmQoJ2cnKVxuXG4gIGNvbnN0IHNpbXVsYXRpb24gPSBkMy5mb3JjZVNpbXVsYXRpb24obm9kZXMpXG4gICAgLmZvcmNlKCdjaGFyZ2UnLCBkMy5mb3JjZUNvbGxpZGUoKS5yYWRpdXMoMTApKVxuICAgIC5mb3JjZSgncicsIGQzLmZvcmNlUmFkaWFsKGQgPT4gcG9pbnRTY2FsZShkLnR5cGUpKSlcbiAgICAub24oJ3RpY2snLCB0aWNrZWQpXG5cbiAgbGV0IG5vZGUgPSBzZWxlY3Quc2VsZWN0QWxsKCdjaXJjbGUnKVxuICByZXN0YXJ0KClcblxuICBkMy5pbnRlcnZhbChmdW5jdGlvbiAoKSB7XG4gICAgbm9kZXMgPSBbXVxuICAgIG5vZGVzID0gY3JlYXRlTm9kZXMoKVxuICAgIHJlc3RhcnQoKVxuICB9LCAyMDAwLCBkMy5ub3coKSlcblxuICBmdW5jdGlvbiByZXN0YXJ0ICgpIHtcbiAgICAvLyBhcHBseSB0aGUgZ2VuZXJhbCB1cGRhdGUgcGF0dGVybiB0byB0aGUgbm9kZXNcbiAgICBub2RlID0gbm9kZS5kYXRhKG5vZGVzLCBkID0+IGQuaW5kZXgpXG4gICAgbm9kZS5leGl0KCkucmVtb3ZlKClcbiAgICBub2RlID0gbm9kZS5lbnRlcigpLmFwcGVuZCgnY2lyY2xlJylcbiAgICAgIC5hdHRyKCdyJywgNSlcbiAgICAgIC5tZXJnZShub2RlKVxuICAgICAgLmF0dHIoJ2ZpbGwnLCBkID0+IGNvbChkLnR5cGUpKVxuXG4gICAgLy8gdXBkYXRlIGFuZCByZXN0YXJ0IHRoZSBzaW11bGF0aW9uLlxuICAgIHNpbXVsYXRpb24ubm9kZXMobm9kZXMpXG4gICAgc2ltdWxhdGlvbi5hbHBoYSgxKS5yZXN0YXJ0KClcbiAgfVxuXG4gIGZ1bmN0aW9uIHRpY2tlZCAoKSB7XG4gICAgbm9kZVxuICAgICAgLmF0dHIoJ2N4JywgZCA9PiBkLngpXG4gICAgICAuYXR0cignY3knLCBkID0+IGQueSlcbiAgfVxufSkoKVxuXG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIHNjcmlwdC5qcyJdLCJtYXBwaW5ncyI6Ijs7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFBQTtBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUdBO0FBQ0E7QUFHQTtBQUNBO0FBRUE7QUFFQTtBQUFBO0FBQ0E7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBQ0E7QUFDQTtBQUdBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///0\n")}]);

index.html

<!DOCTYPE html>
<title>blockup</title>
<link href='dist.css' rel='stylesheet' />
<body>
  <svg width='960' height='500' viewBox='-480 -250 960 500'></svg>
  <script src='https://d3js.org/d3.v4.min.js'></script>
  <script src='dist.js'></script>
</body>

script.js

(function () {
  const d3 = window.d3
  // create some data
  function createNodes () {
    return [].concat(
      d3.range(Math.floor(Math.random() * 100)).map(() => { return { type: 'a' } }),
      d3.range(Math.floor(Math.random() * 100)).map(() => { return {type: 'b'} }),
      d3.range(Math.floor(Math.random() * 100)).map(() => { return {type: 'c'} }),
      d3.range(Math.floor(Math.random() * 100)).map(() => { return {type: 'd'} })
    )
  }
  const sets = ['a', 'b', 'c', 'd']
  let nodes = createNodes()

  const col = d3.scaleOrdinal()
    .domain(sets)
    .range(['#de3d83', '#00b8b8', '#e4bd0b', '#e0e5db'])

  const pointScale = d3.scalePoint()
    .domain(sets)
    .range([0, 200])

  const select = d3.select('svg')
    .append('g')

  const simulation = d3.forceSimulation(nodes)
    .force('charge', d3.forceCollide().radius(10))
    .force('r', d3.forceRadial(d => pointScale(d.type)))
    .on('tick', ticked)

  let node = select.selectAll('circle')
  restart()

  d3.interval(function () {
    nodes = []
    nodes = createNodes()
    restart()
  }, 2000, d3.now())

  function restart () {
    // apply the general update pattern to the nodes
    node = node.data(nodes, d => d.index)
    node.exit().remove()
    node = node.enter().append('circle')
      .attr('r', 5)
      .merge(node)
      .attr('fill', d => col(d.type))

    // update and restart the simulation.
    simulation.nodes(nodes)
    simulation.alpha(1).restart()
  }

  function ticked () {
    node
      .attr('cx', d => d.x)
      .attr('cy', d => d.y)
  }
})()

style.styl

*
  box-sizing border-box
  body
    background: #0f0a01

thumbnail.png