Related
This element of my Vega-lite does not pick up on the desired data. Im wanting the selector to filter data, depending upon the net-zero year
Are my options in the wrong format? Is having a mix of integers and "No Target Selected" invalidating my picked_store?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Equal earth map depicting CO2 emissions per capita. Some countries did not produce any estimates.",
"title": {
"text": "Greenhouse Gas Emissions Against CCS Readiness",
"subtitle": "CO₂ emissions (metric tonne per capita). Source: Our World in Data",
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "rgba(58, 59, 60)"
},
"height": 500,
"width": 545,
"background": null,
"data": {
"url": "https://raw.githubusercontent.com/jameseconnolly/jameseconnolly.github.io/main/Carbon_Capture_Requirement.csv",
"format": {"type": "csv"}
},
"layer": [
{
"selection": {
"picked": {
"empty": "none",
"bind": {
"Net-zero Target": {
"input": "select",
"options": [
"No Target Selected",
0,
2000,
2030,
2035,
2040,
2045,
2050,
2053,
2060,
2065,
2070
],
"name": "Net-zero Target:"
}
},
"type": "single",
"fields": ["Net-zero Target"]
},
"grid": {
"type": "interval",
"bind": "scales",
"on": "[mousedown, window:mouseup] > window:mousemove!",
"translate": "[mousedown, window:mouseup] > window:mousemove!",
"zoom": "wheel!",
"resolve": "global"
}
},
"mark": {"type": "point", "filled": true},
"encoding": {
"color": {
"value": "grey",
"condition": {
"field": "Cluster",
"selection": "picked",
"type": "nominal",
"legend": null
}
},
"size": {
"value": 60,
"condition": {"value": 120, "selection": "picked"}
},
"opacity": {
"value": 0.4,
"condition": {"value": 1, "selection": "picked"}
},
"x": {
"field": "Carbon Capture Requirement",
"scale": {"zero": false},
"type": "quantitative",
"title": null,
"axis": {
"grid": false,
"title": "Carbon Capture and Storage Readiness"
}
},
"y": {
"field": "log_GHG",
"scale": {"zero": false},
"type": "quantitative",
"axis": {
"grid": false,
"title": "Log Greenhouse Gas Emissions (MT CO2e)"
}
}
}
},
{
"data": {"values": [{"y": "17", "x": "0"}, {"y": "23", "x": "90"}]},
"mark": {"type": "line", "strokeDash": [9, 1], "color": "#ff0101"},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"}
}
},
{
"mark": {"type": "text", "x": 540, "align": "right", "y": 20, "size": 25},
"transform": [{"calculate": "0.1", "as": "R2"}],
"encoding": {"text": {"type": "nominal", "field": "R2"}}
}
]
}
Is the following what you want?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Equal earth map depicting CO2 emissions per capita. Some countries did not produce any estimates.",
"title": {
"text": "Greenhouse Gas Emissions Against CCS Readiness",
"subtitle": "CO₂ emissions (metric tonne per capita). Source: Our World in Data",
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "rgba(58, 59, 60)"
},
"height": 500,
"width": 545,
"data": {
"url": "https://raw.githubusercontent.com/jameseconnolly/jameseconnolly.github.io/main/Carbon_Capture_Requirement.csv",
"format": {"type": "csv"}
},
"layer": [
{
"params": [
{
"name": "year",
"select": {"type": "point", "fields": ["Net-zero Target"]},
"bind": {
"input": "select",
"options": [
"",
"2000.0",
"2030.0",
"2050.0"
]
}
}
],
"mark": {"type": "point", "filled": true},
"encoding": {
"color": {
"condition": {
"param": "year",
"field": "Net-zero Target",
"type": "nominal"
},
"value": "grey"
},
"size": {"value": 60},
"opacity": {"value": 0.4},
"x": {
"field": "Carbon Capture Requirement",
"scale": {"zero": false},
"type": "quantitative",
"title": null,
"axis": {
"grid": false,
"title": "Carbon Capture and Storage Readiness"
}
},
"y": {
"field": "log_GHG",
"scale": {"zero": false},
"type": "quantitative",
"axis": {
"grid": false,
"title": "Log Greenhouse Gas Emissions (MT CO2e)"
}
}
}
},
{
"data": {"values": [{"y": "17", "x": "0"}, {"y": "23", "x": "90"}]},
"mark": {"type": "line", "strokeDash": [9, 1], "color": "#ff0101"},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"}
}
},
{
"mark": {"type": "text", "x": 540, "align": "right", "y": 20, "size": 25},
"transform": [{"calculate": "0.1", "as": "R2"}],
"encoding": {"text": {"type": "nominal", "field": "R2"}}
}
]
}
In Vega Barline chart, I am looking help, when mouseover on Bar chart, line chart should be blur but all bar should be with opacity 1, similar when mouseover on line chart, bar chart should be blur.
In Vega Barline chart, I am looking help, when mouseover on Bar chart, line chart should be blur but all bar should be with opacity 1, similar when mouseover on line chart, bar chart should be blur.
I tried with below JSON
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"background": "transparent",
"width": 600,
"height": 300,
"style": "linear",
"data": [
{ "name": "barlineChart_store" },
{ "name": "barChart_store" },
{ "name": "lineChart_store" },
{
"name": "source_0",
"values": [ {
"year": 2013,
"value": 10
},
{
"year": 2014,
"value": 19
},
{
"year": 2015,
"value": 33
},
{
"year": 2016,
"value": 74
},
{
"year": 2017,
"value": 87
},
{
"year": 2018,
"value": 13
}, {
"year": 2019,
"value": 110
} ,
{
"year": 2020,
"value": 40
},
{
"year": 2021,
"value": 50
},{
"year": 2022,
"value": 49
}]
},
{
"name": "source_2",
"values": [ {
"year": 2013,
"value": 279670000
},
{
"year": 2014,
"value": 1017789660
},
{
"year": 2015,
"value": 4604761843
},
{
"year": 2016,
"value": 1829007526
},
{
"year": 2017,
"value": 21831592682
},
{
"year": 2018,
"value": 9236173024
},{
"year": 2019,
"value": 9848990024
},{
"year": 2020,
"value": 13365764829
},{
"year": 2021,
"value": 27294260073
},{
"year": 2022,
"value": 9982818889
}]
},
{
"name": "data_0",
"source": "source_0",
"transform": [
{
"type": "formula",
"expr": "timeParse(datum[\"year\"],'%Y')",
"as": "year",
},
{
"field": "year",
"type": "timeunit",
"units": ["year"],
"as": ["year_year", "year_year_end"],
},
{
"type": "stack",
"groupby": ["year_year"],
"field": "value",
"sort": { "field": [], "order": [] },
"as": ["value_start", "value_end"],
"offset": "zero",
},
{
"type": "filter",
"expr": "isValid(datum[\"value\"]) && isFinite(+datum[\"value\"])",
},
],
},
{
"name": "data_1",
"source": "source_2",
"transform": [
{
"type": "formula",
"expr": "timeParse(datum[\"year\"],'%Y')",
"as": "year",
},
{
"field": "year",
"type": "timeunit",
"units": ["year"],
"as": ["year_year", "year_year_end"],
},
],
},
{
"name": "data_2",
"source": "source_2",
"transform": [
{
"type": "formula",
"expr": "timeParse(datum[\"year\"],'%Y')",
"as": "year",
},
{
"field": "year",
"type": "timeunit",
"units": ["year"],
"as": ["year_year", "year_year_end"],
},
],
},
{
"name": "data_3",
"source": "data_2",
"transform": [
{
"type": "filter",
"expr": "isValid(datum[\"value\"]) && isFinite(+datum[\"value\"])",
},
],
},
],
"marks": [
{
"type": "group",
"name": "concat_0_group",
"signals": [
{
"name": "mouse__move",
"on": [
{
"events": [
{
"source": "scope",
"type": "mouseover",
},
],
"update":
"datum && item().mark.marktype !== \"group\" ? {unit: \"concat_0\", fields: recentTransaction_name, values: [(item().isVoronoi ? datum.datum : datum)[\"value\"]]} : null",
"force": true,
},
{
"events": [{ "source": "view", "type": "mouseout" }],
"update": "null",
},
],
},
{
"name": "recentTransaction_name",
"value": [{ "type": "E", "field": "value" }],
},
{
"name": "updated_barlinechart",
"on": [
{
"events": { "signal": "mouse__move" },
"update": "modify(\"barlineChart_store\", mouse__move, true)",
},
],
},
{
"name": "updated_linechart",
"on": [
{
"events": { "signal": "mouse__move" },
"update": "modify(\"lineChart_store\", mouse__move, true)",
},
],
},
{
"name": "updated_barchart",
"on": [
{
"events": { "signal": "mouse__move" },
"update": "modify(\"barChart_store\", mouse__move, true)",
},
],
},
],
"marks": [
{
"name": "bar",
"type": "rect",
"style": ["rect"],
"from": {"data": "data_0"},
"encode": {
"update": {
"fill": { "value": "#b14891" },
"description": {
"signal": "\"start (year): \" + (timeFormat(datum[\"year_start\"], timeUnitSpecifier([\"year\"], {\"year-month\":\"%b %Y \",\"year-month-date\":\"%b %d, %Y \"}))) + \"; end (year): \" + (timeFormat(datum[\"year_end\"], timeUnitSpecifier([\"year\"], {\"year-month\":\"%b %Y \",\"year-month-date\":\"%b %d, %Y \"})))"
},
"x": { "scale": "x", "field": "year_year" },
"width": { "scale": "x", "band": 1 },
"y": { "scale": "layer_0_y", "field": "value_end",
},
"y2": { "scale": "layer_0_y", "field": "value_start" },
"tooltip": {
"signal": "{'Value of Transactions': datum.value}",
},
"opacity": [
{
"test":
"(!length(data('barChart_store')) || vlSelectionTest('barChart_store', datum)) ",
"value": 1,
},
{ "value": 0.2 },
],
"fillopacity": [
{
"test":
"(length(data('barChart_store')) || vlSelectionTest('barChart_store', datum)) ",
"value": 1
},
{"value": 0.2}
],
},
"hover": {
"fillOpacity": {"value": 1}
}
}
},
{
"name": "line",
"type": "line",
"style": ["line"],
"from": { "data": "data_1" },
"encode": {
"update": {
"strokeWidth": { "value": 3 },
"stroke": { "value": "#35a4e8" },
"description": {
"signal":
"'year (year): ' + (timeFormat(datum['year_year'], '%Y'))",
},
"x": { "scale": "x", "field": "year_year", "band": 0.5 },
"y": { "scale": "layer_2_y", "field": "value" ,
},
"tooltip": {
"signal": "{'Value of Transactions': datum.value}",
},
"opacity": [
{
"test":
"(!length(data('barlineChart_store')) || vlSelectionTest('barlineChart_store', datum)) ",
"value": 1,
},
{ "value": 0.7 },
],
"hover": {
"fillOpacity": {"value": 1}
}
},
},
},
{
"name": "point",
"type": "symbol",
"style": ["point"],
"from": { "data": "data_1" },
"encode": {
"update": {
"fill": { "value": "#24242d" },
"stroke": { "value": "#35a4e8" },
"strokeWidth": { "value": 3.5 },
"size" : {"value": "100"},
"ariaRoleDescription": { "value": "point" },
"description": {
"signal":
"'year (year): ' + (timeFormat(datum['year_year'], '%Y'))",
},
"opacity": [
{
"test":
"(!length(data('barlineChart_store')) || vlSelectionTest('barlineChart_store', datum)) ",
"value": 1,
},
{ "value": 0.2 },
],
"x": { "scale": "x", "field": "year_year", "band": 0.5 },
"y": { "scale": "layer_2_y", "field": "value" },
"tooltip": {
"signal": "{'Value of Transactions': datum.value}",
},
},
},
}
],
},
],
"scales": [
{
"name": "x",
"type": "band",
"domain": {
"fields": [
{ "data": "data_0", "field": "year_year" },
{ "data": "data_1", "field": "year_year" },
{ "data": "data_2", "field": "year_year" },
],
"sort": true,
},
"range": [0, { "signal": "width" }],
"padding": 0.6,
},
{
"name": "layer_0_y",
"type": "linear",
"domain": { "data": "data_0", "fields": ["value_start", "value_end"] },
"range": [{ "signal": "height" }, 0],
"nice": true,
"zero": true,
},
{
"name": "layer_2_y",
"type": "linear",
"domain": {
"fields": [
{ "data": "data_2", "field": "value" },
],
},
"range": [{ "signal": "height" }, 0],
"nice": true,
"zero": true,
},
{
"name": "color",
"type": "ordinal",
"domain": ["Number of Transactions", "Value of Transactions"],
"range": ["#ca61aa", "#35a4e8"],
},
],
"axes": [
{
"scale": "x",
"orient": "bottom",
"grid": false,
"labelAngle": 0,
"format": "%Y",
"formatType": "time",
"labelBaseline": "top",
"labelFlush": true,
"labelOverlap": true,
"zindex": 0,
"labelPadding":10,
},
{
"scale": "layer_0_y",
"orient": "left",
"grid": true,
"labelOverlap": true,
"tickCount": { "signal": "ceil(height/80)" },
"zindex": 0,
"title":"Value",
"titleColor":"white",
"labelPadding":10,
},
{
"scale": "layer_2_y",
"orient": "right",
"grid": false,
"labelOverlap": true,
"tickCount": { "signal": "ceil(height/80)" },
"format":".2s",
"zindex": 0,
"title":"Amount",
"titleColor":"white",
"labelPadding":10,
},
],
"legends": [{ "labelColor": "#c4c4cd ", "fill": "color", "direction": "horizontal" ,"orient":"bottom",
"encode": {
"labels": {
"name": "category_legend_labels",
"interactive": true
},
"symbols": {
"name": "category_legend_symbols",
"interactive": true
},
"entries": {
"name": "category_legend_entries",
"interactive": true,
"update": {"fill": {"value": "transparent"}}
}
}}],
"config": { "axis": { "labelColor": "white", "title": "" ,"domain": false, "grid": false,"gridColor": "#979797", "ticks": false},"legend": { "columns":{"signal": "3"},"orient": "bottom",
"layout": {"bottom": {"anchor": "middle"}},
"labelColor": "white"}}
}
I have a scatter plot generated with contours code in Vega.
Plot looks like
Based on 3rd field, differentiated the points with colour as Blue and Green Dots, but couldn't see the difference very clearly.
Is it possible to Change the Shape and Colour (atleast one) of the points to make the difference more visible
Code
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"title": {
"text": "Outlier Distribution between Duration Vs Age",
"anchor": "middle",
"fontSize": 16,
"frame": "group",
"offset": 4
},
"signals": [
{
"name": "bandwidth", "value": 0.5,
"bind": {"input": "range", "min": -1, "max": 1, "step": 0.1}
}
],
"data": [
{
"name": "source",
"url" : {
"index": "tenant_id.model_training_artefact",
"body": {
"size":10000,
"_source": ["duration", "credit_amount", "asnm", "age", "outlier"]
}
}
"format": {"property": "hits.hits"},
},
{
"name": "density",
"source": "source",
"transform": [
{
"type": "kde2d",
"groupby": ["_source.outlier"],
"size": [{"signal": "width"}, {"signal": "height"}],
"x": {"expr": "scale('x', datum.duration)"},
"y": {"expr": "scale('y', datum.age)"},
"bandwidth": {"signal": "[bandwidth, bandwidth]"}
}
]
},
{
"name": "contours",
"source": "density",
"transform": [
{
"type": "isocontour",
"field": "grid",
"levels": 4
}
]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"round": true,
"nice": true,
"zero": true,
"domain": {"data": "source", "field": "_source.duration"},
"range": "width"
},
{
"name": "y",
"type": "linear",
"round": true,
"nice": true,
"zero": true,
"domain": {"data": "source", "field": "_source.age"},
"range": "height"
},
{
"name": "color",
"type": "ordinal",
"domain": {
"data": "source", "field": "_source.outlier",
"sort": {"order": "descending"}
},
"range": "category"
}
],
"axes": [
{
"scale": "x",
"grid": true,
"domain": false,
"orient": "bottom",
"tickCount": 5,
"title": "Duration"
},
{
"scale": "y",
"grid": true,
"domain": false,
"orient": "left",
"titlePadding": 5,
"title": "Age"
}
],
"legends": [
{"stroke": "color", "symbolType": "stroke"}
],
"marks": [
{
"name": "marks",
"type": "symbol",
"from": {"data": "source"},
"encode": {
"update": {
"x": {"scale": "x", "field": "_source.duration"},
"y": {"scale": "y", "field": "_source.age"},
"size": {"value": 50},
"fill": {"scale": "color" , "field": "_source.outlier"}
}
}
},
{
"type": "image",
"from": {"data": "density"},
"encode": {
"update": {
"x": {"value": 0},
"y": {"value": 0},
"width": {"signal": "width"},
"height": {"signal": "height"},
"aspect": {"value": false}
}
},
"transform": [
{
"type": "heatmap",
"field": "datum.grid",
"color": {"expr": "scale('color', datum.datum.outlier)"}
}
]
},
{
"type": "path",
"clip": true,
"from": {"data": "contours"},
"encode": {
"enter": {
"strokeWidth": {"value": 1},
"strokeOpacity": {"value": 1},
"stroke": {"scale": "color", "field": "outlier"}
}
},
"transform": [
{ "type": "geopath", "field": "datum.contour" }
]
}
]
}
Try defining scales for mark symbol color, shape and size.
For example, assuming your field outlier has 3 possible values:
"scales": [
...
{
"name": "scale_symbol_color",
"type": "ordinal",
"domain": {
"data": "source", "field": "_source.outlier",
"sort": {"order": "descending"}
},
"range": ["red", "orange", "blue"]
},
{
"name": "scale_symbol_shape",
"type": "ordinal",
"domain": {
"data": "source", "field": "_source.outlier",
"sort": {"order": "descending"}
},
"range": ["triangle", "square", "circle"]
},
{
"name": "scale_symbol_size",
"type": "ordinal",
"domain": {
"data": "source", "field": "_source.outlier",
"sort": {"order": "descending"}
},
"range": [400, 300, 200]
}
],
...
"marks": [
{
"name": "marks",
"type": "symbol",
"from": {"data": "source"},
"encode": {
"update": {
"x": {"scale": "x", "field": "_source.duration"},
"y": {"scale": "y", "field": "_source.age"},
"size": {"value": 50},
"fill": {"scale": "scale_symbol_color" , "field": "_source.outlier"},
"shape": {"scale": "scale_symbol_shape" , "field": "_source.outlier"},
"size": {"scale": "scale_symbol_size" , "field": "_source.outlier"},
}
}
},
...
Vega docs:
https://vega.github.io/vega/docs/scales/#ordinal
https://vega.github.io/vega/docs/marks/symbol/
I try to show timeseries data as point charts with two x-axis labels (2 text marks as my main x-axis attribute should not be displayed), mainly one at the top and one at the bottom. This works with a layered approach but as soon as I add the zoomable parameter to the visual, the text mark for the axes labels disappear. Is there a way on how to solve this issue?
That's how the visual looks like - without adding the zooming feature:
Timeseries point visual with two measure attributes and top and bottom x-axis label
What I’ve tried so far
I tried to position the params at different positions in the code as I am also using a vertical rule but it did not work out.
I also tried to make use of the scale resolve but I was neither successful.
Within the resolve, I tried to make use of the labelBound axis information and set it to false.
Basically, here is the code that I am currently using
{
"data": {
"name": "dataset"
},
"encoding": {
"x": {
"field": "TIMESTAMP",
"timeUnit": "utcyearmonthdatehoursminutes",
"type": "ordinal",
"axis": {
"grid": false,
"title": null,
"orient": "bottom",
"labels": false
}
}
},
"vconcat": [
{
"hconcat": [
{
"layer": [
{
"transform": [
{
"fold": [
"ATTRIBUTE1",
"ATTRIBUTE2"
],
"as": [
"measure1",
"temp1"
]
}
],
"mark": {
"type": "point",
"filled": true,
"size": 20
},
"height": 150,
"width": 700,
"encoding": {
"x": {
"timeUnit": "utcyearmonthdatehoursminutes",
"field": "TIMESTAMP",
"type": "ordinal",
"axis": {
"title": null,
"labels": false,
"ticks": false
}
},
"y": {
"field": "temp1",
"type": "quantitative",
"axis": {
"title": null
},
"scale": {
"zero": false,
"domain": [
450,
490
]
}
},
"color": {
"field": "measure1",
"type": "nominal",
"legend": {
"title": "Measures",
"orient": "right"
}
},
"opacity": {
"condition": [
{
"param": "legendhighlight",
"value": 1,
"empty": false
},
{
"param": "hover",
"value": 1,
"empty": false
}
],
"value": 0.1
}
}
},
{
"mark": {
"type": "text",
"align": "left",
"angle": -90,
"fontSize": 10
},
"encoding": {
"x": {
"timeUnit": "utcyearmonthdatehoursminutes",
"field": "TIMESTAMP",
"type": "ordinal",
"axis": {
"title": null,
"labels": false
}
},
"text": {
"field": "Attribute_TopX"
},
"y": {
"value": -5
},
"color": {
"condition": [
{
"test": "datum['COLORATTRIBUTE']=='COLOR_ITEM1'",
"value": "green"
},
{
"test": "datum['COLORATTRIBUTE']=='COLOR_ITEM2'",
"value": "steelblue"
}
],
"value": "black"
}
}
},{
"mark": {
"type": "text",
"align": "right",
"angle": -90,
"fontSize": 10
},
"encoding": {
"x": {
"timeUnit": "utcyearmonthdatehoursminutes",
"field": "TIMESTAMP",
"type": "ordinal",
"axis": {
"title": null,
"labels": false
}
},
"text": {
"field": "Attribute_BottomX"
},
"y": {
"value": "height"
},
"color": {
"condition": [
{
"test": "datum['COLORATTRIBUTE']=='COLOR_ITEM1'",
"value": "green"
},
{
"test": "datum['COLORATTRIBUTE']=='COLOR_ITEM2'",
"value": "steelblue"
}
],
"value": "black"
}
}
},
{
"mark": "rule",
"encoding": {
"x": {
"field": "TIMESTAMP",
"type": "temporal"
},
"opacity": {
"condition": [
{
"param": "hover",
"value": 0.8,
"empty": false
}
],
"value": 0
},
"size": {
"value": 1
},
"params": [
{
"name": "hover",
"select": {
"type": "point",
"encodings": [
"x"
],
"nearest": true,
"on": "mouseover"
}
},
{
"name": "legendhighlight",
"select": {
"type": "point",
"fields": [
"measure1"
]
},
"bind": "legend"
}
]
}
]
},
{
"layer": [
{
"transform": [
{
"fold": [
"ATTRIBUTE1",
"ATTRIBUTE2"
],
"as": [
"measure1",
"temp1"
]
}
],
"mark": {
"type": "boxplot"
},
"height": 150,
"width": 100,
"encoding": {
"x": {
"field": "measure1",
"type": "nominal",
"axis": {
"labels": false,
"ticks": false,
"title": null
}
},
"y": {
"field": "temp1",
"type": "quantitative",
"axis": {
"labels": false,
"ticks": false,
"title": null
},
"scale": {
"zero": false
}
},
"color": {
"field": "measure1",
"type": "nominal",
"legend": null
}
}
}
]
}
]
}
],
"resolve": {
"scale": {
"y": "independent",
"x": "shared",
"color": "independent"
}
}
}
And here is the params code that I try to add using Vega-Lite v5:
"params": [
{
"name": "grid",
"select": "interval",
"bind": "scales"
}
],
Thank you for your help!
What I want to do is really simple, but I just can't seem to get it right. I have a feeling I'm going to be embarrassed by the answer!
I have a line graph with "attempt" along the x-axis and "grade" along the y-axis, with grade being a number between 0 and 100. I simply want to change the y-axis so that, instead of seeing the raw number, a grade is show, say with 0 - 20 representing "E", 20-40 being "D" etc up to "A" (80-100). How can I do that? I don't want to use discrete values because I want to visually show where within a grade boundary a grade falls. I'm not sure whether I yet want to simply display the grade bands on the line or put them in the middle of their ticks, but just getting somewhere with this would help a lot!
Here is what I've been working with in the vega-lite editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"data": {
"values": [
{
"attempt": 1,
"score": 30
},
{
"attempt": 2,
"score": 60
},
{
"attempt": 3,
"score": 75
},
{
"attempt": 4,
"score": 58
},
{
"attempt": 5,
"score": 67
}
]
},
"mark": {
"type": "line",
"color": "#22bc9a",
"point": {
"filled": false
}
},
"encoding": {
"x": {
"field": "attempt",
"type": "quantitative",
"axis": {
"grid": false,
"tickCount": 5,
"title": "Attempt"
}
},
"y": {
"field": "score",
"scale": {"domain": [0, 100]},
"type": "quantitative",
"axis": {
"tickCount": 5,
"title": "Grade"
}
},
"opacity": {"value": 0.3}
},
"config": {
"autosize": "fit",
"axis": {
"labelColor": "#bebec8",
"tickColor": "#bebec8",
"titleColor": "black",
"titleFontWeight": "normal",
"titleFontSize": 11,
"labelFont": "Helvetica",
"titleFont": "Helvetica",
"gridOpacity": 0.4,
"gridWidth": 1.5,
"domain": false
},
"view": {
"strokeWidth": 0
}
}
}
Thanks in advance.
What about something like this: I add a dataframe with the grade category, and use this to layer some text. I remove the labels of the axis and so the text acts as if it were the labels of the axis.
The chart looks like this, and here is a link to the editor:
Schema (Note that I did it with Python's Altair, so it may not be canonical Vega-lite, and I did not use your settings either, sorry about that):
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
"config": {
"view": {
"height": 300,
"width": 400
}
},
"datasets": {
"data-1acee7c5d817865a529b53e022474ce8": [
{
"label": "E",
"x_min": 1,
"y_med": 10
},
{
"label": "D",
"x_min": 1,
"y_med": 30
},
{
"label": "C",
"x_min": 1,
"y_med": 50
},
{
"label": "B",
"x_min": 1,
"y_med": 70
},
{
"label": "A",
"x_min": 1,
"y_med": 90
}
],
"data-8e6359ea3034b8410708361bb10fafd5": [
{
"attempt": 1,
"score": 30
},
{
"attempt": 2,
"score": 60
},
{
"attempt": 3,
"score": 75
},
{
"attempt": 4,
"score": 58
},
{
"attempt": 5,
"score": 67
}
]
},
"layer": [
{
"data": {
"name": "data-1acee7c5d817865a529b53e022474ce8"
},
"encoding": {
"text": {
"field": "label",
"type": "ordinal"
},
"x": {
"field": "x_min",
"scale": {
"zero": false
},
"type": "quantitative"
},
"y": {
"axis": {
"labels": false,
"tickCount": 5,
"ticks": false
},
"field": "y_med",
"type": "quantitative"
}
},
"mark": {
"dx": -15,
"dy": 8,
"size": 15,
"type": "text"
}
},
{
"data": {
"name": "data-8e6359ea3034b8410708361bb10fafd5"
},
"encoding": {
"x": {
"axis": {
"tickCount": 5
},
"field": "attempt",
"title": "Attempt",
"type": "quantitative"
},
"y": {
"field": "score",
"scale": {
"domain": [
0,
100
]
},
"title": "Grade",
"type": "quantitative"
}
},
"mark": {
"point": true,
"type": "line"
}
}
]
}
Using a slighly modified dataframe for the categories (with x_max, y_min and y_max added), you can add another layer with colored rectangles, that can help read the values:
Here is a link to the editor
And here is the schema
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
"config": {
"view": {
"height": 300,
"width": 400
}
},
"datasets": {
"data-1acee7c5d817865a529b53e022474ce8": [
{
"label": "E",
"x_min": 1,
"y_med": 10
},
{
"label": "D",
"x_min": 1,
"y_med": 30
},
{
"label": "C",
"x_min": 1,
"y_med": 50
},
{
"label": "B",
"x_min": 1,
"y_med": 70
},
{
"label": "A",
"x_min": 1,
"y_med": 90
}
],
"data-39ffbda2b5d5fe96de84d9e308d920ff": [
{
"label": "E",
"x_max": 5,
"x_min": 1,
"y_max": 20,
"y_med": 10,
"y_min": 0
},
{
"label": "D",
"x_max": 5,
"x_min": 1,
"y_max": 40,
"y_med": 30,
"y_min": 20
},
{
"label": "C",
"x_max": 5,
"x_min": 1,
"y_max": 60,
"y_med": 50,
"y_min": 40
},
{
"label": "B",
"x_max": 5,
"x_min": 1,
"y_max": 80,
"y_med": 70,
"y_min": 60
},
{
"label": "A",
"x_max": 5,
"x_min": 1,
"y_max": 100,
"y_med": 90,
"y_min": 80
}
],
"data-8e6359ea3034b8410708361bb10fafd5": [
{
"attempt": 1,
"score": 30
},
{
"attempt": 2,
"score": 60
},
{
"attempt": 3,
"score": 75
},
{
"attempt": 4,
"score": 58
},
{
"attempt": 5,
"score": 67
}
]
},
"layer": [
{
"data": {
"name": "data-39ffbda2b5d5fe96de84d9e308d920ff"
},
"encoding": {
"color": {
"field": "label",
"scale": {
"scheme": "greenblue"
},
"type": "ordinal"
},
"x": {
"field": "x_min",
"scale": {
"zero": false
},
"title": "Attempt",
"type": "quantitative"
},
"x2": {
"field": "x_max",
"type": "quantitative"
},
"y": {
"axis": null,
"field": "y_min",
"type": "quantitative"
},
"y2": {
"field": "y_max",
"type": "quantitative"
}
},
"mark": "rect"
},
{
"data": {
"name": "data-1acee7c5d817865a529b53e022474ce8"
},
"encoding": {
"text": {
"field": "label",
"type": "ordinal"
},
"x": {
"field": "x_min",
"scale": {
"zero": false
},
"type": "quantitative"
},
"y": {
"axis": {
"labels": false,
"tickCount": 5,
"ticks": false
},
"field": "y_med",
"type": "quantitative"
}
},
"mark": {
"dx": -15,
"dy": 8,
"size": 15,
"type": "text"
}
},
{
"data": {
"name": "data-8e6359ea3034b8410708361bb10fafd5"
},
"encoding": {
"x": {
"axis": {
"tickCount": 5
},
"field": "attempt",
"title": "Attempt",
"type": "quantitative"
},
"y": {
"field": "score",
"scale": {
"domain": [
0,
100
]
},
"title": "Grade",
"type": "quantitative"
}
},
"mark": {
"point": true,
"type": "line"
}
}
]
}
To get it working, I first had to change the encoding of the x and y axis to be ordinal. Then I mapped your input data values to letter grades before creating the schema:
//replace every score value with correct letter grade
values.forEach(datapoint => {
if(datapoint.score > 90) {
datapoint.score = "A";
} else if(datapoint.score > 80) {
datapoint.score = "B";
} else if (datapoint.score > 70) {
//so on...
}
});
Here is a working example in the vega-lite editor:
Line Chart with Ordinal Values
Here is the schema:
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"data": {
"values": [
{
"attempt": 1,
"score": "F"
},
{
"attempt": 2,
"score": "D"
},
{
"attempt": 3,
"score": "C"
},
{
"attempt": 4,
"score": "F"
},
{
"attempt": 5,
"score": "D"
}
]
},
"mark": {
"type": "line",
"color": "#22bc9a",
"point": {
"filled": false
}
},
"encoding": {
"x": {
"field": "attempt",
"type": "ordinal",
"axis": {
"title": "Attempt"
}
},
"y": {
"field": "score",
"type": "ordinal",
"axis": {
"title": "Grade"
}
},
"opacity": {"value": 0.3}
},
"config": {
"autosize": "fit",
"axis": {
"labelColor": "#bebec8",
"tickColor": "#bebec8",
"titleColor": "black",
"titleFontWeight": "normal",
"titleFontSize": 11,
"labelFont": "Helvetica",
"titleFont": "Helvetica",
"gridOpacity": 0.4,
"gridWidth": 1.5
},
"view": {
"strokeWidth": 0
}
}
}