Skip to content

Instantly share code, notes, and snippets.

@CrashLaker

CrashLaker/index.html

Last active April 15, 2020 05:17
Show Gist options
  • Save CrashLaker/8db868f149d7ade5c7059e918ed1bffb to your computer and use it in GitHub Desktop.
Save CrashLaker/8db868f149d7ade5c7059e918ed1bffb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="//unpkg.com/d3@5.15.1"></script>
</head>
<body>
<svg></svg>
<script>
var colors = {
'blue': ['#e6f7ff', '#bae7ff', '#91d5ff', '#69c0ff', '#40a9ff', '#1890ff', '#096dd9', '#0050b3', '#003a8c', '#002766'],
'cyan': ['#e6fffb', '#b5f5ec', '#87e8de', '#5cdbd3', '#36cfc9', '#13c2c2', '#08979c', '#006d75', '#00474f', '#002329'],
'geekblue': ['#f0f5ff', '#d6e4ff', '#adc6ff', '#85a5ff', '#597ef7', '#2f54eb', '#1d39c4', '#10239e', '#061178', '#030852'],
'gold': ['#fffbe6', '#fff1b8', '#ffe58f', '#ffd666', '#ffc53d', '#faad14', '#d48806', '#ad6800', '#874d00', '#613400'],
'green': ['#f6ffed', '#d9f7be', '#b7eb8f', '#95de64', '#73d13d', '#52c41a', '#389e0d', '#237804', '#135200', '#092b00'],
'lime': ['#fcffe6', '#f4ffb8', '#eaff8f', '#d3f261', '#bae637', '#a0d911', '#7cb305', '#5b8c00', '#3f6600', '#254000'],
'magenta': ['#fff0f6', '#ffd6e7', '#ffadd2', '#ff85c0', '#f759ab', '#eb2f96', '#c41d7f', '#9e1068', '#780650', '#520339'],
'orange': ['#fff7e6', '#ffe7ba', '#ffd591', '#ffc069', '#ffa940', '#fa8c16', '#d46b08', '#ad4e00', '#873800', '#612500'],
'purple': ['#f9f0ff', '#efdbff', '#d3adf7', '#b37feb', '#9254de', '#722ed1', '#531dab', '#391085', '#22075e', '#120338'],
'red': ['#fff1f0', '#ffccc7', '#ffa39e', '#ff7875', '#ff4d4f', '#f5222d', '#cf1322', '#a8071a', '#820014', '#5c0011'],
'volcano': ['#fff2e8', '#ffd8bf', '#ffbb96', '#ff9c6e', '#ff7a45', '#fa541c', '#d4380d', '#ad2102', '#871400', '#610b00'],
'yellow': ['#feffe6', '#ffffb8', '#fffb8f', '#fff566', '#ffec3d', '#fadb14', '#d4b106', '#ad8b00', '#876800', '#614700']
}
var width = 500, height = 500
var svg = d3.select('svg')
.attr('width', width+'px')
.attr('height', height+'px')
var color_keys = Object.keys(colors)
var scale = d3.scaleBand().domain(color_keys).range([0,width])
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
svg.selectAll('text')
.data(color_keys)
.enter()
.append('text')
.attr('x', 10)
.attr('y', (d) => scale(d)+10)
.style('font', '14px normal sans-serif')
.text((d) => d)
var block_size = 40
svg.selectAll('g')
.data(color_keys)
.enter()
.append('g')
.attr('transform', (d) => 'translate(10, '+(scale(d)+15)+')')
.each(function(key) {
d3.select(this)
.selectAll('rect')
.data(colors[key])
.enter()
.append('rect')
.attr('width', block_size+'px')
.attr('height', 20+'px')
.attr('x', (d,i) => block_size*i)
.attr('fill', (d) => d)
.style('border', '1px solid black')
.style('cursor', 'pointer')
.on('click', (d) => copyToClipboard(d))
d3.select(this)
.selectAll('text')
.data(colors[key])
.enter()
.append('text')
.attr('width', block_size+'px')
.attr('height', 20+'px')
.attr('text-anchor', 'middle')
.attr('fill', (d,i) => (i>5) ? 'lightgrey' : 'black')
.attr('x', (d,i) => block_size*i + 20)
.attr('y', 15)
.style('font', '10px normal sans-serif')
.style('cursor', 'pointer')
.text((d) => d)
.on('click', (d) => copyToClipboard(d))
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment