d3 / d3-scale-chromatic Goto Github PK
View Code? Open in Web Editor NEWSequential, diverging and categorical color scales.
Home Page: https://d3js.org/d3-scale-chromatic
License: Other
Sequential, diverging and categorical color scales.
Home Page: https://d3js.org/d3-scale-chromatic
License: Other
$ bower install d3-scale-chromatic
bower not-cached https://github.com/saeidzebardast/d3-scale-chromatic.git#^1.1.0
bower resolve https://github.com/saeidzebardast/d3-scale-chromatic.git#^1.1.0
bower not-cached https://github.com/saeidzebardast/d3-scale-chromatic.git#1.1.1
bower resolve https://github.com/saeidzebardast/d3-scale-chromatic.git#1.1.1
bower cached https://github.com/mbostock-bower/d3-bower.git#4.9.1
bower validate 4.9.1 against https://github.com/mbostock-bower/d3-bower.git#^4.7.4
bower ECMDERR Failed to execute "git ls-remote --tags --heads https://github.com/saeidzebardast/d3-scale-chromatic.git", exit code of #128 remote: Repository not found. fatal: repository 'https://github.com/saeidzebardast/d3-scale-chromatic.git/' not found
Additional error details:
remote: Repository not found.
fatal: repository 'https://github.com/saeidzebardast/d3-scale-chromatic.git/' not found
Hope you may contact Bower.io and retake the ownership.
Thanks a lot!
I get heterogeneous format of color, either HTML code such as "#21918c" or rgba code such as "rgb(255, 94, 99)" with different color schemes.
var interpolators = [ 'interpolateViridis', 'interpolateInferno', 'interpolateMagma', 'interpolatePlasma', 'interpolateWarm', 'interpolateCool', 'interpolateRainbow', 'interpolateCubehelixDefault' ]; for(var i=0, size=interpolators.length; i<size; i++) { interpolator = interpolators[i]; s = d3.scaleSequential().domain([0, 100]).interpolator(d3[interpolator]); console.log(s(50)); }
For the last 4 ones, I get rgba output, but 4 first ones give HTML code.
Is there a way to force the format ?
When I substitute interpolateCividis for interpolateRainbow, the displayed spectrum (for my supplied log-log data) changes from purple-green to black-gray. I'm loading directly from https://d3js.org/d3-scale-chromatic.v1.min.js
Mike:
http://matplotlib.org/cmocean/
it would be nice to have some approximations using d3.interpolateRgbBasis as I did for ColorBrewer in d3-scale-chromatic.
(from d3/d3-scale#71)
The link provided to the Cubehelix page, https://www.mrao.cam.ac.uk/~dag/CUBEHELIX/, is broken due to its use of https. (I guess the site is not https enabled.) The link should probably be changed to www.mrao.cam.ac.uk/~dag/CUBEHELIX.
See d3/d3-scale#63.
Hi I've been upgrading a lot of d3v3 code up to v4 and I noticed that there apparently is no schemeCategory20() or schemeCategory20c() functions in d3-scale-chromatic. The CHANGES.md however mentions that these do exist and are part of the namespace flattening.
See: https://github.com/d3/d3/blob/master/CHANGES.md#scales-d3-scale
Do they exist? if not I would suggest an edit to the CHANGES.md to remove the section that states that they are available in v4. Thanks.
Hello,
I see 2 pastel categorical schemes but none in diverging. Are there diverging color schemes that only contain pastel colors? Or is there an easy way to create such a scheme?
btw. Using alpha on colors of an existing diverging scheme is not an option as my graphics need to overlap.
hey . i use Vue.js in my project.
and i want to use d3-scale-chromatic in my project.
i try
`import 'd3-color'
import 'd3-interpolate'
import 'd3-scale-chromatic'`
and when i console.log(d3.interpolateYlGn(0))
it shows error __WEBPACK_IMPORTED_MODULE_0_d3__.interpolateYlGn is not a function
what's wrong with my code?
thanks a lot!!!
All the interpolators based on an array of 9 or 11 values result in colors that are a bit duller than the original values. Using a Catmull-Rom interpolation (preferably L*a*b, but RGB is almost undistinguishable) would make them all vivid again:
the three bands below represent the array, the current interpolator, and the proposed change for RdYlBu
See all the others at https://observablehq.com/@fil/interpolate-colors-with-catmull-rom
The catmull-rom interpolator would be added to d3-interpolate; Matt Deslauriers’s version, which I use here, is coming from the Three.js codebase and operates in 3D. I think we would want to change its API a bit to work for any dimension (at least d = 1, 2, 3), but I haven't checked that part yet.
EDIT: a monotone interpolator seems smaller and faster, with comparable results (see below).
Trying to follow the example here, if I do the following
var yellow = d3.interpolateYlGn(0), // "rgb(255, 255, 229)"
var yellowGreen = d3.interpolateYlGn(0.5), // "rgb(120, 197, 120)"
var green = d3.interpolateYlGn(1); // "rgb(0, 69, 41)"
then I get the following values
yellow -> "#ffffe5"
yellowGreen -> "#77.aaaaaaaaaaacc5.55555555555877.d55555555554"
green -> "#004529"
The first and the third output makes sense but I cannot figure out what to do with the second output; does anyone have any pointers on this?
Hi there 👋
We have a user requesting the HSV colormap in our project: silx-kit/h5web#481.
As we use d3-scale-chromatic for our colormaps, we thought it might be better to add it here if it is a colormap you are interested in having ?
Currently, only a few interpolated color schemes have discrete equivalents, and those that do have a limited number of possible ranges. For example, schemeYlGnBu
offers discrete schemes only for lengths 3 through 9, and interpolateCool
has no discrete scheme.
I've got a fairly simple function which could resolve this:
function buildDiscreteFromInterpolator(interpolator, count) {
const discrete = []
for (let i=0; i < count; i++) {
discrete.push(interpolator(i/count))
}
return discrete
}
but from a quick look at the source, I'm not sure where to put it for an actual PR. Or, if this function is a poor fit for the job for some reason I am unaware of, possibly suggest an alternative?
Scale functions export an rgb
string making it a bit cumbersome to work with
d3.interpolateSpectral(0.5)
=> "rgb(251, 248, 176)"
Be able to specify the output format. One such example:
d3.interpolateSpectral(0.5, 'object')
=> {r: 251, g: 248, b: 176}
d3.interpolateSpectral(0.5, 'array')
=> [251, 248, 176]
Part of me feels like there is a utility function in d3-color to convert the rgb string but couldnt find it
Hi, apologies in advance if this is the wrong place for this question. I'm currently working with a webgl scatterplot that uses d3 color palettes for shading. Each of my data points has an associated color hex code associated with it and I am hoping to find a way to utilize the hex code to find the appropriate value within a d3 color palette such as "rainbow" or "sinebow". Is that something you have attempted before or do you have any suggestions on how one might go about utilizing a hex code to get the correct shading from a d3 color palette?
I would like to have rgba
-values as output. I cannot find that option so I guess this would need an extension to the existing color-getter-functions to accept an optional alpha-value?
I need to associate gradients to 8 categories, and it looks like a custom categorical scheme, except I need to define 16 colors, in order for each category to be represented by a gradient between two colors.
Looking at the code behind a categorical scheme, it looks like rgb colors are just concatenated one after another. Is there a way to fulfill my requirement using d3-scale-chromatic? Or do you know a better alternative?
Thanks in advance for the support
Hi, Mike,
I read some demos you write putting this extension right after d3-v4.x.js,
so my question is does this extension compatible with d3-v3.x.js?
I mean does it compatible backwards.
Many Thanks!
Could the API let us get the list of schemes, and range of acceptable parameters for any scheme?
Then we could auto-write the documentation and create color schemes choosers.
Here's a block that implements the idea
http://bl.ocks.org/Fil/0bf58d23011ab244c657a1262bcbe4b2
To be complete it would also have to expose the schemes' categories (Categorical, Diverging, etc).
First off, I want to say, I absolutely <3 d3.
A question that I had was win the scale colors and then taking the interpolation.
An example would be schemeBrBG vs interpolationBrBG.
For interpolations of 0 and 1, I get the RGB equivalent of schemeBrBG[11][0] and schemeBrBG[11][10].
The colors in the middle the values are off just slightly. I was wondering how you get the interpolation colors. I'm pretty sure you are getting the scheme colors from ColorBrewer.
Lastly, is there one scale that is better than the other. Such as would you use scheme over interpolation or vice versa?
Thanks!
Jamie
The cividis scale is a derivative of the viridis scale, adjusted for viewers with color vision deficiency, and also for those with standard vision, but avoiding the errors common with rainbow-style schemes.
References:
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.js"></script>
<script>
var range = d3.schemeAccent;
var range = d3.schemeSpectral;
var c = d3.scaleOrdinal(range).domain(["a","b","c"]);
var result = c("a");
</script>
For schemeAccent
, result is #7fc97f
.
while for schemeSpectral
, result is undefined.
interpolatePuOr
and schemePuOr
ramp from orange to purple. This behavior is different from all the other examples, where the order of colors matches the order of color names in the exported property name. In addition, ColorBrewer also ramps from purple (a default for low values) to orange (a default for high values). Not sure if this was intentional or not, so thought it worthwhile to add an issue.
[INFO] ERROR in node_modules/@types/d3-scale-chromatic/index.d.ts(9,41): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(9,47): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(13,37): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(13,43): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(17,36): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(17,42): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(21,37): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(21,43): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(25,38): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(25,44): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(29,38): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(29,44): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(33,35): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(33,41): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(37,35): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(37,41): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(41,35): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(41,41): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(45,40): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(45,46): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(62,49): error TS1005: '>' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(62,55): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(62,57): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(62,58): error TS1109: Expression expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(76,49): error TS1005: '>' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(76,55): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(76,57): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(76,58): error TS1109: Expression expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(90,49): error TS1005: '>' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(90,55): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(90,57): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(90,58): error TS1109: Expression expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(104,49): error TS1005: '>' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(104,55): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(104,57): error TS1005: ',' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(104,58): error TS1109: Expression expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(118,49): error TS1005: '>' expected.
[INFO] node_modules/@types/d3-scale-chromatic/index.d.ts(118,55): error TS1005: ',' expected.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.