Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
DW868990
Advocate II
Advocate II

Deneb - Vega Lite Color Gradient Per Category

Hi,

 

Just wondering if and how it is possible to set the color gradient for category within a visual rather than across the full visual.

 

The below example shows the gradient based all all categories but is is possible for the color gradient to be applied on each individual category.

DW868990_0-1674126126758.png

 


{ "data": {"url": "data/cars.json"},

"mark": "rect",

"encoding": { "y": {"field": "Origin", "type": "nominal"},

"x": {"field": "Cylinders", "type": "ordinal"},

"color": {"aggregate": "mean", "field": "Horsepower"} },

"config": { "axis": {"grid": true, "tickBand": "extent"}

} }

Thanks in advance

1 ACCEPTED SOLUTION

@DW868990, oh wow, apologies. It was so similar to an example on the vega-lite page, that I missed what you were actually after. Let me know if this is better. Happy to make additional tweaks if necessary. I took out the text in the boxes to match what you have. Can add it back in though if you like.

 

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/cars.json"},
  "facet": {"row": {"field": "Origin", "title": null}},
  "title": {
    "text": "Mean Horsepower per Cylinder per Origin",
    "orient": "top",
    "anchor": "middle"
  },
  "spec": {
    "encoding": {
      "y": {"field": "Origin", "type": "ordinal", "axis": null},
      "x": {"field": "Cylinders", "type": "ordinal"}
    },
    "layer": [
      {
        "mark": "rect",
        "encoding": {
          "color": {
            "field": "Horsepower",
            "aggregate": "average",
            "type": "quantitative",
            "legend": {
              "direction": "horizontal",
              "orient": "right",
              "gradientLength": 100,
              "title": null
            }
          }
        }
      }
    ]
  },
  "resolve": {"scale": {"y": "independent", "color": "independent"}},
  "config": {"axis": {"grid": true, "tickBand": "extent"}}
}

 

 

giammariam_0-1674144319383.png

 



Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

View solution in original post

10 REPLIES 10
TheBIGuy_PBI
Helper II
Helper II

Hi, looking at this question, I'm trying to create a similar image, but using one color.
Is there a way to duplicate the chart on the right, and if so, how?
Is Deneb the key to doing this?

TheBIGuy_PBI_0-1681401240863.png

 

Hey @TheBIGuy_PBI, this could definitely be accomplished with Deneb, but the Filled map core visual should suffice.



Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!
mgiammaria
Regular Visitor

Hi @DW868990. Not quite sure if this is what you're after (see below), this implementation utilizes faceting. If it is, consider marking this as the solution. If not, could you please clarify what you mean? I'm making the assumption that you want your category to be Cylinders.

mgiammaria_0-1674141532570.png

 

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/cars.json"},
  "transform": [
    {
      "aggregate": [{"op": "count", "as": "num_cars"}],
      "groupby": ["Origin", "Cylinders"]
    },
    {
      "window": [{"field": "num_cars", "op": "average", "as": "avg num_cars"}],
      "groupby": ["Cylinders"],
      "frame": [null, null]
    },
    {
      "window": [
        {"field": "num_cars", "op": "count", "as": "record ct per cylinders"}
      ],
      "groupby": ["Cylinders"],
      "frame": [null, null]
    },
    {
      "calculate": "((datum['num_cars']-datum['avg num_cars']))",
      "as": "variance"
    },
    {
      "sort": [
        {"field": "Cylinders"},
        {"field": "num_Cars", "order": "descending"}
      ]
    }
  ],
  "facet": {"column": {"field": "Cylinders", "title": null}},
  "title": {
    "text": "Count of Cars per Cylinder per Origin",
    "orient": "top",
    "anchor": "middle"
  },
  "spec": {
    "encoding": {
      "y": {"field": "Origin", "type": "ordinal"},
      "x": {"field": "Cylinders", "type": "ordinal", "axis": null}
    },
    "layer": [
      {
        "mark": "rect",
        "encoding": {
          "color": {
            "field": "num_cars",
            "type": "quantitative",
            "legend": {
              "direction": "vertical",
              "orient": "bottom",
              "gradientLength": 100,
              "title": null
            }
          }
        }
      },
      {
        "mark": "text",
        "encoding": {
          "text": {"field": "num_cars", "type": "quantitative"},
          "color": {
            "condition": {"test": "datum['variance'] < 0", "value": "black"},
            "value": "white"
          }
        }
      }
    ]
  },
  "resolve": {"scale": {"x": "independent", "color": "independent"}},
  "config": {"axis": {"grid": true, "tickBand": "extent"}}
}

 

Thank you. Yes its nearly what i am after. Although the category i would be using is Origin in this example. 

So for example say Europe ranged from 1 to 100
and then USA ranged from 1 to 1000

The color for the highest value for each category would be the same gradient/colour.

 

Thanks for your help.

@DW868990, how about this?

giammariam_0-1674142572081.png

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/cars.json"},
  "transform": [
    {
      "aggregate": [{"op": "count", "as": "num_cars"}],
      "groupby": ["Origin", "Cylinders"]
    },
    {
      "window": [{"field": "num_cars", "op": "average", "as": "avg num_cars"}],
      "groupby": ["Origin"],
      "frame": [null, null]
    },
    {
      "window": [
        {"field": "num_cars", "op": "count", "as": "record ct per cylinders"}
      ],
      "groupby": ["Origin"],
      "frame": [null, null]
    },
    {
      "calculate": "((datum['num_cars']-datum['avg num_cars']))",
      "as": "variance"
    },
    {
      "sort": [
        {"field": "Cylinders"},
        {"field": "num_Cars", "order": "descending"}
      ]
    }
  ],
  "facet": {"row": {"field": "Origin", "title": null}},
  "title": {
    "text": "Count of Cars per Cylinder per Origin",
    "orient": "top",
    "anchor": "middle"
  },
  "spec": {
    "encoding": {
      "y": {"field": "Origin", "type": "ordinal", "axis": null},
      "x": {"field": "Cylinders", "type": "ordinal"}
    },
    "layer": [
      {
        "mark": "rect",
        "encoding": {
          "color": {
            "field": "num_cars",
            "type": "quantitative",
            "legend": {
              "direction": "horizontal",
              "orient": "right",
              "gradientLength": 100,
              "title": null
            }
          }
        }
      },
      {
        "mark": "text",
        "encoding": {
          "text": {"field": "num_cars", "type": "quantitative"},
          "color": {
            "condition": {"test": "datum['variance'] < 0", "value": "black"},
            "value": "white"
          }
        }
      }
    ]
  },
  "resolve": {"scale": {"y": "independent", "color": "independent"}},
  "config": {"axis": {"grid": true, "tickBand": "extent"}}
}

 



Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

@giammariam  Yes 99% there, aside from in my case its not an aggregation the gradients needs to be based on, its just a value of a measure. 

Thanks for your help.

@DW868990, oh wow, apologies. It was so similar to an example on the vega-lite page, that I missed what you were actually after. Let me know if this is better. Happy to make additional tweaks if necessary. I took out the text in the boxes to match what you have. Can add it back in though if you like.

 

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/cars.json"},
  "facet": {"row": {"field": "Origin", "title": null}},
  "title": {
    "text": "Mean Horsepower per Cylinder per Origin",
    "orient": "top",
    "anchor": "middle"
  },
  "spec": {
    "encoding": {
      "y": {"field": "Origin", "type": "ordinal", "axis": null},
      "x": {"field": "Cylinders", "type": "ordinal"}
    },
    "layer": [
      {
        "mark": "rect",
        "encoding": {
          "color": {
            "field": "Horsepower",
            "aggregate": "average",
            "type": "quantitative",
            "legend": {
              "direction": "horizontal",
              "orient": "right",
              "gradientLength": 100,
              "title": null
            }
          }
        }
      }
    ]
  },
  "resolve": {"scale": {"y": "independent", "color": "independent"}},
  "config": {"axis": {"grid": true, "tickBand": "extent"}}
}

 

 

giammariam_0-1674144319383.png

 



Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

Hi, how do you do this in Powerbi? I've not worked with Deneb before

 

Fantastic, this is exactly what i was after, thank you.

No problem. Thanks for sticking by through the iterations. Happy to help and get some Deneb practice in. Feel free to @ me in any deneb related questions you have in the future.



Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors
Top Kudoed Authors