How to use d3-color - 10 common examples

To help you get started, we’ve selected a few d3-color examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github DefinitelyTyped / DefinitelyTyped / d3-color / d3-color-tests.ts View on Github external
cRGB = d3Color.rgb('steelblue');
cRGB = d3Color.rgb('rgba(20, 100, 200, 0.5)');
cRGB = d3Color.rgb(c);
cRGB = cRGB.brighter();
cRGB = cRGB.brighter(0.2);
cRGB = cRGB.darker();
cRGB = cRGB.darker(0.2);
cRGB = cRGB.rgb();
displayable = cRGB.displayable();
cString = cRGB.toString();
console.log('Channels = (r : %d, g: %d, b: %d)', cRGB.r, cRGB.g, cRGB.b);
console.log('Opacity = %d', cRGB.opacity);

cHSL = d3Color.hsl(60, 1, 0.2);
cHSL = d3Color.hsl(60, 1, 0.2, 0.5);
cHSL = d3Color.hsl('steelblue');
cHSL = d3Color.hsl('rgba(20, 100, 200, 0.5)');
cHSL = d3Color.hsl(c);
cHSL = cHSL.brighter();
cHSL = cHSL.brighter(0.2);
cHSL = cHSL.darker();
cHSL = cHSL.darker(0.2);
cRGB = cHSL.rgb();
displayable = cHSL.displayable();
cString = cHSL.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cHSL.h, cHSL.s, cHSL.l);
console.log('Opacity = %d', cHSL.opacity);

// Signature tests for Lab

let cLab: d3Color.LabColor;
github DefinitelyTyped / DefinitelyTyped / d3-color / d3-color-tests.ts View on Github external
cRGB = d3Color.rgb(20, 100, 200, 0.5);
cRGB = d3Color.rgb('steelblue');
cRGB = d3Color.rgb('rgba(20, 100, 200, 0.5)');
cRGB = d3Color.rgb(c);
cRGB = cRGB.brighter();
cRGB = cRGB.brighter(0.2);
cRGB = cRGB.darker();
cRGB = cRGB.darker(0.2);
cRGB = cRGB.rgb();
displayable = cRGB.displayable();
cString = cRGB.toString();
console.log('Channels = (r : %d, g: %d, b: %d)', cRGB.r, cRGB.g, cRGB.b);
console.log('Opacity = %d', cRGB.opacity);

cHSL = d3Color.hsl(60, 1, 0.2);
cHSL = d3Color.hsl(60, 1, 0.2, 0.5);
cHSL = d3Color.hsl('steelblue');
cHSL = d3Color.hsl('rgba(20, 100, 200, 0.5)');
cHSL = d3Color.hsl(c);
cHSL = cHSL.brighter();
cHSL = cHSL.brighter(0.2);
cHSL = cHSL.darker();
cHSL = cHSL.darker(0.2);
cRGB = cHSL.rgb();
displayable = cHSL.displayable();
cString = cHSL.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cHSL.h, cHSL.s, cHSL.l);
console.log('Opacity = %d', cHSL.opacity);

// Signature tests for Lab

let cLab: d3Color.LabColor;
github DefinitelyTyped / DefinitelyTyped / d3-color / d3-color-tests.ts View on Github external
cRGB = cLab.rgb();
displayable = cLab.displayable();
cString = cLab.toString();
console.log('Channels = (l : %d, a: %d, b: %d)', cLab.l, cLab.a, cLab.b);
console.log('Opacity = %d', cLab.opacity);


// Signature tests for HCL

let cHcl: d3Color.HCLColor;

cHcl = d3Color.hcl(120, 40, 50);
cHcl = d3Color.hcl(120, 40, 50, 0.5);
cHcl = d3Color.hcl('steelblue');
cHcl = d3Color.hcl('rgba(20, 100, 200, 0.5)');
cHcl = d3Color.hcl(c);
cHcl = cHcl.brighter();
cHcl = cHcl.brighter(0.2);
cHcl = cHcl.darker();
cHcl = cHcl.darker(0.2);
cRGB = cHcl.rgb();
displayable = cHcl.displayable();
cString = cHcl.toString();
console.log('Channels = (h : %d, c: %d, l: %d)', cHcl.h, cHcl.c, cHcl.l);
console.log('Opacity = %d', cHcl.opacity);

// Signature tests for Cubehelix

let cCubehelix: d3Color.CubehelixColor;

cCubehelix = d3Color.cubehelix(20, 100, 200);
cCubehelix = d3Color.cubehelix(20, 100, 200, 0.5);
github DefinitelyTyped / DefinitelyTyped / d3-color / d3-color-tests.ts View on Github external
cHSL = d3Color.hsl(c);
cHSL = cHSL.brighter();
cHSL = cHSL.brighter(0.2);
cHSL = cHSL.darker();
cHSL = cHSL.darker(0.2);
cRGB = cHSL.rgb();
displayable = cHSL.displayable();
cString = cHSL.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cHSL.h, cHSL.s, cHSL.l);
console.log('Opacity = %d', cHSL.opacity);

// Signature tests for Lab

let cLab: d3Color.LabColor;

cLab = d3Color.lab(120, 40, 50);
cLab = d3Color.lab(120, 40, 50, 0.5);
cLab = d3Color.lab('steelblue');
cLab = d3Color.lab('rgba(20, 100, 200, 0.5)');
cLab = d3Color.lab(c);
cLab = cLab.brighter();
cLab = cLab.brighter(0.2);
cLab = cLab.darker();
cLab = cLab.darker(0.2);
cRGB = cLab.rgb();
displayable = cLab.displayable();
cString = cLab.toString();
console.log('Channels = (l : %d, a: %d, b: %d)', cLab.l, cLab.a, cLab.b);
console.log('Opacity = %d', cLab.opacity);


// Signature tests for HCL
github DefinitelyTyped / DefinitelyTyped / d3-color / d3-color-tests.ts View on Github external
cHSL = cHSL.brighter(0.2);
cHSL = cHSL.darker();
cHSL = cHSL.darker(0.2);
cRGB = cHSL.rgb();
displayable = cHSL.displayable();
cString = cHSL.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cHSL.h, cHSL.s, cHSL.l);
console.log('Opacity = %d', cHSL.opacity);

// Signature tests for Lab

let cLab: d3Color.LabColor;

cLab = d3Color.lab(120, 40, 50);
cLab = d3Color.lab(120, 40, 50, 0.5);
cLab = d3Color.lab('steelblue');
cLab = d3Color.lab('rgba(20, 100, 200, 0.5)');
cLab = d3Color.lab(c);
cLab = cLab.brighter();
cLab = cLab.brighter(0.2);
cLab = cLab.darker();
cLab = cLab.darker(0.2);
cRGB = cLab.rgb();
displayable = cLab.displayable();
cString = cLab.toString();
console.log('Channels = (l : %d, a: %d, b: %d)', cLab.l, cLab.a, cLab.b);
console.log('Opacity = %d', cLab.opacity);


// Signature tests for HCL

let cHcl: d3Color.HCLColor;
github DefinitelyTyped / DefinitelyTyped / d3-color / d3-color-tests.ts View on Github external
cHSL = cHSL.darker();
cHSL = cHSL.darker(0.2);
cRGB = cHSL.rgb();
displayable = cHSL.displayable();
cString = cHSL.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cHSL.h, cHSL.s, cHSL.l);
console.log('Opacity = %d', cHSL.opacity);

// Signature tests for Lab

let cLab: d3Color.LabColor;

cLab = d3Color.lab(120, 40, 50);
cLab = d3Color.lab(120, 40, 50, 0.5);
cLab = d3Color.lab('steelblue');
cLab = d3Color.lab('rgba(20, 100, 200, 0.5)');
cLab = d3Color.lab(c);
cLab = cLab.brighter();
cLab = cLab.brighter(0.2);
cLab = cLab.darker();
cLab = cLab.darker(0.2);
cRGB = cLab.rgb();
displayable = cLab.displayable();
cString = cLab.toString();
console.log('Channels = (l : %d, a: %d, b: %d)', cLab.l, cLab.a, cLab.b);
console.log('Opacity = %d', cLab.opacity);


// Signature tests for HCL

let cHcl: d3Color.HCLColor;
github DefinitelyTyped / DefinitelyTyped / d3-color / d3-color-tests.ts View on Github external
cHcl = cHcl.brighter(0.2);
cHcl = cHcl.darker();
cHcl = cHcl.darker(0.2);
cRGB = cHcl.rgb();
displayable = cHcl.displayable();
cString = cHcl.toString();
console.log('Channels = (h : %d, c: %d, l: %d)', cHcl.h, cHcl.c, cHcl.l);
console.log('Opacity = %d', cHcl.opacity);

// Signature tests for Cubehelix

let cCubehelix: d3Color.CubehelixColor;

cCubehelix = d3Color.cubehelix(20, 100, 200);
cCubehelix = d3Color.cubehelix(20, 100, 200, 0.5);
cCubehelix = d3Color.cubehelix('steelblue');
cCubehelix = d3Color.cubehelix('rgba(20, 100, 200, 0.5)');
cCubehelix = d3Color.cubehelix(c);
cCubehelix = cCubehelix.brighter();
cCubehelix = cCubehelix.brighter(0.2);
cCubehelix = cCubehelix.darker();
cCubehelix = cCubehelix.darker(0.2);
cRGB = cCubehelix.rgb();
displayable = cCubehelix.displayable();
cString = cCubehelix.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cCubehelix.h, cCubehelix.s, cCubehelix.l);
console.log('Opacity = %d', cCubehelix.opacity);
github DefinitelyTyped / DefinitelyTyped / d3-color / d3-color-tests.ts View on Github external
cHcl = cHcl.darker();
cHcl = cHcl.darker(0.2);
cRGB = cHcl.rgb();
displayable = cHcl.displayable();
cString = cHcl.toString();
console.log('Channels = (h : %d, c: %d, l: %d)', cHcl.h, cHcl.c, cHcl.l);
console.log('Opacity = %d', cHcl.opacity);

// Signature tests for Cubehelix

let cCubehelix: d3Color.CubehelixColor;

cCubehelix = d3Color.cubehelix(20, 100, 200);
cCubehelix = d3Color.cubehelix(20, 100, 200, 0.5);
cCubehelix = d3Color.cubehelix('steelblue');
cCubehelix = d3Color.cubehelix('rgba(20, 100, 200, 0.5)');
cCubehelix = d3Color.cubehelix(c);
cCubehelix = cCubehelix.brighter();
cCubehelix = cCubehelix.brighter(0.2);
cCubehelix = cCubehelix.darker();
cCubehelix = cCubehelix.darker(0.2);
cRGB = cCubehelix.rgb();
displayable = cCubehelix.displayable();
cString = cCubehelix.toString();
console.log('Channels = (h : %d, s: %d, l: %d)', cCubehelix.h, cCubehelix.s, cCubehelix.l);
console.log('Opacity = %d', cCubehelix.opacity);
github DefinitelyTyped / DefinitelyTyped / d3-interpolate / d3-interpolate-tests.ts View on Github external
iString = d3Interpolate.interpolateRgb.gamma(2.2)('purple', 'orange');

// test interpolateRgbBasis(color) and  interpolateRgbBasisClosed(color) signatures -------------------------

iString = d3Interpolate.interpolateRgbBasis(['seagreen', d3Color.rgb('steelblue'), 'rgb(100, 100, 100)']);
iString = d3Interpolate.interpolateRgbBasis(['seagreen', d3Hsv.hsv('steelblue'), 'rgb(100, 100, 100)']);
iString = d3Interpolate.interpolateRgbBasisClosed(['seagreen', d3Hsv.hsv('steelblue'), 'rgb(100, 100, 100)']);

// test interpolateHsl(a, b) and interpolateHslLong(a, b)----------------------------------------------------------------

iString = d3Interpolate.interpolateHsl('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHsl(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateHsl(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));

iString = d3Interpolate.interpolateHslLong('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHslLong(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateHslLong(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));

// test interpolateLab(a, b) --------------------------------------------------------------------------------------------

iString = d3Interpolate.interpolateLab('seagreen', 'steelblue');
iString = d3Interpolate.interpolateLab(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateLab(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));

// test interpolateHcl(a, b) and interpolateHclLong(a, b) ----------------------------------------------------------------

iString = d3Interpolate.interpolateHcl('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHcl(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
iString = d3Interpolate.interpolateHcl(d3Color.rgb('seagreen'), d3Hsv.hsv('steelblue'));

iString = d3Interpolate.interpolateHclLong('seagreen', 'steelblue');
iString = d3Interpolate.interpolateHclLong(d3Color.rgb('seagreen'), d3Color.hcl('steelblue'));
github vega / vega / packages / vega-geo / src / Heatmap.js View on Github external
function color_(color, _) {
  let f;
  if (isFunction(color)) {
    f = obj => rgb(color(obj, _));
    f.dep = dependency(color);
  } else {
    // default to mid-grey
    f = constant(rgb(color || '#888'));
  }
  return f;
}

d3-color

Color spaces! RGB, HSL, Cubehelix, Lab and HCL (Lch).

ISC
Latest version published 2 years ago

Package Health Score

76 / 100
Full package analysis