search

vega / vega-lite

A concise grammar of interactive graphics, built on Vega.
https://vega.github.io/vega-lite/
BSD 3-Clause "New" or "Revised" License
4.67k stars 608 forks source link

Radial gradient in pie chart #8219

Open xeruf opened 2 years ago

xeruf commented 2 years ago

Is it possible to create something like the "seasonal plot: a10" as seen in https://github.com/vega/vega-lite/issues/408#issuecomment-500184377 now?

image

Specifically I am interested in the way the color is distributed inside out.

xeruf commented 2 years ago

Something like you can see in the top right third of this chart, but the other two are rather broken, maybe some kind of expression here? https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAEzjQATjRyZ289AEEABBBoIcguIZw1LsJOsyGA7nRiHETOMtXLDypJhUiioBKKigxEiCDGpoANqgUAHkbOoAnmgAjEqR0XBZAL4KiclkqRmoAEw5UTGFxSBJmCnpaADMNXmFALpFIMjqANZooJhpOPno9lDBNLKycOoASkjKNAwQaGIADEpQbIKpIyAAHplouyBp56jblADsYkonlRdKaa+3D08g6p-ZIDI6lWNlkmDQvxBUWCEEwbDw8VAbAAZsiIHBwbc9gcjugnDARCAikjUejMQD9od1BD-EMgXA4PICr0+oz9mtZGRjvQMWFQMibIJlBDcnUlGMJhCAI4MJBgugBGikIkFApAA

PBI-David commented 2 years ago

Can't you already do something like that. image


{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with embedded data.",
  "data": {
    "values": [
      {"category": 1, "value": 5},
      {"category": 2, "value": 10},
      {"category": 3, "value": 15},
      {"category": 4, "value": 20},
      {"category": 5, "value": 25},
      {"category": 6, "value": 30}
    ]
  },
  "width": 200,
  "height": 200,
  "mark": {"type": "circle"},
  "encoding": {
    "x": {"value": 100},
    "y": {"value": 100},
    "size": {
      "field": "value",
      "legend": null,
      "sort": "ascending",
      "scale": {"range": [0, 20000]}
    },
    "stroke": {"field": "value", "type": "quantitative"},
    "fill": {"value": "transparent"}
  }
}
xeruf commented 2 years ago

Thank you! However, in my use-case, I don't want it to be discrete, nor derived from the values - I want a pie chart where each part of the cake has a different-colored radial gradient, with all being the same color at the center.

xeruf commented 2 years ago

Like this, except the other thirds should also be like that but in different colors:

image
PBI-David commented 2 years ago

You could work around it by creating all the pieces of the pie yourself but I agree that inbuilt support would be better.

Editor

image