How to change the color scheme in the vega lite heatmap
I tried changing the range scheme to different values, but the color not changing
https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAEySYUqUMSSCGcCGgDaoJFEwMdaEAEFFIHACc4ymmedXbSqGwazMaAEYAZgBfBRMzC0EPO0dnV0x3dAAhO29ff1QABjCI80t0T3snFzdlKwBhNJ8-NBzwkFN86JTYkoSkm2qMutzGyIKQVKU40sTy1q8azID6vKirYeL4ssru2tQANj6mhfQqkfbVwvXMuf7mtcOV8cXT3obdwYPlsc6X9I2AThCAXTD7EgHEgEAZUMYQLIQXArDAaGQYMIEf4lBA4II4GYrDg2DRan8lMgHABrNCgTAATxwMPQTixqMwDjYxLgAHUaMp6GgAEwAuCybwuWRkMkgCmigBmNHREwuCyUlOpVlkbAQeMsAIAHpLpYJZaMOuUFVSaZDVerogCpYIWqApTKrJ8USBFaaAI4WPx0NQ0UggAEQRnMmmgbyyFyYdjyTSA4EIWHwxGJ52IHCUtASnRopTaXSmpiCUykgG5vRoWQMG0Atg4Ux0cUxsMRqOi2txhMIpFYOylmkBEs6MvZShiasOZRwByipt0FsxtsgjtJ5E9wd9gd53oAsNSkUx6A6EMgJhIcMABSQyiFZAAkrJZJO6koT+fL9eAPIMRJT7Il6UAd1FQM4BwNAABZ6hAYFhSPONQP3WBEFNAAZZN32gsgYRCAEkE1GgwVAZRVSQPEMyzOBsJCIA
You can set the scheme for the fill scale.
"fill": {
"field": "count",
"type": "quantitative",
"scale": {
"scheme": "category20b"
}
},
You could also provide a color range instead of a preset scheme.
"fill": {
"field": "count",
"type": "quantitative",
"scale": {
"range": [
"silver",
"purple",
"teal",
"blue"
]
}
},
Related
I'm still very much a beginner in vega-lite but I'm trying to create a stacked bar chart with different sales channels. Sometimes a sales channel has a 0 and doesn't show up, how can I still show the label?
{
"layer": [
{
"mark": {
"type": "bar",
"cornerRadius": 50,
"color": "#90C290",
"tooltip": true
},
"encoding": {
"x": {
"field": "Number of customers"
}
}
},
{
"mark": {
"type": "text",
"tooltip": true,
"align": "left",
"baseline": "middle",
"x": 10,
"color": "white"
},
"encoding": {
"text": {
"field": "Number of customers",
"type": "text"
}
}
}
],
"encoding": {
"y": {
"field": "Sales channel",
"type": "nominal",
"sort": "descending",
"title": null
},
"x": {
"type": "quantitative",
"title": null,
"axis": null
}
}
}
I tried the code above and looked through documentation but couldn't exactly find what I was looking for
I added sample data to your spec, and there are a few changes I would make.
Around line 29 you have "type": "text" which should be "type": "quantitative".
I think your problem is that the text color is white and the background color is white, so the text is there but you can't see it. A simple fix would be to set the text color to black, or change the background color to something other than white (add "background": "lightgray", before "layer").
It's also possible you don't see the channel at all depending on how you are passing data from Power BI. Check the data tab in the Deneb window to make sure the Channel is there.
If the channel is not there, you'll have to adjust something on the Power BI side. A good practice is to put the data in a table in Power BI first so you know what you are sending into Deneb. If you use an aggregation like SUM on the data field in Power BI, nulls will drop out, but zeros should stay. If you use "Don't summarize" then nulls or errors (text in a number field) will pass in as nulls to Deneb, but you may need to add an "aggregate": "sum" to your encoding.
In any case, here's the spec the way I would write it.
{
"data": {"name": "dataset"},
"layer": [
{
"mark": {
"type": "bar",
"cornerRadius": 50,
"color": "#90C290",
"tooltip": true
}
},
{
"mark": {
"type": "text",
"tooltip": true,
"align": "left",
"baseline": "middle",
"dx": 5,
"color": "black"
},
"encoding": {
"text": {
"field": "Number of customers",
"type": "quantitative"
}
}
}
],
"encoding": {
"y": {
"field": "Sales channel",
"type": "nominal",
"sort": "descending",
"title": null
},
"x": {
"field": "Number of customers",
"type": "quantitative",
"title": null,
"axis": null
}
}
}
Link to sample data in Vega Editor
I'm using Vega Lite to chart the times at which I eat my meals, and want a regression (loess) line showing the general time for each. By default, a regression uses the entire dataset and only shows one line; I want three lines, one for each meal (stored in the field extra_data.content).
I've achieved what I want to do my repeating the loess layer three times (screenshot) but am trying to find a solution in which the same layer is written once and repeats itself three times.
Edit after solving! Thanks very much to #jakevdp for the answer! Here is my working code; note that there is both a groupby on the loess and a color channel.
{
"mark": "line",
"transform": [
{
"loess": "hm",
"on": "ymd",
"groupby": ["extra_data.content"]
}
],
"encoding": {
"x": {
"field": "ymd",
"type": "temporal"
},
"y": {
"field": "hm",
"type": "temporal"
},
"color": {
"field": "extra_data.content",
"type": "nominal"
}
}
}
It sounds like you want the groupby argument of the loess transform, along with a color encoding. It might look something like this:
{
"mark": "line",
"transform": [
{
"loess": "hm",
"on": "ymd",
"groupby": ["extradata.content"]
}
],
"encoding": {
"x": {
"field": "ymd",
"type": "temporal"
},
"y": {
"field": "hm",
"type": "temporal"
},
"color": {
"field": "extradata.content",
"type": "nominal"
}
}
}
My source code is following
"transform": [
{
"window": [
{
"op": "rank", "field": "Value", "as": "_rank"
}
],
"sort": [
{
"field": "Value",
"order": "descending"
}
]
}
],
"encoding": {
"color": {
"field": "_rank",
"condition": {
"test": "datum._rank>5",
"value": "grey"
}
},
"x": {
"field": "Week",
"type": "nominal",
"axis": {
"labelAngle": 0
}
},
"y": {
"field": "Value",
"type": "quantitative",
"axis": {
"grid": false
}
}
},
"layer": [
{
"mark": {
"type": "bar",
"tooltip": true
}
},
{
"mark": {
"type": "text",
"align": "center",
"baseline": "middle",
"dx": 0,
"dy": -5,
"tooltip": true
},
"encoding": {
"text": {
"field": "Value"
}
}
}
]
I put a condition for the color encoding to show anything but top5 to show in different colors and any values that are not top5 should be grey.
"color": {
"field": "_rank",
"condition": {
"test": "datum._rank>5",
"value": "grey"
}
}
It is all good for the bars but the legends don't generate with the same conditions.
Is it possible to extend the same top5 logics for the legend's color as well? i.e. anything <5 are grey in color (each) in legend and everything else is the same color as the condition (currently this part is getting generated)
Editor
The legend colors will reflect the color scale that you specify, and not reflect conditions.
The easiest way to do what you want is likely by setting the range for your color scheme; for example:
{
"data": {"url": "data/cars.json"},
"mark": "point",
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"},
"color": {
"field": "Origin", "type": "nominal",
"scale": {"range": ["purple", "#ff0000", "teal"]}
}
}
}
You'll have to modify the specified colors based on how many color categories you have in your data.
I need to paint heatmaps of certain range in certain colors, e.g.:
0-50 - red
50-150 - yellow
150+ - green
Also I want to add legend too.
I found some way to do first thing with conditional colors:
"color": {
"condition": [{
"test": {"field": "price", "gt": "50"},
"value": "yellow"
},
{
"test": {"field": "price", "gt": "150"},
"value": "green"
}
],
"value": "red"
},
but I am not sure that this is right way to do it. Also I cannot add legend here.
https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JACyUAVhDYA7EABoQmAE5JZEAGZsVCNAG1QmmoMxwVaEABMkmBgkoQAngiZtBAAgCEAXh8eAcgBxAHkQoICQAF8AXSUAdxorejQAZgAGdKV4GjIsNABGTKUbTBRUUAYVQUtSpE5MNigAawhKKAhiaKVkFWbLFTgoTEUQKDljMjRgKKU4WXGrGlkpipAAD2nlGgQ4AFVZOksnOCRdOXpSuFHjOEErWttrpUwnHGv0HSXZJBqXukEHxAABUds8QEh1jQIFttLpbJYAKQATVGgiQTDuAEEVoC0FkQOjMYIQqRqkgcGhNL8IHAlES7gBhdw6LbjWRLTDseRrMwQEa8sEHI7oBAXGBXG40O4PdDEX4McFwACODF+WzFshSqAKJSehSisxA8sEissTHRLW6xoVH1kDEEgiNXJazMErLW7M53K2fIFoC5u2FApAmsu+qUt3ulhNZrmqvVazDMEKerMBqNsaBFqQVsztrQ9sdhqN43dFk9cm9cgMAbg-Nh0uj6BwKhoUHBZBDAFZ0tas8c7u74t06w21lHZSBW+3OyGCr3+wX0GRBvNonEbaagYMHvTyPNZTMjU5GzLLM5XO5Rq93pZZGwEMt1f9MHjUEWnYagA
One way to do this is with a calculate transform along with a scale domain/range. The transform would look something like this:
"transform": [
{
"calculate": "datum.price < 50 ? '0-50' : datum.price < 150 ? '50-150' : '>150'",
"as": "binned_price"
}
],
and the color encoding would look like this:
"color": {
"field": "binned_price",
"type": "nominal",
"scale": {
"domain": ["0-50", "50-150", ">150"],
"range": ["yellow", "green", "red"]
}
},
You can see the full chart in the editor:
Given a stacked bar chart such as in this example: https://vega.github.io/editor/?#/examples/vega-lite/stacked_bar_weather
I want to control the order of the items in the aggregation so that, for example, 'fog' comes at the bottom, with 'sun' next etc. Is that possible?
The reason for this is I have one type that is much larger than the others. I want this to appear at the bottom, then control the domain to 'cut off' most of that section.
Thanks
You can control the stack order via the order encoding: see https://vega.github.io/vega-lite/docs/stack.html#sorting-stack-order
Unfortunately, this only allows sorting by field value, rather than by an explicit order as you want here. The workaround is to use a calculate transform to turn your explicit order into a field (view in editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "data/seattle-weather.csv"},
"transform": [
{
"calculate": "indexof(['sun', 'fog', 'drizzle', 'rain', 'snow'], datum.weather)",
"as": "order"
}
],
"mark": "bar",
"encoding": {
"x": {
"timeUnit": "month",
"field": "date",
"type": "ordinal",
"axis": {"title": "Month of the year"}
},
"y": {"aggregate": "count", "type": "quantitative"},
"color": {
"field": "weather",
"type": "nominal",
"scale": {
"domain": ["sun", "fog", "drizzle", "rain", "snow"],
"range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
},
"legend": {"title": "Weather type"}
},
"order": {"field": "order", "type": "ordinal"}
}
}