Make individual colors from Vega color schemes accessible from Altair #2617
Comments
|
@joelostblom I'm adding some context for what is going on in your script, and linking docs for Vega/Color Schemes The
|
Yes, I agree that this is the better option |
|
@joelostblom something that might help push this forward is an example that would benefit from more granular access to the color palettes. It could be an existing Maybe even adapting some of the code from @mattijn's work in doc/user_guide/color_usage.rst. |
|
cc @hydrosquall regarding #2617 (comment) Wondering if you had any thoughts how we could expose the colors within a scheme from I feel like this would be simpler than vega/vega#1938 |
|
I think vega/vega#1938 might not help with this issue, since Vega expressions do not have knowledge of color palettes. A naive Altair question as I haven't changed it before - do you have the ability to Altair's Python code ask Vega JS runtime for a response, so Vega can be an input to Python rather than just an output? If you can't do it at runtime, you could write a json file into Altair in a CI step. The schemes are queryable through the same API used to add new schemes, so you wouldn't have to do parsing of a JS file from a URL (though that approach is very ingenious). |
Clarification
Apologies @hydrosquall, the link I was drawing between these issues wasn't very clear (my bad). What they have in common is that resolving either could result in new So if that was the goal here, I think we'd be able to get there with less effort than (vega/vega#1938). Re
|
|
Hi @dangotbanned , thanks very much for the clarifications and helpful links around expr evaluation and theme testing. I was thinking that when altair runs in jupyter it could communicate with Vega via the Jupyter widgets API (as we did in this streamlit POC ), but since altair can run without jupyter, this isn't a global solution. I think I see the connection you're drawing between the projects now - if there was a structured (JSON) representation of some Stepping from the code I'm curious about the end goal. If users are able to access the color definitions in python, what would they use it for? Would they be passed directly back into an One alternative devtool if they're not planning to use the colors right away would be to offer this info via a devtool page where you can
Alternately, we could augment the docs so clicking on a color block copies the hex code for that color to clipboard or displays in a tooltip, similar to how other color / design system sites work (e.g. material) |
Ah good find, it looks like those color scheme names originates in 
|
No worries, thanks for the detail as well @hydrosquall - interesting POC. Gif
Yeah that's it 🙂
Good question! After some more reading - I'm finding that SchemeParams already solves the issue I had in mind.
Big +1 from me on copy-to-clipboard for the hex color codes! |
@dangotbanned
|
Can you run Vega-Lite or Vega at compile time with node and extract the colors into JSON or Python so that you don't need to do anything with javascript at runtime? |
@domoritz that sounds like a good way forward. I'm happy to work on how we integrate whatever the artifact is - but how to generate it is the bit I'm missing |
|
The rough outline would be to create a javascript file that imports Vega and Vega-Lite, runs whatever code you need to run, and writes a JSON or Python file. Then you can run the javascript file with node. |
|
I tried to suggest that as well, but it may have gotten lost. Thanks for raising that suggestion again.
I figure it would be something like this // get-vega-colors.js
import vega from 'vega';
import { continuous, discrete } from `vega-scale/src/palettes`;
// write some JS to
const myJsonToExport = {}
// get your palette names by enumerating the keys of continuous and discrete
// for all the color palette names, get the info colors from
// vega.scheme(schemeName)
console.log(myExportJson)Then in your CI script node get-vega-colors.js > my-color-definitions.json |
Ah apologies @hydrosquall yeah it looks like I skimmed over that part 🤦♂ @domoritz, @hydrosquall
For vega-themes itself, I can imagine it might be more ergonomic to define a theme as transformations on scheme - rather than defining multiple variations in a script. |
|
Vega themes seems like an odd place since it's only tangentially related to schemes. I'd rather make a new package but I think doing it in Altair makes the most sense. |
|
vl-convert has a get_themes function for retrieving all of the available themes, do we want an analogues |
@jonmmease that could be a good option! Would you be able to get the contents of each scheme/palette that way? |
I haven't looked at this in detail, but if we can write a JavaScript snippet that builds a JavaScript object containing the names and contents of each scheme/pallete then we could retrieve that in Rust/Python. For themes vl-convert runs this var vegaThemes;
import('{vega_themes_url}').then((imported) => {{
vegaThemes = imported;
}})
var themes = Object.assign({}, vegaThemes);
delete themes.version
delete themes.defaultAnd then fetches the |
Tasks
Description
I think it would be valuable to make all the individual colors from Vega schemes accessible programmatically from Altair. Since Vega stores them in a single file, we could parse that and create a Python dictionary that could be used to access single colors from each color scheme. Something like this:
Code block
{'blues': [ '#cfe1f2', '#bed8ec', '#a8cee5', '#8fc1de', '#74b2d7', '#5ba3cf', '#4592c6', '#3181bd', '#206fb2', '#125ca4', '#0a4a90'], 'greens': [ '#d3eecd', '#c0e6ba', '#abdda5', '#94d391', '#7bc77d', '#60ba6c', '#46ab5e', '#329a51', '#208943', '#0e7735', '#036429'] ...The text was updated successfully, but these errors were encountered: