Skip to content

Instantly share code, notes, and snippets.

@Fil

Fil/.block

Last active May 22, 2017 16:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Fil/71117394c3a1fa007deb9a904fd398c7 to your computer and use it in GitHub Desktop.
Save Fil/71117394c3a1fa007deb9a904fd398c7 to your computer and use it in GitHub Desktop.
Download ZIP
palettes [UNLISTED]
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
var inter = d3.interpolate('#fcd745','#e3322d');
var palettes = [
['#0ba64e','#9ddf57','#e5e54c','#d4b31f','#faaf0f','#ff840a','#e4280f'],
['#c9e1f5', '#a8cde9', '#74acd9', '#2e71ad', '#163e81'],
[inter(0), inter(0.20), inter(0.55), inter(0.80), inter(1), d3.rgb(inter(1)).darker()],
['#66c2a5','#fc8d62','#8da0cb','#e78ac3','#a6d854','#ffd92f','#e5c494'], ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#efef00','#b15928', '#bc80bd', '#ccebc5'],
];
var p = svg.selectAll('g.palette')
.data(palettes)
.enter()
.append('g')
.classed('palette', true)
.attr("transform", (d,i) => `translate(0,${61*i})`)
.selectAll('g')
.data(d => d)
.enter()
.append("g")
.attr("transform", (d,i) => `translate(${61*i},0)`)
;
p.append('rect')
.attr('fill', d => d)
.attr('height', 60)
.attr('width', 60)
p.append('text')
.attr("transform", ('translate(5,35)'))
.text(d => d);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment