From f50693252344707c01bacad4631e6308397cba4d Mon Sep 17 00:00:00 2001 From: Trevor Bedford Date: Thu, 3 Jun 2021 17:23:41 -0700 Subject: [PATCH 1/2] Adjust grayscale color ramp The existing grayscale color ramp (used for values absent in an explicitly specified color scale) had values that were too dark and threw off the overall color balance. This commit narrows the grayscale color ramp to be more in line with pastel color ramp. --- src/util/colorScale.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/util/colorScale.js b/src/util/colorScale.js index 9ebff7ee4..611303ec2 100644 --- a/src/util/colorScale.js +++ b/src/util/colorScale.js @@ -130,7 +130,7 @@ export function createNonContinuousScaleFromProvidedScaleMap(colorBy, providedSc const extraVals = getExtraVals(t1nodes, t2nodes, colorBy, domain); if (extraVals.length) { // we must add these to the domain + provide a color value domain = domain.concat(extraVals); - const extraColors = createListOfColors(extraVals.length, [rgb(192, 192, 192), rgb(32, 32, 32)]); + const extraColors = createListOfColors(extraVals.length, [rgb(180, 180, 180), rgb(90, 90, 90)]); extraVals.forEach((val, idx) => { colorMap.set(val, extraColors[idx]); }); From bdceae67be3fe88e0cd2b55233dcf478947c8923 Mon Sep 17 00:00:00 2001 From: Trevor Bedford Date: Fri, 4 Jun 2021 15:20:16 -0700 Subject: [PATCH 2/2] Inject a bit of color into the "grayscale" color ramp This adds a bit of blue into the grayscale color ramp. Still reads as mostly gray, but no colors seem to exist more in the same universe as canonical auspice color ramp. --- src/components/frequencies/functions.js | 2 +- src/util/colorScale.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/frequencies/functions.js b/src/components/frequencies/functions.js index f7d1497d5..0ed9c1c43 100644 --- a/src/components/frequencies/functions.js +++ b/src/components/frequencies/functions.js @@ -203,7 +203,7 @@ export const removeStream = (svg) => { }; const generateColorScaleD3 = (categories, colorScale) => (d, i) => - categories[i] === unassigned_label ? "rgb(190, 190, 190)" : rgb(colorScale.scale(categories[i])).toString(); + categories[i] === unassigned_label ? "#ADB1B3" : rgb(colorScale.scale(categories[i])).toString(); function handleMouseOver() { select(this).attr("opacity", 1); diff --git a/src/util/colorScale.js b/src/util/colorScale.js index 611303ec2..697e1e378 100644 --- a/src/util/colorScale.js +++ b/src/util/colorScale.js @@ -11,7 +11,7 @@ import { setGenotype, orderOfGenotypeAppearance } from "./setGenotype"; import { getTraitFromNode } from "./treeMiscHelpers"; import { sortedDomain } from "./sortedDomain"; -export const unknownColor = "#AAAAAA"; +export const unknownColor = "#ADB1B3"; /** * calculate the color scale. @@ -130,7 +130,7 @@ export function createNonContinuousScaleFromProvidedScaleMap(colorBy, providedSc const extraVals = getExtraVals(t1nodes, t2nodes, colorBy, domain); if (extraVals.length) { // we must add these to the domain + provide a color value domain = domain.concat(extraVals); - const extraColors = createListOfColors(extraVals.length, [rgb(180, 180, 180), rgb(90, 90, 90)]); + const extraColors = createListOfColors(extraVals.length, ["#BDC3C6", "#868992"]); extraVals.forEach((val, idx) => { colorMap.set(val, extraColors[idx]); });