Skip to content

Instantly share code, notes, and snippets.

@clemens-tolboom
Last active December 26, 2015 23:39
Show Gist options
  • Save clemens-tolboom/7231676 to your computer and use it in GitHub Desktop.
Save clemens-tolboom/7231676 to your computer and use it in GitHub Desktop.
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="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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment