Commit 43dd2999 authored by Roberto Minelli's avatar Roberto Minelli
Browse files

Adding color palette for root nodes to keep consistent colors. @AronFiechter...

Adding color palette for root nodes to keep consistent colors. @AronFiechter please take a look if I used state and props consistently
parent 31b5d092
......@@ -37,12 +37,14 @@ class Voronoi extends React.Component {
diagram: null,
currentData: [],
scales: null,
colors: null,
};
// Bind this in methods
this.createDiagram = this.createDiagram.bind(this);
this.createPolygons = this.createPolygons.bind(this);
this.bindInspectKey = this.bindInspectKey.bind(this);
this.initializeColors = this.initializeColors.bind(this);
this.createSites = this.createSites.bind(this);
this.updateDiagram = this.updateDiagram.bind(this);
this.updatePolygons = this.updatePolygons.bind(this);
......@@ -93,6 +95,43 @@ class Voronoi extends React.Component {
});
}
/**
* Initializes colors of all nodes in the visualization
* by using the following color palette for root nodes:
* https://coolors.co/633772-a21d4d-e00327-078c74-f2a007-7d6a4a-434f6b-08348c
*
* When going down the hierarchy, it uses brightened variations of root colors.
**/
initializeColors() {
const { data: rootData } = this.props;
const rootColors = {
A: d3.hsl('#633772'),
C: d3.hsl('#a21d4d'),
D: d3.hsl('#078c74'),
E: d3.hsl('#e00327'),
J: d3.hsl('#08348c'),
K: d3.hsl('#7d6a4a'),
M: d3.hsl('#434f6b'),
P: d3.hsl('#f2a007'),
};
let colors = {};
rootData.nodes.forEach((node) => {
if (node.level == 0) return;
let fullNode = this.props.resultsById[node.name];
let nestingLevel = node.level;
let refCode = fullNode.refCode;
let archiveLevel = refCode.charAt(0);
let baseColor = rootColors[archiveLevel];
let nodeColor = nestingLevel <= 1 ? baseColor : baseColor.brighter(0.25 * nestingLevel);
colors[node.name] = nodeColor;
});
return colors;
}
/**
* Create the voronoi diagram based on props data.
*/
......@@ -129,11 +168,14 @@ class Voronoi extends React.Component {
strokeScale,
};
const colors = this.initializeColors();
this.setState(
{
diagram,
currentData,
scales,
colors,
},
() => {
this.createPolygons();
......@@ -437,15 +479,16 @@ class Voronoi extends React.Component {
* @returns {string}
*/
setPolygonColor(d) {
const { colors } = this.state;
if (!d.color) {
return;
}
const isInRange = this.isEntityInYearRange(d);
if (isInRange) {
const { red, green, blue } = d.color.rgb_components;
return `rgb(${red},${green},${blue})`;
return colors[d.name];
} else {
return 'rgba(0,0,0, 1)';
return '#F8F9FA';
}
}
......@@ -467,7 +510,7 @@ class Voronoi extends React.Component {
render() {
const { width, height } = this.props;
return (
<div className="pt-sm-5 pb-sm-5">
<div className='pt-sm-5 pb-sm-5'>
<Container>
<Row>
<Col xs={7}>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment