How to use the d3-scale-chromatic.interpolatePuBuGn function in d3-scale-chromatic

To help you get started, we’ve selected a few d3-scale-chromatic 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 / types / d3-scale-chromatic / d3-scale-chromatic-tests.ts View on Github external
// -----------------------------------------------------------------------
let Blue: string = d3ScaleChromatic.interpolateBlues(1); // rgb(8, 48, 107)
let Green: string = d3ScaleChromatic.interpolateGreens(1); // rgb(0, 68, 27)
let Grey: string = d3ScaleChromatic.interpolateGreys(1); // rgb(0, 0, 0)
let Orange: string = d3ScaleChromatic.interpolateOranges(1); // rgb(127, 39, 4)
let Purple: string = d3ScaleChromatic.interpolatePurples(1); // rgb(63, 0, 125)
let Red: string = d3ScaleChromatic.interpolateReds(1); // rgb(103, 0, 13)

// -----------------------------------------------------------------------
// Sequential(Multi-Hue)
// -----------------------------------------------------------------------
let BuGn: string = d3ScaleChromatic.interpolateBuGn(1); // rgb(0, 68, 27)
let BuPu: string = d3ScaleChromatic.interpolateBuPu(1); // rgb(77, 0, 75)
let GnBu: string = d3ScaleChromatic.interpolateGnBu(1); // rgb(8, 64, 129)
let OrRd: string = d3ScaleChromatic.interpolateOrRd(1); // rgb(127, 0, 0)
let PuBuGn: string = d3ScaleChromatic.interpolatePuBuGn(1); // rgb(1, 70, 54)
let PuBu: string = d3ScaleChromatic.interpolatePuBu(1); // rgb(2, 56, 88)
let PuRd: string = d3ScaleChromatic.interpolatePuRd(1); // rgb(103, 0, 31)
let RdPu: string = d3ScaleChromatic.interpolateRdPu(1); // rgb(73, 0, 106)
let YlGnBu: string = d3ScaleChromatic.interpolateYlGnBu(1); // rgb(8, 29, 88)
let YlGn: string = d3ScaleChromatic.interpolateYlGn(1); // rgb(0, 69, 41)
let YlOrBr: string = d3ScaleChromatic.interpolateYlOrBr(1); // rgb(102, 37, 6)
let YlOrRd: string = d3ScaleChromatic.interpolateYlOrRd(1); // rgb(128, 0, 38)
github conveyal / analysis-ui / lib / modules / opportunity-datasets / components / choropleth.js View on Github external
//
import {classifiers, colorizers} from '@conveyal/gridualizer'
import {connect} from 'react-redux'
import {interpolatePuBuGn as getColor} from 'd3-scale-chromatic'

import Gridualizer from '../../../components/map/gridualizer'
import * as select from '../selectors'

const NUM_COLORS = 5
const OPACITY = 0.42
const COLORS = ['rgba(0, 0, 0, 0)']
for (let i = 0; i < NUM_COLORS; i++) {
  const rgb = getColor(i / (NUM_COLORS - 1))
  COLORS.push(`rgba(${rgb.slice(4, -1)}, ${OPACITY})`)
}

function mapStateToProps(state, ownProps) {
  const grid = select.activeOpportunityDatasetGrid(state, ownProps)
  if (!grid) return {}

  const classify = classifiers.ckmeans({})
  const breaks = classify(grid, COLORS.length - 1)

  return {
    colorizer: colorizers.choropleth([1, ...breaks], COLORS),
    grid
  }
}