Skip to content
Merged
Changes from 1 commit
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
5c04f05
Changes ScoreBar background color to Cyea-300 and text color to Neutr…
RyanMullins Nov 10, 2021
3a417ee
Fixes naming inconsistency in Minor Tonal Palettes implementation
RyanMullins Nov 10, 2021
005111b
Adds default colors, palettes, and ramps to lib/colors for data visua…
RyanMullins Nov 11, 2021
767abc0
Adds unit tests for LIT colors library
RyanMullins Nov 11, 2021
228737e
Add option in notebook mode to display LIT UI in new tab.
jameswex Nov 11, 2021
902efaa
Custom notebook-focused layout with a single row and several tabs.
iftenney Nov 11, 2021
54d47e5
Updates hairline button styles to the brand colors
RyanMullins Nov 11, 2021
19f635e
Pass target classes as string for IG, rather than indices.
iftenney Nov 11, 2021
f813107
Perform PCA using numpy instead of sklearn.
jameswex Nov 11, 2021
e7521ac
Internal change
a-googler Nov 12, 2021
7527293
Updates Colors, ColorService, ClassificationService, and RegressionSe…
RyanMullins Nov 12, 2021
9dfe8ad
Derives union types for color values from "as const" arrays
RyanMullins Nov 15, 2021
ad8fbee
Fix broken link on website.
jameswex Nov 15, 2021
90deae4
Internal change
jameswex Nov 15, 2021
b52a4ce
Dockerfile optimizations and support for run-time arguments
RyanMullins Nov 17, 2021
1f5bf2c
All public demos now export a LitApp instance from main() and provide a
RyanMullins Nov 18, 2021
b9028d8
Bug fixes in Scalars module
RyanMullins Nov 18, 2021
a03db30
Internal change
a-googler Nov 18, 2021
2c55faf
Use image thumbnails in embedding projector when using image data.
jameswex Nov 18, 2021
7b2a016
Fixed threshold line y values in Scalars module
RyanMullins Nov 18, 2021
145e9f6
Aligning Table (hover + selected) and Scalars (hover) colors with LIT…
RyanMullins Nov 18, 2021
b43b4fa
Select fields to operate on for generator module.
a-googler Nov 23, 2021
76f2fd0
TCAV score bar now conveys magnitude relative to the baseline + align…
RyanMullins Nov 24, 2021
3171d55
Unifies icon-button styles in shared styles and aligns with the brand…
RyanMullins Nov 24, 2021
f5342be
Adjust select.dropdown classes to align with LIT hairline styles
RyanMullins Nov 29, 2021
de65c87
Allow passing of LIT UI URL params to notebook widget.render method.
jameswex Nov 30, 2021
4c4d393
Styles the threshold slider according to the LIT brand palettes
RyanMullins Nov 30, 2021
61c266f
Fix notebook render issue. Do not encode unspecified params in the URL.
jameswex Dec 1, 2021
096d540
This lays the interface and API foundation for user-defined faceting …
RyanMullins Dec 1, 2021
5951e73
Add generic serialize and deserialize methods to lit.Dataset.
tolga-b Dec 2, 2021
7eac05d
Add a clustering component to the LIT.
eberts-google Dec 2, 2021
16318bb
Adjusting fill and stroke styles for line and bar charts
RyanMullins Dec 2, 2021
ea35519
Internal change
a-googler Dec 3, 2021
5208b36
Fixes a labeling bug in the Data Matrix when hiding empty labels.
RyanMullins Dec 3, 2021
4f85565
Data table property to configure vertical text alignment in cells
RyanMullins Dec 6, 2021
3dc0bea
Sets the ScatterGL fog threshold to 4 to improve visbility of embeddings
RyanMullins Dec 10, 2021
bc2a161
Add tests to run OSS demo models
jameswex Dec 10, 2021
72c0ec8
Fixes button style and layout inconsistencies in settings pane
RyanMullins Dec 10, 2021
34dcfe3
Switches salience color maps to use linear ramps through the LAB colo…
RyanMullins Dec 14, 2021
7208bd5
Enable LIME for SparseMultilabelPreds model outputs
jameswex Dec 14, 2021
65fb2cd
Use explicit `any` type for untyped catch variables.
a-googler Dec 20, 2021
bcaf4c3
Content updates for the v0.4.1 release
RyanMullins Dec 20, 2021
833f11d
Update scatter-gl version for OSS
jameswex Dec 20, 2021
f347fad
Add thread lock to glue model tokenizer call and update demos version.
jameswex Dec 20, 2021
995d5a9
Updating publlic website for v0.4.1 release
RyanMullins Dec 20, 2021
30eb119
fixing a bug in the partials template
RyanMullins Dec 20, 2021
9fd2da3
Merge pull request #598 from PAIR-code:website-0_4_1
a-googler Dec 20, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Adds default colors, palettes, and ramps to lib/colors for data visua…
…lization

PiperOrigin-RevId: 409121464
  • Loading branch information
RyanMullins authored and LIT team committed Nov 11, 2021
commit 005111b8bef628b38a8c1bb5da9ed45251de5279
85 changes: 82 additions & 3 deletions lit_nlp/client/lib/colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@
* style names.
*/

import * as d3 from 'd3';

interface ColorEntry {
color: string;
textColor: string;
Expand All @@ -44,9 +46,7 @@ const FULL_COLOR_VALUES: ColorValue[] = [

const MINOR_COLOR_VALUES: MinorColorValue[] = [ '1', '2', '3', '4', '5' ];

const ERROR_COLOR_VALUES: ColorValue[] = [
'50', '500', '600', '700'
];
const ERROR_COLOR_VALUES: ColorValue[] = [ '50', '500', '600', '700' ];

const VIZ_COLOR_VALUES: VizColorKey[] = [
'orange', 'blue', 'yellow', 'purple', 'coral', 'teal', 'magenta', 'other'
Expand All @@ -72,6 +72,14 @@ function at (palette:ColorEntry[], index:number): ColorEntry {
return palette[index];
}

/**
* Creates a D3-compatible color ramp function from a list of hex color values
* using D3's interpolateRgbBasis() function.
*/
function ramp (range:string[]): (t:number) => string {
return d3.interpolateRgbBasis(range);
}

/**
* LIT Brand colors by palette with text color
*/
Expand Down Expand Up @@ -335,3 +343,74 @@ export function getVizColor (version: VizPaletteKey,
return at(palette, index);
}
}

/**
* Standard Colors and Palettes for LIT
*
* See https://www.figma.com/file/N5eAa1XWXDEmL4GWN1DGkr/%5B%F0%9F%94%A5LIT%5D-Design-Spec?node-id=866%3A9294
*/

/** Default normal color for valid values (Brand Cyea-400) */
export const DEFAULT: string = BRAND_COLORS.cyea[4].color;

/** Default other color for invalid values (VizColor Grey-Deep) */
export const OTHER: string = VIZ_COLORS.deep[VIZ_COLORS.deep.length - 1].color;

/** Default other color for invalid values (Brand Neutral-500) */
export const HOVER: string = BRAND_COLORS.mage[4].color;

/** Default other color for invalid values (Brand Neutral-500) */
export const LOADING: string = BRAND_COLORS.neutral[5].color;

/** Categorical Colors -- Orange, Blue, Yellow, Purple, Coral, Teal, Magenta */
export const CATEGORICAL_NORMAL: string[] =
VIZ_COLORS.deep.slice(0,-1).map(ce => ce.color);

/** Sequetial: Discrete, Cyea, 3 classes (Cyea-200/400/600) */
export const CYEA_DISCRETE: string[] = [
BRAND_COLORS.cyea[2].color,
BRAND_COLORS.cyea[4].color,
BRAND_COLORS.cyea[6].color
];

/** Sequetial: Continuous, Cyea */
export const CYEA_CONTINUOUS =
ramp(BRAND_COLORS.cyea.slice(2,7).map(ce => ce.color));

/** Sequetial: Discrete, Mage, 3 classes (Mage-200/400/600) */
export const MAGE_DISCRETE: string[] = [
BRAND_COLORS.mage[2].color,
BRAND_COLORS.mage[4].color,
BRAND_COLORS.mage[6].color
];

/** Sequetial: Continuous, Mage */
export const MAGE_CONTINUOUS =
ramp(BRAND_COLORS.mage.slice(2,7).map(ce => ce.color));

/** Diverging: 4 classes (Bric-500/300/Cyea-300/500) */
export const DIVERGING_4: string[] = [
BRAND_COLORS.bric[5].color,
BRAND_COLORS.bric[3].color,
BRAND_COLORS.cyea[3].color,
BRAND_COLORS.cyea[5].color
];

/** Diverging: 5 classes (Bric-500/300/Neutral-200/Cyea-300/500) */
export const DIVERGING_5: string[] = [
BRAND_COLORS.bric[5].color,
BRAND_COLORS.bric[3].color,
BRAND_COLORS.neutral[2].color,
BRAND_COLORS.cyea[3].color,
BRAND_COLORS.cyea[5].color
];

/** Diverging: 6 classes (Bric-500/300/100/Cyea-100/300/500) */
export const DIVERGING_6: string[] = [
BRAND_COLORS.bric[5].color,
BRAND_COLORS.bric[3].color,
BRAND_COLORS.bric[1].color,
BRAND_COLORS.cyea[1].color,
BRAND_COLORS.cyea[3].color,
BRAND_COLORS.cyea[5].color
];