Chart palette
This commit is contained in:
parent
468b7e14ce
commit
edf8affd73
|
|
@ -0,0 +1,28 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf8">
|
||||||
|
<title>Empact Chart Palette</title>
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; }
|
||||||
|
html, body { height: 100%; }
|
||||||
|
div {
|
||||||
|
width: 100%;
|
||||||
|
height: 7%;
|
||||||
|
font-size: 3em;
|
||||||
|
padding: 0 30px;
|
||||||
|
font-family: Courier;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script src="/scripts/colors.js"></script>
|
||||||
|
<script>
|
||||||
|
for (var i = 0; i < Colors.length; i++) {
|
||||||
|
var div = document.createElement('div');
|
||||||
|
div.style.backgroundColor = Colors[i];
|
||||||
|
div.innerText = Colors[i];
|
||||||
|
document.body.appendChild(div);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
@ -1,78 +1,17 @@
|
||||||
// Colors source: http://graphicdesign.stackexchange.com/revisions/3815/8
|
|
||||||
var Colors = [
|
var Colors = [
|
||||||
"#000000", "#FFFF00", "#1CE6FF", "#FF34FF", "#FF4A46", "#008941", "#006FA6", "#A30059",
|
"#EA8369",
|
||||||
"#FFDBE5", "#7A4900", "#0000A6", "#63FFAC", "#B79762", "#004D43", "#8FB0FF", "#997D87",
|
"#FCCD67",
|
||||||
"#5A0007", "#809693", "#FEFFE6", "#1B4400", "#4FC601", "#3B5DFF", "#4A3B53", "#FF2F80",
|
"#B5A9F2",
|
||||||
"#61615A", "#BA0900", "#6B7900", "#00C2A0", "#FFAA92", "#FF90C9", "#B903AA", "#D16100",
|
"#9DD7F2",
|
||||||
"#DDEFFF", "#000035", "#7B4F4B", "#A1C299", "#300018", "#0AA6D8", "#013349", "#00846F",
|
"#FFA3A4",
|
||||||
"#372101", "#FFB500", "#C2FFED", "#A079BF", "#CC0744", "#C0B9B2", "#C2FF99", "#001E09",
|
"#A8EAA8",
|
||||||
"#00489C", "#6F0062", "#0CBD66", "#EEC3FF", "#456D75", "#B77B68", "#7A87A1", "#788D66",
|
"#F9D08B",
|
||||||
"#885578", "#FAD09F", "#FF8A9A", "#D157A0", "#BEC459", "#456648", "#0086ED", "#886F4C",
|
|
||||||
"#34362D", "#B4A8BD", "#00A6AA", "#452C2C", "#636375", "#A3C8C9", "#FF913F", "#938A81",
|
|
||||||
"#575329", "#00FECF", "#B05B6F", "#8CD0FF", "#3B9700", "#04F757", "#C8A1A1", "#1E6E00",
|
|
||||||
"#7900D7", "#A77500", "#6367A9", "#A05837", "#6B002C", "#772600", "#D790FF", "#9B9700",
|
|
||||||
"#549E79", "#FFF69F", "#201625", "#72418F", "#BC23FF", "#99ADC0", "#3A2465", "#922329",
|
|
||||||
"#5B4534", "#FDE8DC", "#404E55", "#0089A3", "#CB7E98", "#A4E804", "#324E72", "#6A3A4C",
|
|
||||||
"#83AB58", "#001C1E", "#D1F7CE", "#004B28", "#C8D0F6", "#A3A489", "#806C66", "#222800",
|
|
||||||
"#BF5650", "#E83000", "#66796D", "#DA007C", "#FF1A59", "#8ADBB4", "#1E0200", "#5B4E51",
|
|
||||||
"#C895C5", "#320033", "#FF6832", "#66E1D3", "#CFCDAC", "#D0AC94", "#7ED379", "#012C58",
|
|
||||||
"#7A7BFF", "#D68E01", "#353339", "#78AFA1", "#FEB2C6", "#75797C", "#837393", "#943A4D",
|
|
||||||
"#B5F4FF", "#D2DCD5", "#9556BD", "#6A714A", "#001325", "#02525F", "#0AA3F7", "#E98176",
|
|
||||||
"#DBD5DD", "#5EBCD1", "#3D4F44", "#7E6405", "#02684E", "#962B75", "#8D8546", "#9695C5",
|
|
||||||
"#E773CE", "#D86A78", "#3E89BE", "#CA834E", "#518A87", "#5B113C", "#55813B", "#E704C4",
|
|
||||||
"#00005F", "#A97399", "#4B8160", "#59738A", "#FF5DA7", "#F7C9BF", "#643127", "#513A01",
|
|
||||||
"#6B94AA", "#51A058", "#A45B02", "#1D1702", "#E20027", "#E7AB63", "#4C6001", "#9C6966",
|
|
||||||
"#64547B", "#97979E", "#006A66", "#391406", "#F4D749", "#0045D2", "#006C31", "#DDB6D0",
|
|
||||||
"#7C6571", "#9FB2A4", "#00D891", "#15A08A", "#BC65E9", "#FFFFFE", "#C6DC99", "#203B3C",
|
|
||||||
"#671190", "#6B3A64", "#F5E1FF", "#FFA0F2", "#CCAA35", "#374527", "#8BB400", "#797868",
|
|
||||||
"#C6005A", "#3B000A", "#C86240", "#29607C", "#402334", "#7D5A44", "#CCB87C", "#B88183",
|
|
||||||
"#AA5199", "#B5D6C3", "#A38469", "#9F94F0", "#A74571", "#B894A6", "#71BB8C", "#00B433",
|
|
||||||
"#789EC9", "#6D80BA", "#953F00", "#5EFF03", "#E4FFFC", "#1BE177", "#BCB1E5", "#76912F",
|
|
||||||
"#003109", "#0060CD", "#D20096", "#895563", "#29201D", "#5B3213", "#A76F42", "#89412E",
|
|
||||||
"#1A3A2A", "#494B5A", "#A88C85", "#F4ABAA", "#A3F3AB", "#00C6C8", "#EA8B66", "#958A9F",
|
|
||||||
"#BDC9D2", "#9FA064", "#BE4700", "#658188", "#83A485", "#453C23", "#47675D", "#3A3F00",
|
|
||||||
"#061203", "#DFFB71", "#868E7E", "#98D058", "#6C8F7D", "#D7BFC2", "#3C3E6E", "#D83D66",
|
|
||||||
"#2F5D9B", "#6C5E46", "#D25B88", "#5B656C", "#00B57F", "#545C46", "#866097", "#365D25",
|
|
||||||
"#252F99", "#00CCFF", "#674E60", "#FC009C", "#92896B"
|
|
||||||
];
|
|
||||||
|
|
||||||
var Colors2 = [
|
|
||||||
"#218C8D",
|
|
||||||
"#F97D81",
|
|
||||||
"#6CCECB",
|
"#6CCECB",
|
||||||
"#F9E559",
|
"#F9E559",
|
||||||
"#EF7126",
|
"#FFBAD2",
|
||||||
"#8EDC9D",
|
"#C8CFB4",
|
||||||
"#E04836",
|
"#C8CFB4",
|
||||||
"#F39D41",
|
"#C8CFB4",
|
||||||
"#8D5924",
|
"#C8CFB4",
|
||||||
"#5696BC",
|
"#C8CFB4"
|
||||||
"#2F5168",
|
|
||||||
"#82AFF9",
|
|
||||||
"#9881F5",
|
|
||||||
"#F9D08B",
|
|
||||||
"#29264E",
|
|
||||||
"#72CBDB",
|
|
||||||
"#55134E",
|
|
||||||
"#A0596B",
|
|
||||||
"#FEC343",
|
|
||||||
"#EF7351",
|
|
||||||
"#473E3F",
|
|
||||||
"#000"
|
|
||||||
];
|
];
|
||||||
function randomColor() {
|
|
||||||
return Colors[Math.floor(Math.random()*Colors.length)];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Source: http://stackoverflow.com/a/7616484
|
|
||||||
function colorFor(token) {
|
|
||||||
var hash = 0, i, chr, len;
|
|
||||||
if (token.length == 0) return hash;
|
|
||||||
for (i = 0, len = token.length; i < len; i++) {
|
|
||||||
chr = token.charCodeAt(i);
|
|
||||||
hash = ((hash << 5) - hash) + chr;
|
|
||||||
hash |= 0; // Convert to 32bit integer
|
|
||||||
}
|
|
||||||
|
|
||||||
return Colors[Math.abs(hash) % Colors.length];
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -157,7 +157,7 @@ var BarChart = React.createClass({
|
||||||
<Bar key={'bar-'+ i}
|
<Bar key={'bar-'+ i}
|
||||||
item={point.item}
|
item={point.item}
|
||||||
value={val}
|
value={val}
|
||||||
color={Colors2[i]}
|
color={Colors[i]}
|
||||||
x={x}
|
x={x}
|
||||||
y={y}
|
y={y}
|
||||||
offset={offset}
|
offset={offset}
|
||||||
|
|
|
||||||
|
|
@ -161,13 +161,13 @@ var StackedAreaChart = React.createClass({
|
||||||
var areas = _.map(paths, function(pair, i) {
|
var areas = _.map(paths, function(pair, i) {
|
||||||
var item = pair[0], path = pair[1];
|
var item = pair[0], path = pair[1];
|
||||||
if (item !== null) {
|
if (item !== null) {
|
||||||
colors[item] = Colors2[i];
|
colors[item] = Colors[i];
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<StackedArea key={'area-'+ i}
|
<StackedArea key={'area-'+ i}
|
||||||
item={item}
|
item={item}
|
||||||
d={roundPathCorners(this.buildPathD(path), 5)}
|
d={roundPathCorners(this.buildPathD(path), 3)}
|
||||||
color={Colors2[i]} />
|
color={Colors[i]} />
|
||||||
);
|
);
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue