As stated the map has a drop down menu that changes the display of the map, it selects different columns in the dataset. Ideally I would like to show a different "scheme" for input one and input two or what would also work in my case is to use "reverse" the "scale" encoding to reverse the color scheme for one of the two data columns being loaded
Code extract:
{"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"background":"white",
"view": {"stroke": "trasparent"}},
"width": 700,
"height": 500,
"data": {
"url": "https://unpkg.com/world-atlas#1.1.4/world/110m.json",
"format": {
"type": "topojson",
"feature": "countries"}
},
"projection": {
"type": "naturalEarth2"},
"mark": {
"type": "geoshape",
"stroke": "rgb(50, 50, 50)",
"strokeWidth":0.3},
"transform": [
{"calculate":"parseInt(datum.id)", "as":"id_N"},
{
"lookup": "id_N",
"from": {
"key": "id",
"fields": ["alpha3", "name"],
"data": {"url": "data1"}}
},
{"lookup": "alpha3",
"from":{
"data":{
"url":"data2"},
"key": "ISO3",
"fields":["Vulnerability", "Gain"]
}
},
{"calculate": "datum.Vulnerability", "as": "Climate Vulnerability"},
{"calculate": "datum.Gain", "as": "Overall Vulnerability Index"},
{"calculate": "datum[Select]","as": "varSelected"},
],
"params": [
{"name": "Select",
"value": "Vulnerability",
"bind": {
"input": "select",
"options": [
"Climate Vulnerability",
"Overall Vulnerability Index"]}}],
"encoding": {
"color":{
"field":"varSelected",
"type":"quantitative",
"title": null,
"scale":{
"scheme": {"name": "turbo", "count":5}
}
},
"tooltip":[
{"field":"name", "title":"Country"},
{"field":"varSelected","title":"Score","type":"quantitative"}],
}
In this VegaLite spec the y-axis order of the bottom-most barplot is updated as the data of that plot is filtered based on the selection in the scatter plot. How can I achieve the same resorting behavior for both the blue and orange bars in the top-most bar plot where I have layered the same barplot together with another chart?
I have tried toggling the axis between shared and independent and switching the order of the layer, but that didn't do it. Conceptually I can imagine using a calculate transform to define a new field that is based on the selection and used as the sort order key, but I can't figure out how to write this vega expression string.
Here is that Altair code if anyone prefers to solve it that way:
import altair as alt
import pandas as pd
data={
'Term': ['algorithm','learning','learning','algorithm','algorithm','learning'],
'Freq_x': [1330,1153,504.42,296.69,177.59,140.35],
'Total': [1330, 1353,1353.7,1330.47,1330.47,1353.7],
'Category': ['Default', 'Default', 'Topic1', 'Topic1', 'Topic2', 'Topic2'],
'logprob': [30.0, 27.0, -5.116, -5.1418, -5.4112, -5.5271],
'loglift': [30.0, 27.0, 0.0975, 0.0891, -0.1803, -0.3135],
'saliency_ind': [0, 3, 76, 77, 181, 186],
'x': [None,None,-0.0080,-0.0080,-0.0053,-0.0053],
'y': [None,None,-0.0056,-0.0056, 0.0003,0.0003],
'topics': [None,None, 1.0, 1.0, 2.0, 2.0],
'cluster': [None,None, 1.0, 1.0, 1.0, 1.0],
'Freq_y': [None,None,20.39,20.39,14.18,14.18]}
df=pd.DataFrame(data)
pts = alt.selection(type="single", fields=['Category'], empty='none')
points = alt.Chart(df).mark_circle().encode(
x='mean(x)',
y='mean(y)',
size='Freq_y',
detail='Category',
color=alt.condition(pts, alt.value('#F28E2B'), alt.value('#4E79A7'))
).add_selection(pts)
bars = alt.Chart(df).mark_bar().encode(
x='Freq_x',
y=alt.Y('Term'),
)
bars2 = alt.Chart(df).mark_bar(color='#F28E2B').encode(
x='Freq_x',
y=alt.Y('Term', sort='-x'),
).transform_filter(
pts
)
(points | (bars + bars2) & bars2)
The issue with your spec was that in layers you performed filter transform which created a separate data for each layers. Sorting was working at each level of layer but since both the layers data were separate so each layer was getting sorted inpendently.
So instead of having a filter transform, I tried to manual filter using calculate transform and created a filtered_freq_x field which is later used on 2nd layer and performed sorting using this on window. So with this my data becomes same for both layers, just few fields were added and used.
Let me know if this works for you not. Below is the spec config and editor:
{
"config": {"view": {"continuousWidth": 200, "continuousHeight": 300}},
"hconcat": [
{
"mark": "circle",
"encoding": {
"color": {
"condition": {"value": "#F28E2B", "selection": "selector046"},
"value": "#4E79A7"
},
"detail": {"type": "nominal", "field": "Category"},
"size": {"type": "quantitative", "field": "Freq_y"},
"x": {"type": "quantitative", "aggregate": "mean", "field": "x"},
"y": {"type": "quantitative", "aggregate": "mean", "field": "y"}
},
"selection": {
"selector046": {
"type": "single",
"fields": ["Category"],
"empty": "none"
}
}
},
{
"vconcat": [
{
"transform": [
{
"joinaggregate": [
{"field": "Freq_x", "op": "max", "as": "max_Fx"}
]
},
{
"calculate": "selector046['Category'] ? selector046['Category'] : []",
"as": "filterCategory"
},
{
"calculate": "indexof(datum.filterCategory,datum['Category']) > -1 ? datum['Freq_x'] : null",
"as": "filtered_Freq_x"
},
{
"sort": [{"field": "filtered_Freq_x", "order": "descending"}],
"window": [{"op": "rank", "as": "Sorted"}]
}
],
"height": 50,
"layer": [
{
"mark": "bar",
"encoding": {
"x": {"type": "quantitative", "field": "Freq_x"},
"y": {
"type": "nominal",
"field": "Term",
"sort": {"field": "Sorted"}
}
}
},
{
"mark": {"type": "bar", "color": "#F28E2B"},
"encoding": {
"x": {"type": "quantitative", "field": "filtered_Freq_x"},
"y": {
"type": "nominal",
"field": "Term",
"sort": {"field": "Sorted"}
}
}
}
]
},
{
"mark": {"type": "bar", "color": "#F28E2B"},
"encoding": {
"x": {"type": "quantitative", "field": "Freq_x"},
"y": {"type": "nominal", "field": "Term", "sort": "-x"}
},
"transform": [{"filter": {"selection": "selector046"}}]
}
]
}
],
"data": {"name": "data-d807cd22b94d04d6f1543201cfe5f45e"},
"$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json",
"datasets": {
"data-d807cd22b94d04d6f1543201cfe5f45e": [
{
"Term": "algorithm",
"Freq_x": 1330,
"Total": 1330,
"Category": "Default",
"logprob": 30,
"loglift": 30,
"saliency_ind": 0,
"x": null,
"y": null,
"topics": null,
"cluster": null,
"Freq_y": null
},
{
"Term": "learning",
"Freq_x": 1153,
"Total": 1353,
"Category": "Default",
"logprob": 27,
"loglift": 27,
"saliency_ind": 3,
"x": null,
"y": null,
"topics": null,
"cluster": null,
"Freq_y": null
},
{
"Term": "learning",
"Freq_x": 504.42,
"Total": 1353.7,
"Category": "Topic1",
"logprob": -5.116,
"loglift": 0.0975,
"saliency_ind": 76,
"x": -0.008,
"y": -0.0056,
"topics": 1,
"cluster": 1,
"Freq_y": 20.39
},
{
"Term": "algorithm",
"Freq_x": 296.69,
"Total": 1330.47,
"Category": "Topic1",
"logprob": -5.1418,
"loglift": 0.0891,
"saliency_ind": 77,
"x": -0.008,
"y": -0.0056,
"topics": 1,
"cluster": 1,
"Freq_y": 20.39
},
{
"Term": "algorithm",
"Freq_x": 177.59,
"Total": 1330.47,
"Category": "Topic2",
"logprob": -5.4112,
"loglift": -0.1803,
"saliency_ind": 181,
"x": -0.0053,
"y": 0.0003,
"topics": 2,
"cluster": 1,
"Freq_y": 14.18
},
{
"Term": "learning",
"Freq_x": 140.35,
"Total": 1353.7,
"Category": "Topic2",
"logprob": -5.5271,
"loglift": -0.3135,
"saliency_ind": 186,
"x": -0.0053,
"y": 0.0003,
"topics": 2,
"cluster": 1,
"Freq_y": 14.18
}
]
}
}
I have this bar chart that's made with Vega-lite (code and pic below).
But I want to customize the legend labels so that instead of videoGame it's Video Game and instead of tv its TV. Is there anyway to do this?
lineChart = vegalite ({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 560,
"height": 200,
"data": {"values": chartData},
"mark": {"type": "bar"},
"encoding": {
"x": {"field": "year_reference", "type": "temporal", "axis": {"title": "Year", "grid": true}},
"y": {"field": "reference_count_total", "type": "quantitative", "axis": {"title": "References", "grid": true}},
"color": {
"field": "title_type",
"scale": {
"domain": [
"tv",
"movie",
"video",
"videoGame"
],
"range": [
"#9e9ac8",
"#74c476",
"#a6761d",
"#6baed6"
]
},
"legend": true,
"title": "Reference Type"
},
}
})
Just provide labelExpr in legend, where you can conditionally give the labels depending on your fields data.
Refer the below code or the chart in editor
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 560,
"height": 200,
"data": {
"values": [
{
"title_type": "tv",
"year_reference": "10-12-2012",
"reference_count_total": 10
},
{
"title_type": "movie",
"year_reference": "10-12-2012",
"reference_count_total": 10
},
{
"title_type": "video",
"year_reference": "10-12-2012",
"reference_count_total": 10
},
{
"title_type": "videoGame",
"year_reference": "10-12-2012",
"reference_count_total": 10
}
]
},
"mark": {"type": "bar"},
"encoding": {
"x": {
"field": "year_reference",
"type": "temporal",
"axis": {"title": "Year", "grid": true}
},
"y": {
"field": "reference_count_total",
"type": "quantitative",
"axis": {"title": "References", "grid": true}
},
"color": {
"field": "title_type",
"scale": {
"domain": ["tv", "movie", "video", "videoGame"],
"range": ["#9e9ac8", "#74c476", "#a6761d", "#6baed6"]
},
"legend": {
"labelExpr": "datum.label == 'tv' ? 'Tv' : datum.label == 'movie' ? 'Movie' :datum.label == 'video' ? 'Video' : 'Video Game'"
},
"title": "Reference Type"
}
}
}
I need to group (and show) labels of X axis of a grahp, but still showing all single labels.
This is the code I actually use, and its a normal column2d graph:
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "column2d",
renderAt: "chart",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource: {
"chart": {
"animation": 0,
"caption": "Graph title",
"xAxisName": "Performance",
"baseFontColor": "#000000",
},
"data": [
{
"label": "351-08",
"value": "91"
},
{
"label": "351-09",
"value": "90"
},
{
"label": "351-10",
"value": "94"
},
{
"label": "351-01",
"value": "99"
},
{
"label": "351-07",
"value": "92"
},
{
"label": "351-06",
"value": "81"
},
],
"trendlines": [
{
"line": [
{
"startvalue": "82",
"color": "#ff3333",
"thickness": "5",
"valueOnRight": "1",
"displayvalue": "Average"
}
]
}
]
}
}).render();
});
What I need is showing another label on X axis that groups labels.
For example:
Group 1: [label1, label2];
Group 2: [label3, label4, label5];
Group 3: [label6];
UPDATED
I attached an image of what I need.
As you can see I need another labels line ("Fattore1", "Fattore2" and "Fattore3") that group other labels.
I'm using highcharts to make some data charts in a project and at the moment, doing it in 2D it works perfectly:
Chart working in 2D
This is a set of percentages for each month, with a red line that indicates the goal % to easily visualize whether or not a set of data is over or under that percentage.
The problem is now that I'm trying to make it 3D to give it more of a 'pop', I include the 3D library and enable it but the graph turns out like this:
Chart NOT working in 3D
Even though the bars display as intended, the line messes up and is nowhere near where it should be.
I've tried changing from spline to scatter with no success. Does anyone have any idea as to how I can fix this, or maybe a different way to present this "goal" so that you can easily see which bars are over or under it.
Thanks in advance!
PS: This is the JSON for the Highcharts options I'm using for 3D:
{
"chart": {
"options3d": {
"enabled": true,
"alpha": 0,
"beta": 0,
"depth": 20
}
},
"title": {
"text": "Title"
},
"xAxis": {
"categories": [
"a",
"b"
],
"crosshair": false,
"gridLineWidth": 1,
"min": 0,
"max": 1
},
"yAxis": {
"floor": 98,
"ceiling": 100,
"title": {
"text": "%"
}
},
"plotOptions": {
"column": {
"pointPadding": 0.2,
"borderWidth": 0
},
"scatter": {
"width": 10,
"height": 100,
"depth": 10
}
},
"series": [
{
"name": "ENERO",
"type": "column",
"data": [
99.8,
99.77
]
},
{
"name": "FEBRERO",
"type": "column",
"data": [
100,
99.83
]
},
{
"lineWidth": 1,
"name": "Meta (99.8%)",
"type": "scatter",
"color": "#FF0000",
"marker": {
"enabled": false
},
"legend": {
"enabled": false
},
"data": [
[
-1,
99.8,
2
],
[
2,
99.8,
2
]
]
}
]
}
The line chart is not fully supported in 3d, but if your goal is draw a line only, you can use plotLines.
"yAxis": {
"plotLines":[{
"value": 99.5,
"width": 2,
"color": 'red'
}],
"floor": 98,
"ceiling": 100,
"title": {
"text": "%"
}
},
Demo:
http://jsfiddle.net/v66zt28y