Skip to content

Instantly share code, notes, and snippets.

@curran

curran/.block

Last active December 31, 2024 00:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save curran/c130b1d3d68a375c8eb41371f2c2a75b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save curran/c130b1d3d68a375c8eb41371f2c2a75b to your computer and use it in GitHub Desktop.
Download ZIP
Compare Colors
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/[email protected]/build/d3.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/@claviska/[email protected]/jquery.minicolors.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/@claviska/[email protected]/jquery.minicolors.css">
<style>
body {
margin:0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<input type="text" id="a" class="form-control picker" value="#ff6161">
</div>
<div class="col">
<input type="text" id="b" class="form-control picker" value="#ff6161">
</div>
<svg width="960" height="400"></svg>
</div>
<script>
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height");
svg.selectAll("rect").data(["a", "b"])
.enter().append("rect")
.attr("id", function (d) { return "color-rect-" + d; })
.attr("x", function (d, i){ return i * width/2; })
.attr("width", width/2)
.attr("height", height);
$(".picker").minicolors({
change: function(value, opacity) {
if( !value ) return;
var id = d3.select(this).attr("id");
d3.select("color-rect-" + id)
.attr("fill", value);
},
theme: "bootstrap"
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment