Built with blockbuilder.org
forked from sxywu's block: Color scale
license: mit |
Built with blockbuilder.org
forked from sxywu's block: Color scale
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script> | |
<script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script> | |
<script type="text/javascript" src="http://gka.github.io/chroma.js/vendor/chroma-js/chroma.min.js"></script> | |
<style> | |
svg { | |
width: 1200px; | |
height: 1200px; | |
} | |
</style> | |
</head> | |
<body> | |
<svg></svg> | |
<script> | |
var colors = { | |
"1": ["Aaron Burr", chroma('af59e2').darken(.5)], | |
"2": ["Alexander Hamilton", chroma('52c2ab').darken(.5)], | |
"3": ["George Washington", chroma('5a9fe8').darken(1.5)], | |
"4": ["John Laurens", chroma('51b6c9').darken(0)], | |
"5": ["Marquis de Lafayette", chroma('51b6c9').darken()], | |
"6": ["Hercules Mulligan", chroma('51b6c9').darken(2)], | |
"7": ["Elizabeth Hamilton", chroma('51addf')], | |
"8": ["Angelica Schuyler", chroma('e68fc3').darken(.5)], | |
"9": ["Peggy Schuyler", chroma('f7e283').darken(.5)], | |
"10": ["Thomas Jefferson", chroma('ee8265').darken(.25)], | |
"11": ["James Madison", chroma('f19b6f')], | |
"12": ["King George III", chroma('e85151').darken(.5)], | |
"13": ["Samuel Seabury", chroma('eb695b').darken(2)], | |
"14": ["Charles Lee", chroma('b6e86f')], | |
"15": ["Phillip Hamilton", chroma('52c2ab').brighten(.5)], | |
"16": ["Maria Reynolds", chroma('e75d87').darken(1.25)], | |
"17": ["James Reynolds", chroma('b6e86f').darken(.25)], | |
"18": ["George Eacker", chroma('b6e86f').darken(.5)], | |
"21": ["Women", chroma('e85178').darken(.5)], | |
"22": ["Men", chroma('6298e8').darken(.5)], | |
"24": ["Company", chroma('f7d783')] | |
}; | |
colors = _.values(colors); | |
var svg = d3.select('svg'); | |
var perRow = 4; | |
var size = 125; | |
var g = svg.selectAll('g') | |
.data(colors).enter().append('g') | |
.attr('transform', (d, i) => { | |
var x = (i % perRow + 1) * size; | |
var y = (Math.floor(i / perRow) + 1) * size; | |
return 'translate(' + [x, y] + ')'; | |
}).attr('fill', d => d[1]); | |
g.append('circle') | |
.attr('r', size / 4); | |
g.append('text') | |
.attr('y', size / 4 + 15) | |
.attr('text-anchor', 'middle') | |
.attr('dy', '.35em') | |
.text((d, i) => d[0]); | |
g.append('text') | |
.attr('y', size / 4 + 36) | |
.attr('text-anchor', 'middle') | |
.attr('dy', '.35em') | |
.text((d, i) => d[1]); | |
</script> | |
</body> |