clemens-tolboom/index.html

## index.html
<!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="http://d3js.org/d3.v3.js" charset="utf-8"></script>
    <script type="text/javascript">
      window.onload = function() {

        var data = [
          {class: 'color-1'},
          {class: 'color-2'},
          {class: 'color-3'},
          {class: 'color-4'},
          {class: 'color-5'},
          {class: 'color-6'},
          {class: 'color-7'},
          {class: 'color-8'},
          {class: 'color-9'},
        ];
        var radius = 20;
        var grid = 3;
        var svg = d3.select('#main')
                .append('svg:svg')
                .attr('width', 2 * radius * (grid + 1))
                .attr('height', 2 * radius * (grid + 1))
                .attr('background-color', 'grey')
                ;

        // 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>
	<!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="http://d3js.org/d3.v3.js" charset="utf-8"></script>
	<script type="text/javascript">
	window.onload = function() {

	var data = [
	{class: 'color-1'},
	{class: 'color-2'},
	{class: 'color-3'},
	{class: 'color-4'},
	{class: 'color-5'},
	{class: 'color-6'},
	{class: 'color-7'},
	{class: 'color-8'},
	{class: 'color-9'},
	];
	var radius = 20;
	var grid = 3;
	var svg = d3.select('#main')
	.append('svg:svg')
	.attr('width', 2 * radius * (grid + 1))
	.attr('height', 2 * radius * (grid + 1))
	.attr('background-color', 'grey')
	;

	// 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>