simwrapper / simwrapper

Source code for SimWrapper
GNU General Public License v3.0
24 stars 12 forks source link

Custom Colors #345

Open markusstraub opened 6 months ago

markusstraub commented 6 months ago

For me consistent color schemes for modes of transport (not only within one project but over multiple projects) are important but I don't see a way to define them e.g. in https://simwrapper.github.io/docs/pie-charts

My solution so far was to mostly use vega-lite plots, but then the colors with simwrapper's pie charts, sankey charts,.. etc do not match.

If this is also useful for more people I would love to see this option in the future :)

billyc commented 6 months ago

The default plots are based on the Plotly library, which has a standard set of colors for each category based on their order in the dataset. So if your data always has the modes in the same order, then the charts should always turn out with consistent colors per mode.

The basic charts in SimWrapper are very basic by design; with very few configuration possibilities.

But as you found, there are other ways to make charts! Vega-lite is one option.

You might also take a look at the SimWrapper Plotly plugin, which exposes the entire Plotly Javascript configuration, and will have visual consistency with the other basic charts. Anything you can do in Plotly, you can do with the Plotly plugin. This includes setting specific colors per trace, for example. I think that is in the colorway option. Again, as long as your data lists the modes in a consistent manner, this should be consistent.

But I don't think Plotly allows a mapping of, say, {car: 'blue', pt: 'red'} and without that I'm not sure how I would implement your suggestion. I'll keep thinking about it though. Thanks for the suggestion and let me know here if you find other solutions which work well -- I am sure other users would be interested.

markusstraub commented 6 months ago

Thanks for the comprehensive explanation! What I need (and use for the vega-lite plots) is exactly what you mention in the last paragraph - a color mapping. Because not only do I want to have reliable assignments of colors to modes but I also want to decide on the color scheme. (I just don't like modal split plots where cars are green and transit is red :)

billyc commented 3 months ago

feat: Plotly bar/line/area/pie/scatter plots learned stable "category" colors

To stabilize color choices for multi-category charts, add the new YAML property categories with the list of expected category values. You can also add colorRamp with one of the available color palettes in the D3.js library. Default is Rainbow and other useful palettes include Sinebow Turbo Viridis Plasma Magma.

categories: bike,car,drt,freight,pt,walk

and optional

colorRamp: Viridis #optional, Rainbow/Sinebow/Viridis/Magma/Plasma/Turbo

For example, you can supply all available modes to a mode choice bar chart, and that way the modes will always be plotted with the same color choices.

Without setting "categories" the colors will be chosen based on alphabetical listing, as before. This is fine until your policy scenario adds a new "drt" mode which bumps all following categories to different color values.

@simei94 This is on the staging branch while we test it -- you can try it out at https://simwrapper.github.io/staging