A color picker layout

<!DOCTYPE html>
<html>
  <head>
    <title>Color menu</title>
    <style>
      svg circle {
        fill: white;
        stroke: #020202;
        stroke-width: 3px;
      }

svg circle.dragging ,
      svg circle:hover {
        fill: orange;
      }

svg circle.in-route {
        fill: red;
      }

.grid-line {
        stroke: black;
        stroke-width: 1px;
      }

svg circle:hover {
        opacity: 1.0;
      }

svg circle {
        opacity: 0.7;
      }

svg circle.color-1{
        fill: #368;
      }
      svg circle.color-2 {
        fill: #216;
      }
      svg circle.color-3 {
        fill: #c30;
      }
      svg circle.color-4 {
        fill: #090;
      }
      svg circle.color-5 {
        fill: #f90;
      }
      svg circle.color-6 {
        fill: #b40;
      }
      svg circle.color-7 {
        fill: #ca0;
      }
      svg circle.color-8 {
        fill: #ca8;
      }
      svg circle.color-9 {
        fill: #caf;
      }
    </style>
    <script src="https://d3js.org/d3.v3.js" charset="utf-8"></script>
    <script type="text/javascript">
      window.onload = function() {

// data join for text
        var colors = svg.selectAll("circle.color")
                .data(data);

// NEW
        colors
                .enter()
                .append("circle")
                .classed('color', true)
                ;

// UPDATE
        colors
                // remove other color- values
                .classed('color-1 color-2 color-3 color-4 color-5 color-6 color-7', false)
                .attr('class', function(d) {
          var that = d3.select(this);
          var clazz = that.attr('class');
          return clazz + " " + d.class;
        })
                ;

// all elements in place
        colors.attr('r', radius * 0.8)
                .attr('cy', function(d, i) {
          return Math.floor(i / grid) * 2 * radius + radius;
        })
                .attr('cx', function(d, i) {
          return i % grid * 2 * radius + radius;
        })
                ;

// EXIT
        // Remove old elements as needed.
        colors.exit().remove();
      }
    </script>
  </head>
  <body>
    <div id="main"></div>
  </body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js