vega
Missing documentation on how to use vega-scale api with linear or log scale
In our project we are using vega-scale to generate heatmaps for numeric data. We managed to use a sequential scheme like viridis with scale = vega.scale('sequential').interploate(vega.scheme('viridis'));. I can't seem to figure out from the documentation how to differentiate between for example a linear and log scale.
Also the previously mentioned vega-scale repository is archived now. The README.md file explains that everything has been moved here for further development but i can't seem to find any documentation on how to use the scale api. Could someone point me to the documentation for it?
I think the new documentation for scale API is here: https://vega.github.io/vega/docs/api/extensibility/#scales
Yes, and some more specific JS APIs are documented at https://github.com/vega/vega/tree/main/packages/vega-scale
@domoritz @PBI-David I still can't really tell from the docs how I would create a log scale with the viridis scheme for example. Would you mind giving me a short example to work with?
@domoritz @PBI-David i was actually looking for a way using the vega scale API.
@domoritz @PBI-David very sorry to bother you again but as previously mentioned i am looking for an example using the vega scale API.
@domoritz Any chance you could provide an example that uses the scale API? Would highly appreciate it! 😊
Did https://github.com/vega/vega/blob/main/packages/vega-scale/README.md help? What did you try? Would d3 work for you instead (which Vega uses internally)?
Did https://github.com/vega/vega/blob/main/packages/vega-scale/README.md help? What did you try? Would d3 work for you instead (which Vega uses internally)?
Nope sadly not since the example is missing an example or any info on how to specify a scale type like log or linear when using continuous scheme like viridis. I have pretty much tried everything I could imagine or that would make sense when looking at the rest of the documentation but none of it seems to work. It'd be much more convenient for us to stay with vega.
You've seen https://observablehq.com/@cse412/cse-412-section-3-vega-lite#cell-906?
vl.x().fieldQ('Horsepower').scale({type:'log'}), // use log scale
You've seen https://observablehq.com/@cse412/cse-412-section-3-vega-lite#cell-906?
vl.x().fieldQ('Horsepower').scale({type:'log'}), // use log scale
This is vega-lite not vega.
I see. The I don't know. Something as such:
var logscale = vega.scale('log');
var logviriscale = logscale().range(vega.scheme('viridis'));
Would make sense to me, but I don't know much about the package vega-scale. Good luck.
I see. The I don't know. Something as such:
var logscale = vega.scale('log'); var logviriscale = logscale().range(vega.scheme('viridis'));Would make sense to me, but I don't know much about the package vega-scale. Good luck.
That is exactly what I also tried (it also made the most sense to me) but it doesn't work sadly. It'd be super helpful to have a proper example in the docs @domoritz.
Base on example for Vega API for scale: https://vega.github.io/vega/docs/api/extensibility/#scales
Try:
var logscale = vega.scale('log');
var logviriscale = logscale().interpolator(vega.scheme('viridis'));
Base on example for Vega API for scale: https://vega.github.io/vega/docs/api/extensibility/#scales
Try:
var logscale = vega.scale('log'); var logviriscale = logscale().interpolator(vega.scheme('viridis'));
Thanks for the suggestion but this is exactly why I am asking the question because what the docs and you suggest only works with the sequential scale and not with log, linear or basically anything else.
Your code results in TypeError: logscale().interpolator is not a function. (In 'logscale().interpolator(vega.scheme('viridis'))', 'logscale().interpolator' is undefined)
Hmm, I see the same issue and I am not sure how to create a log color scale in the API.
Here is a spec that works, though: Open the Chart in the Vega Editor similar to my example from above. You can try to step into the code to see what Vega instantiates.
@jheer may have the quick answer to your question.
After some testing I was not able get the Vega Extensibility API for Scale to work.
If your goal is to have a javascript function to convert a value on log scale to color scale such as "viridis", then it is easier to just use d3.js. For example:
let mySequentialLogViridisFunc = d3.scaleSequentialLog(d3.interpolateViridis)
.domain([0.01, 1000]);
console.log(mySequentialLogViridisFunc(100)); // -> rgb(3, 120, 119)
Note: Include d3.js library in your html file:
<script src="https://cdn.jsdelivr.net/npm/d3@5"></script>
See d3.js documentation and examples: https://github.com/d3/d3-scale-chromatic https://github.com/d3/d3-scale#scaleSequentialLog https://observablehq.com/@d3/sequential-scales
Hmm, I see the same issue and I am not sure how to create a log color scale in the API.
Here is a spec that works, though: Open the Chart in the Vega Editor similar to my example from above. You can try to step into the code to see what Vega instantiates.
@jheer may have the quick answer to your question.
Sorry i don't see how the working vega spec would help me in any way. @domoritz Would you please reopen the issue I changed the title according to the incomplete documentation of the scale api. Maybe this way we can improve the documentation so everything gets cleared up. If @jheer would have some advice for me that'd be great!
@roying thanks a lot for your example I will keep that in mind although I would really rather use the vega scale api since we are using it already for all the other use cases in our scenario.
@domoritz Thanks a lot for reopening this! I hope the docs can be improved once we figure out how the scale api really works. I'd be happy to help on that once I know how it works. Is there another way to get @jheer on board with this since you mentioned he could have a quick answer on the question?