Vega-lite customize colors in grouped bar chart with multiple measures - visualization

I started with this vega-lite example from the gallery and now I'd like to customize this chart by changing the default blue and orange colors to custom color by RGB value. Is that possible with vega-lite?

Yes, just set a scale.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "data/movies.json"
},
"repeat": {"layer": ["Worldwide Gross", "US Gross"]},
"spec": {
"mark": "bar",
"encoding": {
"x": {
"field": "Major Genre",
"type": "nominal"
},
"y": {
"aggregate": "sum",
"field": {"repeat": "layer"},
"type": "quantitative",
"title": "Total Gross"
},
"color": {"datum": {"repeat": "layer"}, "title": "Gross",
"scale": {"range": ["#2a9d8f", "#e76f51"]}},
"xOffset": {"datum": {"repeat": "layer"}}
}
},
"config": {
"mark": {"invalid": null}
}
}

Related

Filtering data on vegalite

I'm trying to filter my data so that it does not include the missing data (noted as 0) in my chart. I'd assume the code I need to add is
"transform": [
{"filter": "datum.Gross enrolment ratio for tertiary education both sexes (%) > 0"
}
],
but it doesn't seem to be working.
Here is the code for my vegalite chart
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": {
"text": "Billionaires and Education Attainment",
"subtitle": "Sources: ",
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "black"
},
"height": 300,
"width": 260,
"data": {
"url": "https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/correlation.csv"
},
"selection": {
"paintbrush": {
"type": "multi",
"on": "mouseover",
"nearest": true
},
"grid": {
"type": "interval",
"bind": "scales"
}
},
"mark": {
"type": "circle",
"opacity": 0.4,
"color": "skyblue"
},
"encoding": {
"x": {
"field": "Number of Billionaires",
"type": "quantitative",
"axis": {
"title": "Number of Billionaires",
"grid": false,
"tickCount": 14,
"labelOverlap": "greedy"
}
},
"y": {
"field": "Gross enrolment ratio for tertiary education both sexes (%)",
"type": "quantitative",
"axis": {
"title": "Educational Attainment",
"grid": false
}
},
"size": {
"condition": {
"selection": "paintbrush",
"value": 300,
"init": {
"value": 70
}
},
"value": 70
},
"tooltip": [
{
"field": "Year",
"type": "nominal",
"title": "Year"
},
{
"field": "Country",
"type": "ordinal",
"title": "Country"
},
{
"field": "Number of Billionaires",
"type": "nominal",
"title": "No of Billionaires"
},
{
"field": "Gross enrolment ratio for tertiary education both sexes (%)",
"type": "nominal",
"title": "Gross enrolment ratio for tertiary education both sexes (%)"
}
]
}
}
Does anyone know how I could filter the data so it only includes points where the variable is not 0?
Thank you so so much!
You can do this with a greater-than predicate:
"transform": [{
"filter": {
"field": "Gross enrolment ratio for tertiary education both sexes (%)",
"gt": 0
}
}],

how to make an indented tree in vega

I'm trying to create an indented tree e.g. as in https://observablehq.com/#d3/indented-tree
I think that what this example does which I can't replicate in vega is encapsulated in this code:
root = { let i = 0; return d3.hierarchy(data).eachBefore(d => d.index = i++); }
eachBefore is a pre-order traversal on the output of d3.hierarchy.
Is there any way to get this result from (upstream) vega, or is this a feature request for an index output from the tree transform? (/something similar, or else a custom transform)
By the way, I think it may be easy to turn the specific tree layout example into an indented tree because the id happens to give the same 'index' ordering (I think), but think we need to use eachBefore where the data isn't so conveniently ordered.
Thanks for any suggestions!
Declan
Update
I made a change in vega-hierarchy described here:
https://github.com/declann/vega/commit/a651ff36cd3f0897054aa1b236f82e701db62432
Now I can use pre_traversal_id from tree transform output to do indented trees, e.g.:
indented tree in (custom) vega-editor, with tree output including pre_traversal_id field
Modified spec: https://gist.github.com/declann/91fd150ae04016e5890a30295fa58a07
Not sure if this help, but, when I enter at vega.github.io/vega/examples/tree-layout I played with the controls and (after change the settings to: layout:tidy - links:orthogonal - separation:true) I got a similar result you shown in the observablehq page:
Open the Chart in the Vega Editor
Code:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "An example of Cartesian layouts for a node-link diagram of hierarchical data.",
"width": 600,
"height": 1600,
"padding": 5,
"signals": [
{
"name": "labels", "value": true
},
{
"name": "layout", "value": "tidy"
},
{
"name": "links", "value": "orthogonal"
}
],
"data": [
{
"name": "tree",
"url": "data/flare.json",
"transform": [
{
"type": "stratify",
"key": "id",
"parentKey": "parent"
},
{
"type": "tree",
"method": {"signal": "layout", "value": "tidy"},
"size": [{"signal": "height"}, {"signal": "width - 100"}],
"separation": true,
"as": ["y", "x", "depth", "children"]
}
]
},
{
"name": "links",
"source": "tree",
"transform": [
{ "type": "treelinks" },
{
"type": "linkpath",
"orient": "horizontal",
"shape": {"signal": "links"}
}
]
}
],
"scales": [
{
"name": "color",
"type": "linear",
"range": {"scheme": "greys"},
"domain": {"data": "tree", "field": "depth"},
"zero": true
}
],
"marks": [
{
"type": "path",
"from": {"data": "links"},
"encode": {
"update": {
"path": {"field": "path"},
"stroke": {"value": "#828282"}
}
}
},
{
"type": "symbol",
"from": {"data": "tree"},
"encode": {
"enter": {
"size": {"value": 25}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"fill": {"field": "depth"}
}
}
},
{
"type": "text",
"from": {"data": "tree"},
"encode": {
"enter": {
"text": {"field": "name"},
"baseline": {"value": "middle"}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"dx": {"signal": "datum.children ? -7 : 7"},
"align": {"signal": "datum.children ? 'right' : 'left'"}
}
}
}
]
}
I believe this is possible by adding expression transforms for x (based on tree_node depth) and y (based on the tree node id)
The gist of it is to transform x and y after the tree transform
{"type": "stratify", "key": "id", "parentKey": "parent"},
{
"type": "tree",
"method": {"signal": "layout"},
"size": [{"signal": "height"}, {"signal": "width - 100"}],
"separation": {"signal": "separation"},
"as": ["_", "_", "depth", "children"]
},
{"type": "formula", "expr": "datum.depth * 20", "as": "x"},
{"type": "formula", "expr": "datum.id * 14", "as": "y"}
Here's an example that modifies the Vega Tree layout example

How to create Grouped Bar Chart in Vegalite?

Name | Value 1 | Value 2
BTC | 1 | 2
ETH | 1 | 2
to this:
Tried to used this as an example: https://vega.github.io/vega-lite/examples/bar_grouped.html,
but I can't make it work.
Can someone please point me to the right direction? Thank you in advance.
Instead of using column provided in your question, You can simply use layers and keep the x axis as common and provide value1 and value2 in y axis of each layer respectively and simply provide some offset to show it as a grouped bar chart. Below is the basic spec configuration and editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"title": "My chart",
"width": 200,
"data": {
"values": [
{"name": "BTH", "value1": 28, "value2": 24, "legendTitle": "value1"},
{"name": "ETH", "value1": 55, "value2": 25, "legendTitle": "value2"}
]
},
"encoding": {
"x": {"field": "name", "type": "nominal", "axis": {"labelAngle": 0}}
},
"layer": [
{
"mark": {"type": "bar", "xOffset": -20, "size": 30, "color": "skyblue"},
"encoding": {
"y": {
"field": "value1",
"type": "quantitative",
"axis": {"title": null, "ticks": false}
}
}
},
{
"mark": {"type": "bar", "size": 30, "xOffset": 18, "color": "orange"},
"encoding": {
"y": {
"field": "value2",
"type": "quantitative",
"axis": {"title": null, "ticks": false}
}
}
},
{
"mark": {"type": "text"},
"encoding": {
"fill": {
"field": "legendTitle",
"scale": {"range": ["skyBlue", "orange"]},
"legend": {"title": null, "symbolType": "square", "orient": "bottom"}
}
}
}
]
}

Vega-Lite: is it possible to define a selection based on date/time range?

Apologies for the vague question, I'm not too sure how to completely phrase what I'm wanting to do, which hasn't helped my searching for solutions at all! I'm pretty new to javascript and vega-lite but am trying to upskill. As such I'm working on COVID19 data made available by the New Zealand Ministry of Health, and looking at how I can visualise the data. If interested here is my rough site thus far: https://sirselim.github.io/covid_analysis/
I'm trying to define all days that have been in lockdown here in NZ, since the 26th March 2020, and display these in a different colour, see below for my current solution which is I believe 95% of the way there:
So I have essentially what I want being displayed, however I am manually defining the dates in the scale element, which doesn't seem like the correct way to do things. I would have thought I should be able to define a date range and it would apply the formatting to dates that fall in the defined range. The other, smaller, tweak I would like to make is not listing the dates in the legend but just have [blue] no lockdown and [orange] lockdown.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega#5.10.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#4.9.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6.5.2"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"width": 580,
"height": 200,
"padding": 5,
"description": "simple vega-lite chart with linked data",
"title": "Confirmed COVID cases in NZ DHBs",
"data": {
"url": "https://raw.githubusercontent.com/sirselim/covid_analysis/master/data//NZCOVID_confirmed_formatted.json"
},
"transform": [{
"sort": [{"field": "Date of report"}],
"window": [{"op": "count", "field": "count", "as": "cumulative_count"}],
"frame": [null, 0]
}],
"mark": {
"type": "bar",
"tooltip": true
},
"encoding": {
"x": {
"field": "Date of report",
"type": "nominal"
},
"y": {
"field": "cumulative_count",
"type": "quantitative"
},
"color": {
"value": "steelblue",
"condition": {
"test": {
"field": "Date of report",
"range": [
"2020-03-26",
"2020-04-30"
]
},
"field": "Date of report",
"title": "Days in lockdown",
"type": "nominal",
"scale": {
"domain": [
"2020-03-26",
"2020-03-27",
"2020-03-28",
"2020-03-29",
"2020-03-30",
"2020-03-31",
"2020-04-01"
],
"range": [
"#FFA500",
"#FFA500"
]
}
}
}
}
};
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>
Thank you in advance to anyone with some insight!
If you're using a test condition for the color, you can specify the values you want directly, rather than defining them indirectly via a custom scale.
For example (vega editor):
{
"title": "Confirmed COVID cases in NZ DHBs",
"data": {
"url": "https://raw.githubusercontent.com/sirselim/covid_analysis/master/data//NZCOVID_confirmed_formatted.json"
},
"transform": [
{
"sort": [{"field": "Date of report"}],
"window": [{"op": "count", "field": "count", "as": "cumulative_count"}],
"frame": [null, 0]
}
],
"mark": {"type": "bar", "tooltip": true},
"encoding": {
"x": {"field": "Date of report", "type": "nominal"},
"y": {"field": "cumulative_count", "type": "quantitative"},
"color": {
"value": "steelblue",
"condition": {
"test": {"field": "Date of report", "gt": "2020-03-26"},
"value": "orange"
}
}
},
"width": 580,
"height": 200
}

How to change AmChart pie chart background?

How can I replace the color in the pie chart?
Please find my code below :
AmCharts.makeChart("pie-diagramm", {
"type": "pie",
"theme": "none",
"dataProvider": [{
"title": "Интернэшнл",
"value": 100
}, {
"title": "Казахстан",
"value": 90
},{
"title": "Лтд",
"value": 100
},
{
"title": "Лимитед",
"value": 400},
{
"title": "компания",
"value": 400},
{
"title": "ЛУКАРКО",
"value": 600},{
"title": "Компани",
"value": 700
},
{
"title": "«КазМунайГаз»",
"value": 900},{
"title": "КТК",
"value": 350},
{
"title": "Федерация",
"value": 1300},
{
"title": "Пайплайн",
"value": 90}
],
"titleField": "title",
"valueField": "value",
"labelRadius": 5,
"fontSize": 16,
"radius": "25%",
"innerRadius": "30%",
"labelText": "[[title]]",
"exportConfig": {
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
});
Thanks!
add color attribute in your DataProvider
dataProvider": [{
"title": "Интернэшнл",
"value": 100,
"color": "your choice of color"
}, {
"title": "Казахстан",
"value": 90,
"color": "your choice of color"
}
http://docs.amcharts.com/3/javascriptcharts/AmPieChart,
http://docs.amcharts.com/3/javascriptcharts/Slice
the dataprovider holds the property of each slice in pie chart
chart.chartData = dataProvider;
The best and most simple way to do this would be setting background-color style of your chart's container div. Or you can set chart.backgroundColor="#FF0000"; and chart.backgroundAlpha to some bigger than 0 value.