question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow setting default in ordinal range for color

See original GitHub issue

I 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:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:16 (15 by maintainers)

github_iconTop GitHub Comments

2reactions
domoritzcommented, Nov 13, 2018

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?

0reactions
kanitwcommented, Nov 14, 2018

Also: Under the hood, D3 does support setting an unknown value on ordinal scales, however, this will return a default value for any value not included in the domain, not just null or missing data. One option for Vega could be to leverage that functionality, so long as those semantics are acceptable.

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:

"domain": {"fields": [[null],{"data": "source_0", "field": "Major_Genre", "sort": true}]},
"range": // some syntax to concatenate grey with scheme 

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found