Allow setting default in ordinal range for color
See original GitHub issueI have a discrete field and I am able to map different colors to it’s different values. However, I would like to have a final color map to all the other colors which I didn’t set up a mapping for.
This might be possible already and I was just unable to find it.
The motiviation is reproducing MapD’s example of plotting dots for each tweet colored by country: https://www.omnisci.com/docs/latest/6_vegaTutorials.html#getting-more-from-your-data-1
In their custom Vega they have a way of specifying a default value:
"scales:" [
.
.
.
{
"name": "color",
"type": "ordinal",
"domain": ["en", "es", "fr"],
"range": ["#27aeef", "#87bc45", "#ef9b20"],
"default": "gray",
"nullValue": "#cacaca"
}
]
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:16 (15 by maintainers)
Top Results From Across the Web
Ordinal Scales - Using D3.js
We create a color scale using scaleOrdinal that maps the years in [1970, 1971, 1972, 1973] to the colors in [“red”, “orange”, “green”,...
Read more >Returning default color for items not in domain, using d3.js ...
Use scaleOrdinal.unknown : var type = d3.scaleOrdinal() .domain(['WeWork', 'Regus',...]) .range(['red', 'blue',...]) .unknown("grey");.
Read more >d3.scaleOrdinal - Observable
A list of twelve words to explore d3 schemePaired color scheme ! A useful range for an ordinal scale can be a set...
Read more >Managing colors in d3.js - The D3 Graph Gallery
Categorical color scale · Give 2 colors as a range. Use scaleLinear() · Use a palette coming from ColorBrewer. Use scaleSequential() . List...
Read more >Scale | Vega-Lite
1. Set a custom scheme . 2. Setting the range property to an array of valid CSS color strings. 3. Change the default...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Either way, I don’t think Vega-Lite can do much here since it doesn’t have access to the data. Should I move the issue to Vega?
I think this semantic is okay for handling the “default/unknown/else” case. It would only be useful when users know a few values that they care about like
["en", "es", "fr"]
. But for data-driven domain (default in VL), the unknown case wouldn’t happen.scale('color', datum.category) || 'grey'
still doesn’t work for handling null value in Vega-Lite though, since Vega-Lite uses data-driven domain. Thus, if the data includes null (or undefined), they will still be included as one of the domain values.We can sort of get around this using a conditional rule. However,
null
wouldn’t then be included in the legend.If we want to include null in the legend, then we still need to do something more.
a) If there is a way to combine range, then we can do something like:
but it won’t work for undefined.
b) Another solution would be simply adding a legend without title with only null value and just its color. (This probably also works for null/invalid value of quantitative/sequential color scale.) The trick part is then showing this legend only when the data field contains null.