How to use the d3-scale-chromatic.interpolateRdBu 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 dark: string = d3ScaleChromatic.schemeDark2[0]; // #1b9e77
let paired: string = d3ScaleChromatic.schemePaired[0]; // #a6cee3
let pastel1: string = d3ScaleChromatic.schemePastel1[0]; // #fbb4ae
let pastel2: string = d3ScaleChromatic.schemePastel2[0]; // #b3e2cd
let set1: string = d3ScaleChromatic.schemeSet1[0]; // #e41a1c
let set2: string = d3ScaleChromatic.schemeSet2[0]; // #66c2a5
let set3: string = d3ScaleChromatic.schemeSet3[0]; // #8dd3c7

// -----------------------------------------------------------------------
// Diverging
// -----------------------------------------------------------------------
let BrBG: string = d3ScaleChromatic.interpolateBrBG(0); // rgb(84, 48, 5)
let PRGn: string = d3ScaleChromatic.interpolatePRGn(0); // rgb(64, 0, 75)
let PiYG: string = d3ScaleChromatic.interpolatePiYG(0); // rgb(142, 1, 82)
let PuOr: string = d3ScaleChromatic.interpolatePuOr(0); // rgb(127, 59, 8)
let RdBu: string = d3ScaleChromatic.interpolateRdBu(0); // rgb(103, 0, 31)
let RdGy: string = d3ScaleChromatic.interpolateRdGy(0); // rgb(103, 0, 31)
let RdYlBu: string = d3ScaleChromatic.interpolateRdYlBu(0); // rgb(103, 0, 31)
let RdYlGn: string = d3ScaleChromatic.interpolateRdYlGn(0); // rgb(103, 0, 31)
let Spectral: string = d3ScaleChromatic.interpolateSpectral(0); // rgb(158, 1, 66)

// -----------------------------------------------------------------------
// Sequential
// -----------------------------------------------------------------------
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)

// -----------------------------------------------------------------------
github Caleydo / lineage / src / mapView.ts View on Github external
.attr('stop-color',self.EPA_color[i])
               })
             }
             else if(attributeName === 'AirTempday'){
               const interval_range = self.mapManager.tableManager.getAQRange(attributeName)
               const begin_percent = 100-(yLineScale(interval_range[0])-startingHeight)/height*100
               const mid_percent = 100-(yLineScale(0)-startingHeight)/height*100
               const end_percent = 100 - (yLineScale(interval_range[1])-startingHeight)/height*100
               for(let i = 1;i<5;i++){
                 colorGradient.append('stop')
                              .attr('offset',(begin_percent+0.25*i*(mid_percent-begin_percent))+'%')
                              .attr('stop-color',interpolateRdBu(0.5+0.125*(4-i)))
               }
               colorGradient.append('stop')
                            .attr('offset',mid_percent+'%')
                            .attr('stop-color',interpolateRdBu(0.5))
              for(let i = 1;i<5;i++){
                colorGradient.append('stop')
                             .attr('offset',(mid_percent+0.25*i*(end_percent-mid_percent))+'%')
                             .attr('stop-color',interpolateRdBu(0.5-0.125*i))
              }
             }
             else{
               const interval_range = self.mapManager.tableManager.getAQRange(attributeName)
               const begin_percent = 100-(yLineScale(interval_range[0])-startingHeight)/height*100
               const end_percent = 100-(yLineScale(interval_range[1])-startingHeight)/height*100

               for (let i =0; i < 6; i++){
                 colorGradient.append('stop')
                              .attr('offset',(begin_percent+0.2*i*(end_percent-begin_percent))+'%')
                              .attr('stop-color',interpolateReds(0.2*i))
               }
github Caleydo / lineage / src / mapView.ts View on Github external
const data_levels = self.temporal_data_range[attributeName];
               data_levels.forEach((data_level,i)=>{
                 colorGradient.append('stop')
                              .attr('offset',(1-(yLineScale(data_level)-startingHeight)/height)*100+'%')
                              .attr('stop-color',self.EPA_color[i])
               })
             }
             else if(attributeName === 'AirTempday'){
               const interval_range = self.mapManager.tableManager.getAQRange(attributeName)
               const begin_percent = 100-(yLineScale(interval_range[0])-startingHeight)/height*100
               const mid_percent = 100-(yLineScale(0)-startingHeight)/height*100
               const end_percent = 100 - (yLineScale(interval_range[1])-startingHeight)/height*100
               for(let i = 1;i<5;i++){
                 colorGradient.append('stop')
                              .attr('offset',(begin_percent+0.25*i*(mid_percent-begin_percent))+'%')
                              .attr('stop-color',interpolateRdBu(0.5+0.125*(4-i)))
               }
               colorGradient.append('stop')
                            .attr('offset',mid_percent+'%')
                            .attr('stop-color',interpolateRdBu(0.5))
              for(let i = 1;i<5;i++){
                colorGradient.append('stop')
                             .attr('offset',(mid_percent+0.25*i*(end_percent-mid_percent))+'%')
                             .attr('stop-color',interpolateRdBu(0.5-0.125*i))
              }
             }
             else{
               const interval_range = self.mapManager.tableManager.getAQRange(attributeName)
               const begin_percent = 100-(yLineScale(interval_range[0])-startingHeight)/height*100
               const end_percent = 100-(yLineScale(interval_range[1])-startingHeight)/height*100

               for (let i =0; i < 6; i++){
github Caleydo / lineage / src / mapView.ts View on Github external
const interval_range = self.mapManager.tableManager.getAQRange(attributeName)
               const begin_percent = 100-(yLineScale(interval_range[0])-startingHeight)/height*100
               const mid_percent = 100-(yLineScale(0)-startingHeight)/height*100
               const end_percent = 100 - (yLineScale(interval_range[1])-startingHeight)/height*100
               for(let i = 1;i<5;i++){
                 colorGradient.append('stop')
                              .attr('offset',(begin_percent+0.25*i*(mid_percent-begin_percent))+'%')
                              .attr('stop-color',interpolateRdBu(0.5+0.125*(4-i)))
               }
               colorGradient.append('stop')
                            .attr('offset',mid_percent+'%')
                            .attr('stop-color',interpolateRdBu(0.5))
              for(let i = 1;i<5;i++){
                colorGradient.append('stop')
                             .attr('offset',(mid_percent+0.25*i*(end_percent-mid_percent))+'%')
                             .attr('stop-color',interpolateRdBu(0.5-0.125*i))
              }
             }
             else{
               const interval_range = self.mapManager.tableManager.getAQRange(attributeName)
               const begin_percent = 100-(yLineScale(interval_range[0])-startingHeight)/height*100
               const end_percent = 100-(yLineScale(interval_range[1])-startingHeight)/height*100

               for (let i =0; i < 6; i++){
                 colorGradient.append('stop')
                              .attr('offset',(begin_percent+0.2*i*(end_percent-begin_percent))+'%')
                              .attr('stop-color',interpolateReds(0.2*i))
               }

              }
             graph.select('#color_ramp_'+current_index).attr('fill','url(#linear_gradient_'+current_index+')')
      }