D3 Loop de loop

In this example below you will see how to do a D3 Loop de loop with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by siriusastrebe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright siriusastrebe ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>D3 Loop de loop</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<head>
    <meta charset='utf-8'>
    <title>Loop de doop</title>

</head>
<body class="cross">

  <div id="chart"></div>

    <script src='https://d3js.org/d3.v3.min.js'></script>
</body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/siriusastrebe/d3-loop-de-loop-qZrNmJ */
      body.cross {
        cursor: crosshair;
      }   
      body.nav { 
        cursor: move;
      }   

      svg {
        border: 1px inset #888;
      }   

/*Downloaded from https://www.codeseek.co/siriusastrebe/d3-loop-de-loop-qZrNmJ */
var width = 1280,
    height = 800;

var x = 300,
    y = 200;

var outerToInner = true;

var colors = [
  '#F00',
  '#FF0',
  '#0F0',
  '#0FF',
  '#00F',
  '#F0F',
  '#FFF',
  '#000',

  '#800',
  '#800',
  '#880',
  '#888',
  '#808',
  '#088',
  '#008',

  '#400',
  '#004',
  '#040',
  '#404',
  '#040',
  '#444',

  '#840',
  '#048',
  '#484',
  '#848',

  '#C00',
  '#0C0',
  '#00C',
  '#C0C',
  '#0CC',
  '#CC0',
  '#CCC',


  '#F80',
  '#F88',
  '#FF8',
  '#88F',
  '#8F8',
  '#8FF',
  '#0F8',
  '#08F',
]

var outer = d3.select("#chart")
  .append("svg:svg")
    .attr("width", width)
    .attr("height", height)

var svg = d3.select("svg");


create();

function create () { 
  svg.selectAll("circle")
    .data(colors)
      .enter() 
        .append('circle')
          .attr('r', function (x, i) { return (colors.length-i) * 7 })
          .attr('cx', 400)
          .attr('cy', 300)
          .attr('fill', function (x) { return x })
          .attr('stroke-width', 8)
}

function update() { 
  outerToInner = !outerToInner;

  if (outerToInner) { 
    document.body.className = "cross";
  } else {
    document.body.className = "nav";
  }

  d3.shuffle(colors);
  svg.selectAll("circle")
    .data(colors)
      .transition() 
        .attr('fill', function (x) { return x })
          .duration(500)
}


outer.on('mousemove', function (e) { 
  var m = d3.mouse(this);
  
  svg.selectAll("circle")
    .transition()
      .ease('elastic')
        .attr('cx', m[0])
        .attr('cy', m[1])
          .delay(function (e, i) { return (outerToInner ? colors.length-i : i) * 8 });
  
});

outer.on('mousedown', update);

Comments