Colors in D3 1 Basic color single color Hard code the color using a number of ways hex value color name rgba or rgb value 5839fa red rgba 100 200 0 0 5 rgb 255 0 255 2 Color scales Sequential Give 2 colors as a range Use scaleLinear var myColor d3 scaleLinear domain 1 10 range white blue var myColor d3 scaleSequential domain 1 10 interpolator d3 interpolatePuRd var myColor d3 scaleSequential domain 1 10 interpolator d3 interpolateViridis Categorical e g var colours d3 scaleOrdinal d3 schemeCategory10 or if you want to map the range to limits domain var colours d3 scaleOrdinal d3 schemeCategory10 domain foo bar baz foobar Color Schemes used by scale d3 schemeCategory10 array of ten categorical colors which is returned as RGB hexadecimal strings d3 schemeAccent array of eight categorical colors which is returned as RGB hexadecimal strings 37 schemes schemeAccent schemeBlues schemeBrBG schemeBuGn schemeBuPu schemeCategory10 schemeDark2 schemeGnBu schemeGreens schemeGreys schemeOrRd schemeOranges schemePRGn schemePaired schemePastel1 schemePastel2 schemePiYG schemePuBu schemePuBuGn schemePuOr schemePuRd schemePurples schemeRdBu schemeRdGy schemeRdPu schemeRdYlBu schemeRdYlGn schemeReds schemeSet1 schemeSet2 schemeSet3 schemeSpectral schemeTableau10 schemeYlGn schemeYlGnBu schemeYlOrBr schemeYlOrRd Interpolation which return a string of RGB color from a double 0 to 1 d3 interpolateRainbow t t 0 0 to 1 0 d3 interpolateBlues d3 interpolateGreens 38 types interpolateBlues interpolateBrBG interpolateBuGn interpolateBuPu interpolateCividis interpolateCool interpolateCubehelixDefault interpolateGnBu interpolateGreens interpolateGreys interpolateInferno interpolateMagma interpolateOrRd interpolateOranges interpolatePRGn interpolatePiYG interpolatePlasma interpolatePuBu interpolatePuBuGn interpolatePuOr interpolatePuRd interpolatePurples interpolateRainbow interpolateRdBu interpolateRdGy interpolateRdPu interpolateRdYlBu interpolateRdYlGn interpolateReds interpolateSinebow interpolateSpectral interpolateTurbo interpolateViridis interpolateWarm interpolateYlGn interpolateYlGnBu interpolateYlOrBr interpolateYlOrRd D3 modular color demo Color categorical schemes window frameElement style height 500px let container document createElement div container className container document body appendChild container let categoricalButtons document createElement div categoricalButtons className categoricalButtons document body appendChild categoricalButtons const d3 await Promise all import https unpkg com d3 array module import https unpkg com d3 axis module import https unpkg com d3 brush module import https unpkg com d3 chord module import https unpkg com d3 color module import https unpkg com d3 contour module import https unpkg com d3 delaunay module import https unpkg com d3 dispatch module import https unpkg com d3 drag module import https unpkg com d3 dsv module import https unpkg com d3 ease module import https unpkg com d3 fetch module import https unpkg com d3 force module import https unpkg com d3 format module import https unpkg com d3 geo module import https unpkg com d3 hierarchy module import https unpkg com d3 interpolate module import https unpkg com d3 path module import https unpkg com d3 polygon module import https unpkg com d3 quadtree module import https unpkg com d3 random module import https unpkg com d3 scale module import https unpkg com d3 scale chromatic module import https unpkg com d3 selection module import https unpkg com d3 shape module import https unpkg com d3 time module import https unpkg com d3 time format module import https unpkg com d3 timer module import https unpkg com d3 transition module import https unpkg com d3 zoom module then d3 Object assign d3 var categorical name schemeAccent n 8 name schemeDark2 n 8 name schemePastel2 n 8 name schemeSet2 n 8 name schemeSet1 n 9 name schemePastel1 n 9 name schemeCategory10 n 10 name schemeSet3 n 12 name schemePaired n 12 name schemeCategory20 n 20 not supported with v5 name schemeCategory20b n 20 see https github com d3 d3 blob main CHANGES md name schemeCategory20c n 20 Instead of hardcoding them let s grab them all from the module var categorical import as d3scalechromatic from https unpkg com d3 scale chromatic module for let i 0 i Object keys d3scalechromatic length i let colName new String Object keys d3scalechromatic i if colName includes scheme continue let numColors Object keys d3 colName length console log name colName num colors numColors categorical push name colName n numColors console log number color schemes categorical length console log range d3 schemeAccent range let test d3 categorical 0 name d3 scaleOrdinal categorical 0 name console log domain Object keys test var width 700 var height 300 var svg d3 select body append svg attr width width attr height height append g var colorScale d3 scaleOrdinal d3 categorical 0 name var n categorical 0 n var unit width n var bars svg selectAll bars data d3 range n function d return d enter append rect attr class bars attr x function d i return i unit attr y 0 attr height height attr width unit style fill function d i return colorScale d var sequentialButtons d3 select categoricalButtons selectAll button data categorical enter append button text function d return d name on click function i buttonValue console log name buttonValue name n buttonValue n var colorScale d3 scaleOrdinal d3 buttonValue name var bars svg selectAll bars data d3 range buttonValue n function d return d bars exit remove bars transition attr x function d i return i width buttonValue n attr width width buttonValue n style fill function d i return colorScale i bars enter append rect attr class bars attr y 0 attr height height attr x function d i return i width buttonValue n attr width width buttonValue n style fill function d i return colorScale i console log ready Do some word coloring shows the modular nature of D3 just use the color scale part window frameElement style height 150px import as d3 from https unpkg com d3 scale module scaleLinear scaleTime scaleOrdinal let col d3 scaleOrdinal 383867 584c77 33431e a36629 92462f b63e36 b74a70 946943 const data The wise old fox can learn more from the young fool than the young fool could ever learn from the wise old fox split let div document createElement div document body appendChild div for let i 0 i data length i let word data i let str span style background col word padding 5px line height 2 0 font size 150 word span div innerHTML str console log ready Color interpolations window frameElement style height 500px let container document createElement div container className container document body appendChild container let categoricalButtons document createElement div categoricalButtons className sequentialButtons document body appendChild categoricalButtons const d3 await Promise all import https unpkg com d3 array module import https unpkg com d3 axis module import https unpkg com d3 brush module import https unpkg com d3 chord module import https unpkg com d3 color module import https unpkg com d3 contour module import https unpkg com d3 delaunay module import https unpkg com d3 dispatch module import https unpkg com d3 drag module import https unpkg com d3 dsv module import https unpkg com d3 ease module import https unpkg com d3 fetch module import https unpkg com d3 force module import https unpkg com d3 format module import https unpkg com d3 geo module import https unpkg com d3 hierarchy module import https unpkg com d3 interpolate module import https unpkg com d3 path module import https unpkg com d3 polygon module import https unpkg com d3 quadtree module import https unpkg com d3 random module import https unpkg com d3 scale module import https unpkg com d3 scale chromatic module import https unpkg com d3 selection module import https unpkg com d3 shape module import https unpkg com d3 time module import https unpkg com d3 time format module import https unpkg com d3 timer module import https unpkg com d3 transition module import https unpkg com d3 zoom module then d3 Object assign d3 var interpolators These are from d3 scale Viridis Inferno Magma Plasma Warm Cool Rainbow CubehelixDefault These are from d3 scale chromatic Blues Greens Greys Oranges Purples Reds BuGn BuPu GnBu OrRd PuBuGn PuBu PuRd RdPu YlGnBu YlGn YlOrBr YlOrRd Instead of hardcoding them let s grab them all from the module var interpolators import as d3scalechromatic from https unpkg com d3 scale chromatic module for let i 0 i Object keys d3scalechromatic length i let colName new String Object keys d3scalechromatic i if colName includes interpolate continue interpolators push colName replace interpolate console log number interpolate color schemes interpolators length var width 800 var height 300 var svg d3 select body append svg attr width width attr height height append g var colorScale d3 scaleSequential d3 interpolateInferno domain 0 width var bars svg selectAll bars data d3 range width function d return d enter append rect attr class bars attr x function d i return i attr y 0 attr height height attr width 1 style fill function d i return colorScale d var sequentialButtons d3 select sequentialButtons selectAll button data interpolators enter append button text function d return d on click function g buttonValue var colorScale d3 scaleSequential d3 interpolate buttonValue domain 0 width svg selectAll bars transition style fill function d return colorScale d console log ready
ange n function d return d enter append rect attr class bars attr x function d i return i unit attr y 0 attr height height attr width unit style fill function d i return colorScale d var sequentialButtons d3 select categoricalButtons selectAll button data categorical enter append button text function d return d name on click function i buttonValue console log name buttonValue name n buttonValue n var colorScale d3 scaleOrdinal d3 buttonValue name var bars svg selectAll bars data d3 range buttonValue n function d return d bars exit remove bars transition attr x function d i return i width buttonValue n attr width width buttonValue n style fill function d i return colorScale i bars enter append rect attr class bars attr y 0 attr height height attr x function d i return i width buttonValue n attr width width buttonValue n style fill function d i return colorScale i console log ready Do some word coloring shows the modular nature of D3 just use the color scale part window frameElement style height 150px import as d3 from https unpkg com d3 scale module scaleLinear scaleTime scaleOrdinal let col d3 scaleOrdinal 383867 584c77 33431e a36629 92462f b63e36 b74a70 946943 const data The wise old fox can learn more from the young fool than the young fool could ever learn from the wise old fox split let div document createElement div document body appendChild div for let i 0 i data length i let word data i let str span style background col word padding 5px line height 2 0 font size 150 word span div innerHTML str console log ready Color interpolations window frameElement style height 500px let container document createElement div container className container document body appendChild container let categoricalButtons document createElement div categoricalButtons className sequentialButtons document body appendChild categoricalButtons const d3 await Promise all import https unpkg com d3 array module import https unpkg com d3 axis module import https unpkg com d3 brush module import https unpkg com d3 chord module import https unpkg com d3 color module import https unpkg com d3 contour module import https unpkg com d3 delaunay module import https unpkg com d3 dispatch module import https unpkg com d3 drag module import https unpkg com d3 dsv module import https unpkg com d3 ease module import https unpkg com d3 fetch module import https unpkg com d3 force module import https unpkg com d3 format module import https unpkg com d3 geo module import https unpkg com d3 hierarchy module import https unpkg com d3 interpolate module import https unpkg com d3 path module import https unpkg com d3 polygon module import https unpkg com d3 quadtree module import https unpkg com d3 random module import https unpkg com d3 scale module import https unpkg com d3 scale chromatic module import https unpkg com d3 selection module import https unpkg com d3 shape module import https unpkg com d3 time module import https unpkg com d3 time format module import https unpkg com d3 timer module import https unpkg com d3 transition module import https unpkg com d3 zoom module then d3 Object assign d3 var interpolators These are from d3 scale Viridis Inferno Magma Plasma Warm Cool Rainbow CubehelixDefault These are from d3 scale chromatic Blues Greens Greys Oranges Purples Reds BuGn BuPu GnBu OrRd PuBuGn PuBu PuRd RdPu YlGnBu YlGn YlOrBr YlOrRd Instead of hardcoding them let s grab them all from the module var interpolators import as d3scalechromatic from https unpkg com d3 scale chromatic module for let i 0 i Object keys d3scalechromatic length i let colName new String Object keys d3scalechromatic i if colName includes interpolate continue interpolators push colName replace interpolate console log number interpolate color schemes interpolators length var width 800 var height 300 var svg d3 select body append svg attr width width attr height height append g var colorScale d3 scaleSequential d3 interpolateInferno domain 0 width var bars svg selectAll bars data d3 range width function d return d enter append rect attr class bars attr x function d i return i attr y 0 attr height height attr width 1 style fill function d i return colorScale d var sequentialButtons d3 select sequentialButtons selectAll button data interpolators enter append button text function d return d on click function g buttonValue var colorScale d3 scaleSequential d3 interpolate buttonValue domain 0 width svg selectAll bars transition style fill function d return colorScale d console log ready