Vega-Lite line charts: labelling final point on hover
I'm using Vega-Lite for charts in an application and struggling to get desired interactivity. My goal is to label each line's final point with the Geography field - only on hover.
However, I can't get VL to label only the final point, and I can't get the text marks to appear only on hover.
I've borrowed code from VL examples, like this line chart with interactive label, but I'm running into two issues applying them to my spec. First, despite using the code below, the text is being labelled at every point - not just the max point of end_period.
"encoding": {
"x": {"aggregate": "max", "field": "end_period"},
"y": {"aggregate": {"argmax": "end_period"}, "field": "Value"}
},
Secondly, despite the condition testing for hover on the text encoding, all values are showing up without hovering.
I'm at the point where I can't tell why this isn't working, so am not sure where to go. Thanks in advance!
Full spec:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"range": {
"category": [
"#000000ff",
"#374c80",
"#ff764a",
"#bc5090",
"#ffa600",
"#ef5675"
]
},
"background": "#FFFFFF",
"axisX": {
"labelAngle": 0,
"labelOverlap": "parity",
"labelFontSize": 11,
"titleFontSize": 13,
"titleFont": "sans-serif",
"titlePadding": 10
},
"axisY": {"labelAngle": 0, "labelFontSize": 11, "tickMinStep": 1},
"legend": {
"columns": 6,
"labelFontSize": 14,
"symbolSize": 140,
"offset": 55.55555555555556
},
"view": {"stroke": "transparent"},
"line": {"color": "#1696d2", "stroke": "#1696d2", "strokeWidth": 2.5},
"point": {"filled": true},
"text": {"color": "#1696d2", "fontSize": 11, "fontWeight": 400, "size": 11}
},
"data": {
"values": [
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Citywide",
"TimePeriodID": 282,
"Value": 33,
"CI": "",
"Note": "",
"DisplayValue": "33.0",
"GeoRank": 0,
"GeoTypeDesc": "Citywide",
"GeoTypeShortDesc": "Citywide",
"Geography": "New York City",
"Lat": null,
"Long": null,
"TimePeriod": "2017-2019",
"start_period": 1483228800000,
"end_period": 1577750400000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Citywide",
"TimePeriodID": 278,
"Value": 37.7,
"CI": "",
"Note": "",
"DisplayValue": "37.7",
"GeoRank": 0,
"GeoTypeDesc": "Citywide",
"GeoTypeShortDesc": "Citywide",
"Geography": "New York City",
"Lat": null,
"Long": null,
"TimePeriod": "2015-2017",
"start_period": 1420070400000,
"end_period": 1514678400000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Citywide",
"TimePeriodID": 237,
"Value": 40.6,
"CI": "",
"Note": "",
"DisplayValue": "40.6",
"GeoRank": 0,
"GeoTypeDesc": "Citywide",
"GeoTypeShortDesc": "Citywide",
"Geography": "New York City",
"Lat": null,
"Long": null,
"TimePeriod": "2012-2014",
"start_period": 1325462400000,
"end_period": 1419984000000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Citywide",
"TimePeriodID": 177,
"Value": 48.2,
"CI": "",
"Note": "",
"DisplayValue": "48.2",
"GeoRank": 0,
"GeoTypeDesc": "Citywide",
"GeoTypeShortDesc": "Citywide",
"Geography": "New York City",
"Lat": null,
"Long": null,
"TimePeriod": "2009-2011",
"start_period": 1230768000000,
"end_period": 1325289600000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Citywide",
"TimePeriodID": 31,
"Value": 64.7,
"CI": "",
"Note": "",
"DisplayValue": "64.7",
"GeoRank": 0,
"GeoTypeDesc": "Citywide",
"GeoTypeShortDesc": "Citywide",
"Geography": "New York City",
"Lat": null,
"Long": null,
"TimePeriod": "2005-2007",
"start_period": 1104537600000,
"end_period": 1199059200000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Borough",
"TimePeriodID": 282,
"Value": 37,
"CI": "",
"Note": "",
"DisplayValue": "37.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Bronx",
"Lat": 40.8526,
"Long": -73.8665,
"TimePeriod": "2017-2019",
"start_period": 1483228800000,
"end_period": 1577750400000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Borough",
"TimePeriodID": 278,
"Value": 44.4,
"CI": "",
"Note": "",
"DisplayValue": "44.4",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Bronx",
"Lat": 40.8526,
"Long": -73.8665,
"TimePeriod": "2015-2017",
"start_period": 1420070400000,
"end_period": 1514678400000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Borough",
"TimePeriodID": 237,
"Value": 47.2892,
"CI": "",
"Note": "",
"DisplayValue": "47.3",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Bronx",
"Lat": 40.8526,
"Long": -73.8665,
"TimePeriod": "2012-2014",
"start_period": 1325462400000,
"end_period": 1419984000000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Borough",
"TimePeriodID": 177,
"Value": 55,
"CI": "",
"Note": "",
"DisplayValue": "55.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Bronx",
"Lat": 40.8526,
"Long": -73.8665,
"TimePeriod": "2009-2011",
"start_period": 1230768000000,
"end_period": 1325289600000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Borough",
"TimePeriodID": 31,
"Value": 76.5,
"CI": "",
"Note": "",
"DisplayValue": "76.5",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Bronx",
"Lat": 40.8526,
"Long": -73.8665,
"TimePeriod": "2005-2007",
"start_period": 1104537600000,
"end_period": 1199059200000
},
{
"MeasureID": 639,
"GeoID": 2,
"GeoType": "Borough",
"TimePeriodID": 282,
"Value": 35,
"CI": "",
"Note": "",
"DisplayValue": "35.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Brooklyn",
"Lat": 40.6447,
"Long": -73.9479,
"TimePeriod": "2017-2019",
"start_period": 1483228800000,
"end_period": 1577750400000
},
{
"MeasureID": 639,
"GeoID": 2,
"GeoType": "Borough",
"TimePeriodID": 278,
"Value": 38.3,
"CI": "",
"Note": "",
"DisplayValue": "38.3",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Brooklyn",
"Lat": 40.6447,
"Long": -73.9479,
"TimePeriod": "2015-2017",
"start_period": 1420070400000,
"end_period": 1514678400000
},
{
"MeasureID": 639,
"GeoID": 2,
"GeoType": "Borough",
"TimePeriodID": 237,
"Value": 40.9601,
"CI": "",
"Note": "",
"DisplayValue": "41.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Brooklyn",
"Lat": 40.6447,
"Long": -73.9479,
"TimePeriod": "2012-2014",
"start_period": 1325462400000,
"end_period": 1419984000000
},
{
"MeasureID": 639,
"GeoID": 2,
"GeoType": "Borough",
"TimePeriodID": 177,
"Value": 50.1,
"CI": "",
"Note": "",
"DisplayValue": "50.1",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Brooklyn",
"Lat": 40.6447,
"Long": -73.9479,
"TimePeriod": "2009-2011",
"start_period": 1230768000000,
"end_period": 1325289600000
},
{
"MeasureID": 639,
"GeoID": 2,
"GeoType": "Borough",
"TimePeriodID": 31,
"Value": 67.8,
"CI": "",
"Note": "",
"DisplayValue": "67.8",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Brooklyn",
"Lat": 40.6447,
"Long": -73.9479,
"TimePeriod": "2005-2007",
"start_period": 1104537600000,
"end_period": 1199059200000
},
{
"MeasureID": 639,
"GeoID": 3,
"GeoType": "Borough",
"TimePeriodID": 282,
"Value": 33,
"CI": "",
"Note": "",
"DisplayValue": "33.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Manhattan",
"Lat": 40.7772,
"Long": -73.9672,
"TimePeriod": "2017-2019",
"start_period": 1483228800000,
"end_period": 1577750400000
},
{
"MeasureID": 639,
"GeoID": 3,
"GeoType": "Borough",
"TimePeriodID": 278,
"Value": 38,
"CI": "",
"Note": "",
"DisplayValue": "38.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Manhattan",
"Lat": 40.7772,
"Long": -73.9672,
"TimePeriod": "2015-2017",
"start_period": 1420070400000,
"end_period": 1514678400000
},
{
"MeasureID": 639,
"GeoID": 3,
"GeoType": "Borough",
"TimePeriodID": 237,
"Value": 44.0231,
"CI": "",
"Note": "",
"DisplayValue": "44.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Manhattan",
"Lat": 40.7772,
"Long": -73.9672,
"TimePeriod": "2012-2014",
"start_period": 1325462400000,
"end_period": 1419984000000
},
{
"MeasureID": 639,
"GeoID": 3,
"GeoType": "Borough",
"TimePeriodID": 177,
"Value": 50,
"CI": "",
"Note": "",
"DisplayValue": "50.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Manhattan",
"Lat": 40.7772,
"Long": -73.9672,
"TimePeriod": "2009-2011",
"start_period": 1230768000000,
"end_period": 1325289600000
},
{
"MeasureID": 639,
"GeoID": 3,
"GeoType": "Borough",
"TimePeriodID": 31,
"Value": 64,
"CI": "",
"Note": "",
"DisplayValue": "64.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Manhattan",
"Lat": 40.7772,
"Long": -73.9672,
"TimePeriod": "2005-2007",
"start_period": 1104537600000,
"end_period": 1199059200000
},
{
"MeasureID": 639,
"GeoID": 4,
"GeoType": "Borough",
"TimePeriodID": 282,
"Value": 27,
"CI": "",
"Note": "",
"DisplayValue": "27.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Queens",
"Lat": 40.7076,
"Long": -73.8185,
"TimePeriod": "2017-2019",
"start_period": 1483228800000,
"end_period": 1577750400000
},
{
"MeasureID": 639,
"GeoID": 4,
"GeoType": "Borough",
"TimePeriodID": 278,
"Value": 31.4,
"CI": "",
"Note": "",
"DisplayValue": "31.4",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Queens",
"Lat": 40.7076,
"Long": -73.8185,
"TimePeriod": "2015-2017",
"start_period": 1420070400000,
"end_period": 1514678400000
},
{
"MeasureID": 639,
"GeoID": 4,
"GeoType": "Borough",
"TimePeriodID": 237,
"Value": 32.7629,
"CI": "",
"Note": "",
"DisplayValue": "32.8",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Queens",
"Lat": 40.7076,
"Long": -73.8185,
"TimePeriod": "2012-2014",
"start_period": 1325462400000,
"end_period": 1419984000000
},
{
"MeasureID": 639,
"GeoID": 4,
"GeoType": "Borough",
"TimePeriodID": 177,
"Value": 40.5,
"CI": "",
"Note": "",
"DisplayValue": "40.5",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Queens",
"Lat": 40.7076,
"Long": -73.8185,
"TimePeriod": "2009-2011",
"start_period": 1230768000000,
"end_period": 1325289600000
},
{
"MeasureID": 639,
"GeoID": 4,
"GeoType": "Borough",
"TimePeriodID": 31,
"Value": 54.8,
"CI": "",
"Note": "",
"DisplayValue": "54.8",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Queens",
"Lat": 40.7076,
"Long": -73.8185,
"TimePeriod": "2005-2007",
"start_period": 1104537600000,
"end_period": 1199059200000
},
{
"MeasureID": 639,
"GeoID": 5,
"GeoType": "Borough",
"TimePeriodID": 282,
"Value": 43,
"CI": "",
"Note": "",
"DisplayValue": "43.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Staten Island",
"Lat": 40.5808,
"Long": -74.1534,
"TimePeriod": "2017-2019",
"start_period": 1483228800000,
"end_period": 1577750400000
},
{
"MeasureID": 639,
"GeoID": 5,
"GeoType": "Borough",
"TimePeriodID": 278,
"Value": 46.9,
"CI": "",
"Note": "",
"DisplayValue": "46.9",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Staten Island",
"Lat": 40.5808,
"Long": -74.1534,
"TimePeriod": "2015-2017",
"start_period": 1420070400000,
"end_period": 1514678400000
},
{
"MeasureID": 639,
"GeoID": 5,
"GeoType": "Borough",
"TimePeriodID": 237,
"Value": 47.8475,
"CI": "",
"Note": "",
"DisplayValue": "47.8",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Staten Island",
"Lat": 40.5808,
"Long": -74.1534,
"TimePeriod": "2012-2014",
"start_period": 1325462400000,
"end_period": 1419984000000
},
{
"MeasureID": 639,
"GeoID": 5,
"GeoType": "Borough",
"TimePeriodID": 177,
"Value": 51.7,
"CI": "",
"Note": "",
"DisplayValue": "51.7",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Staten Island",
"Lat": 40.5808,
"Long": -74.1534,
"TimePeriod": "2009-2011",
"start_period": 1230768000000,
"end_period": 1325289600000
},
{
"MeasureID": 639,
"GeoID": 5,
"GeoType": "Borough",
"TimePeriodID": 31,
"Value": 70.7,
"CI": "",
"Note": "",
"DisplayValue": "70.7",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Staten Island",
"Lat": 40.5808,
"Long": -74.1534,
"TimePeriod": "2005-2007",
"start_period": 1104537600000,
"end_period": 1199059200000
}
]
},
"width": "container",
"height": 350,
"title": {
"text": "Title",
"subtitlePadding": 10,
"fontWeight": "normal",
"anchor": "start",
"fontSize": 18,
"font": "sans-serif",
"baseline": "top",
"subtitle": "Subtitle",
"dy": -10,
"subtitleFontSize": 13
},
"transform": [
{"calculate": "split(datum.TimePeriod, ' ')", "as": "TimePeriodSplit"},
{
"calculate": "datum.TimePeriodSplit[datum.TimePeriodSplit.length - 1]",
"as": "TimePeriodYear"
},
{"calculate": "year(datum.end_period)", "as": "year_end_period"},
{
"calculate": "datum.year_end_period % 2 === 0 ? datum.TimePeriodSplit : ''",
"as": "fallbackYear"
}
],
"encoding": {
"x": {
"field": "end_period",
"type": "quantitative",
"title": null,
"axis": {"labels": false, "grid": false, "ticks": false}
},
"y": {
"field": "Value",
"type": "quantitative",
"title": null,
"axis": {"tickCount": 4},
"scale": {"domainMin": 0, "nice": true}
},
"color": {
"condition": {
"param": "hover",
"field": "Geography",
"type": "nominal",
"sort": true,
"legend": {
"orient": "bottom",
"title": null,
"labelLimit": 1000,
"labelFontSize": 10
}
},
"value": "gray"
},
"opacity": {"condition": {"param": "hover", "value": 1}, "value": 0.35},
"tooltip": [
{"title": "Time", "field": "TimePeriod"},
{"title": "Geography", "field": "Geography"},
{"title": "Value", "field": "Value"}
]
},
"layer": [
{
"description": "Transparent layer to easier trigger hover",
"params": [
{
"name": "hover",
"select": {
"type": "point",
"fields": ["Geography"],
"on": "pointerover"
}
}
],
"mark": {"type": "line", "strokeWidth": 10, "stroke": "transparent"}
},
{"mark": {"type": "line", "strokeWidth": 4, "point": {"size": 70}}},
{
"encoding": {
"x": {"aggregate": "max", "field": "end_period"},
"y": {"aggregate": {"argmax": "end_period"}, "field": "Value"}
},
"layer": [
{
"mark": {"type": "text", "align": "left", "dx": 4},
"encoding": {
"text": {
"condition": {"param": "hover", "field": "Geography"},
"value": ""
}
}
}
]
},
{
"mark": {"type": "text", "fontWeight": 100, "fontSize": 10},
"encoding": {
"x": {
"field": "end_period",
"type": "quantitative",
"axis": {"labels": false, "grid": false, "ticks": false}
},
"y": {"value": 375},
"text": {"field": "TimePeriodSplit", "type": "nominal"},
"color": {"value": "black"}
}
},
{
"mark": {"type": "tick"},
"encoding": {
"x": {
"field": "end_period",
"type": "quantitative",
"axis": {"labels": false, "grid": false, "ticks": true}
},
"y": {"value": 350},
"color": {"value": "black"}
}
}
]
}
Solution
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"range": {
"category": [
"#000000ff",
"#374c80",
"#ff764a",
"#bc5090",
"#ffa600",
"#ef5675"
]
},
"background": "#FFFFFF",
"axisX": {
"labelAngle": 0,
"labelOverlap": "parity",
"labelFontSize": 11,
"titleFontSize": 13,
"titleFont": "sans-serif",
"titlePadding": 10
},
"axisY": {"labelAngle": 0, "labelFontSize": 11, "tickMinStep": 1},
"legend": {
"columns": 6,
"labelFontSize": 14,
"symbolSize": 140,
"offset": 55.55555555555556
},
"view": {"stroke": "transparent"},
"line": {"color": "#1696d2", "stroke": "#1696d2", "strokeWidth": 2.5},
"point": {"filled": true},
"text": {"color": "#1696d2", "fontSize": 11, "fontWeight": 400, "size": 11}
},
"data": {
"values": [
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Citywide",
"TimePeriodID": 282,
"Value": 33,
"CI": "",
"Note": "",
"DisplayValue": "33.0",
"GeoRank": 0,
"GeoTypeDesc": "Citywide",
"GeoTypeShortDesc": "Citywide",
"Geography": "New York City",
"Lat": null,
"Long": null,
"TimePeriod": "2017-2019",
"start_period": 1483228800000,
"end_period": 1577750400000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Citywide",
"TimePeriodID": 278,
"Value": 37.7,
"CI": "",
"Note": "",
"DisplayValue": "37.7",
"GeoRank": 0,
"GeoTypeDesc": "Citywide",
"GeoTypeShortDesc": "Citywide",
"Geography": "New York City",
"Lat": null,
"Long": null,
"TimePeriod": "2015-2017",
"start_period": 1420070400000,
"end_period": 1514678400000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Citywide",
"TimePeriodID": 237,
"Value": 40.6,
"CI": "",
"Note": "",
"DisplayValue": "40.6",
"GeoRank": 0,
"GeoTypeDesc": "Citywide",
"GeoTypeShortDesc": "Citywide",
"Geography": "New York City",
"Lat": null,
"Long": null,
"TimePeriod": "2012-2014",
"start_period": 1325462400000,
"end_period": 1419984000000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Citywide",
"TimePeriodID": 177,
"Value": 48.2,
"CI": "",
"Note": "",
"DisplayValue": "48.2",
"GeoRank": 0,
"GeoTypeDesc": "Citywide",
"GeoTypeShortDesc": "Citywide",
"Geography": "New York City",
"Lat": null,
"Long": null,
"TimePeriod": "2009-2011",
"start_period": 1230768000000,
"end_period": 1325289600000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Citywide",
"TimePeriodID": 31,
"Value": 64.7,
"CI": "",
"Note": "",
"DisplayValue": "64.7",
"GeoRank": 0,
"GeoTypeDesc": "Citywide",
"GeoTypeShortDesc": "Citywide",
"Geography": "New York City",
"Lat": null,
"Long": null,
"TimePeriod": "2005-2007",
"start_period": 1104537600000,
"end_period": 1199059200000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Borough",
"TimePeriodID": 282,
"Value": 37,
"CI": "",
"Note": "",
"DisplayValue": "37.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Bronx",
"Lat": 40.8526,
"Long": -73.8665,
"TimePeriod": "2017-2019",
"start_period": 1483228800000,
"end_period": 1577750400000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Borough",
"TimePeriodID": 278,
"Value": 44.4,
"CI": "",
"Note": "",
"DisplayValue": "44.4",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Bronx",
"Lat": 40.8526,
"Long": -73.8665,
"TimePeriod": "2015-2017",
"start_period": 1420070400000,
"end_period": 1514678400000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Borough",
"TimePeriodID": 237,
"Value": 47.2892,
"CI": "",
"Note": "",
"DisplayValue": "47.3",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Bronx",
"Lat": 40.8526,
"Long": -73.8665,
"TimePeriod": "2012-2014",
"start_period": 1325462400000,
"end_period": 1419984000000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Borough",
"TimePeriodID": 177,
"Value": 55,
"CI": "",
"Note": "",
"DisplayValue": "55.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Bronx",
"Lat": 40.8526,
"Long": -73.8665,
"TimePeriod": "2009-2011",
"start_period": 1230768000000,
"end_period": 1325289600000
},
{
"MeasureID": 639,
"GeoID": 1,
"GeoType": "Borough",
"TimePeriodID": 31,
"Value": 76.5,
"CI": "",
"Note": "",
"DisplayValue": "76.5",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Bronx",
"Lat": 40.8526,
"Long": -73.8665,
"TimePeriod": "2005-2007",
"start_period": 1104537600000,
"end_period": 1199059200000
},
{
"MeasureID": 639,
"GeoID": 2,
"GeoType": "Borough",
"TimePeriodID": 282,
"Value": 35,
"CI": "",
"Note": "",
"DisplayValue": "35.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Brooklyn",
"Lat": 40.6447,
"Long": -73.9479,
"TimePeriod": "2017-2019",
"start_period": 1483228800000,
"end_period": 1577750400000
},
{
"MeasureID": 639,
"GeoID": 2,
"GeoType": "Borough",
"TimePeriodID": 278,
"Value": 38.3,
"CI": "",
"Note": "",
"DisplayValue": "38.3",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Brooklyn",
"Lat": 40.6447,
"Long": -73.9479,
"TimePeriod": "2015-2017",
"start_period": 1420070400000,
"end_period": 1514678400000
},
{
"MeasureID": 639,
"GeoID": 2,
"GeoType": "Borough",
"TimePeriodID": 237,
"Value": 40.9601,
"CI": "",
"Note": "",
"DisplayValue": "41.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Brooklyn",
"Lat": 40.6447,
"Long": -73.9479,
"TimePeriod": "2012-2014",
"start_period": 1325462400000,
"end_period": 1419984000000
},
{
"MeasureID": 639,
"GeoID": 2,
"GeoType": "Borough",
"TimePeriodID": 177,
"Value": 50.1,
"CI": "",
"Note": "",
"DisplayValue": "50.1",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Brooklyn",
"Lat": 40.6447,
"Long": -73.9479,
"TimePeriod": "2009-2011",
"start_period": 1230768000000,
"end_period": 1325289600000
},
{
"MeasureID": 639,
"GeoID": 2,
"GeoType": "Borough",
"TimePeriodID": 31,
"Value": 67.8,
"CI": "",
"Note": "",
"DisplayValue": "67.8",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Brooklyn",
"Lat": 40.6447,
"Long": -73.9479,
"TimePeriod": "2005-2007",
"start_period": 1104537600000,
"end_period": 1199059200000
},
{
"MeasureID": 639,
"GeoID": 3,
"GeoType": "Borough",
"TimePeriodID": 282,
"Value": 33,
"CI": "",
"Note": "",
"DisplayValue": "33.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Manhattan",
"Lat": 40.7772,
"Long": -73.9672,
"TimePeriod": "2017-2019",
"start_period": 1483228800000,
"end_period": 1577750400000
},
{
"MeasureID": 639,
"GeoID": 3,
"GeoType": "Borough",
"TimePeriodID": 278,
"Value": 38,
"CI": "",
"Note": "",
"DisplayValue": "38.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Manhattan",
"Lat": 40.7772,
"Long": -73.9672,
"TimePeriod": "2015-2017",
"start_period": 1420070400000,
"end_period": 1514678400000
},
{
"MeasureID": 639,
"GeoID": 3,
"GeoType": "Borough",
"TimePeriodID": 237,
"Value": 44.0231,
"CI": "",
"Note": "",
"DisplayValue": "44.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Manhattan",
"Lat": 40.7772,
"Long": -73.9672,
"TimePeriod": "2012-2014",
"start_period": 1325462400000,
"end_period": 1419984000000
},
{
"MeasureID": 639,
"GeoID": 3,
"GeoType": "Borough",
"TimePeriodID": 177,
"Value": 50,
"CI": "",
"Note": "",
"DisplayValue": "50.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Manhattan",
"Lat": 40.7772,
"Long": -73.9672,
"TimePeriod": "2009-2011",
"start_period": 1230768000000,
"end_period": 1325289600000
},
{
"MeasureID": 639,
"GeoID": 3,
"GeoType": "Borough",
"TimePeriodID": 31,
"Value": 64,
"CI": "",
"Note": "",
"DisplayValue": "64.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Manhattan",
"Lat": 40.7772,
"Long": -73.9672,
"TimePeriod": "2005-2007",
"start_period": 1104537600000,
"end_period": 1199059200000
},
{
"MeasureID": 639,
"GeoID": 4,
"GeoType": "Borough",
"TimePeriodID": 282,
"Value": 27,
"CI": "",
"Note": "",
"DisplayValue": "27.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Queens",
"Lat": 40.7076,
"Long": -73.8185,
"TimePeriod": "2017-2019",
"start_period": 1483228800000,
"end_period": 1577750400000
},
{
"MeasureID": 639,
"GeoID": 4,
"GeoType": "Borough",
"TimePeriodID": 278,
"Value": 31.4,
"CI": "",
"Note": "",
"DisplayValue": "31.4",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Queens",
"Lat": 40.7076,
"Long": -73.8185,
"TimePeriod": "2015-2017",
"start_period": 1420070400000,
"end_period": 1514678400000
},
{
"MeasureID": 639,
"GeoID": 4,
"GeoType": "Borough",
"TimePeriodID": 237,
"Value": 32.7629,
"CI": "",
"Note": "",
"DisplayValue": "32.8",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Queens",
"Lat": 40.7076,
"Long": -73.8185,
"TimePeriod": "2012-2014",
"start_period": 1325462400000,
"end_period": 1419984000000
},
{
"MeasureID": 639,
"GeoID": 4,
"GeoType": "Borough",
"TimePeriodID": 177,
"Value": 40.5,
"CI": "",
"Note": "",
"DisplayValue": "40.5",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Queens",
"Lat": 40.7076,
"Long": -73.8185,
"TimePeriod": "2009-2011",
"start_period": 1230768000000,
"end_period": 1325289600000
},
{
"MeasureID": 639,
"GeoID": 4,
"GeoType": "Borough",
"TimePeriodID": 31,
"Value": 54.8,
"CI": "",
"Note": "",
"DisplayValue": "54.8",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Queens",
"Lat": 40.7076,
"Long": -73.8185,
"TimePeriod": "2005-2007",
"start_period": 1104537600000,
"end_period": 1199059200000
},
{
"MeasureID": 639,
"GeoID": 5,
"GeoType": "Borough",
"TimePeriodID": 282,
"Value": 43,
"CI": "",
"Note": "",
"DisplayValue": "43.0",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Staten Island",
"Lat": 40.5808,
"Long": -74.1534,
"TimePeriod": "2017-2019",
"start_period": 1483228800000,
"end_period": 1577750400000
},
{
"MeasureID": 639,
"GeoID": 5,
"GeoType": "Borough",
"TimePeriodID": 278,
"Value": 46.9,
"CI": "",
"Note": "",
"DisplayValue": "46.9",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Staten Island",
"Lat": 40.5808,
"Long": -74.1534,
"TimePeriod": "2015-2017",
"start_period": 1420070400000,
"end_period": 1514678400000
},
{
"MeasureID": 639,
"GeoID": 5,
"GeoType": "Borough",
"TimePeriodID": 237,
"Value": 47.8475,
"CI": "",
"Note": "",
"DisplayValue": "47.8",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Staten Island",
"Lat": 40.5808,
"Long": -74.1534,
"TimePeriod": "2012-2014",
"start_period": 1325462400000,
"end_period": 1419984000000
},
{
"MeasureID": 639,
"GeoID": 5,
"GeoType": "Borough",
"TimePeriodID": 177,
"Value": 51.7,
"CI": "",
"Note": "",
"DisplayValue": "51.7",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Staten Island",
"Lat": 40.5808,
"Long": -74.1534,
"TimePeriod": "2009-2011",
"start_period": 1230768000000,
"end_period": 1325289600000
},
{
"MeasureID": 639,
"GeoID": 5,
"GeoType": "Borough",
"TimePeriodID": 31,
"Value": 70.7,
"CI": "",
"Note": "",
"DisplayValue": "70.7",
"GeoRank": 1,
"GeoTypeDesc": "Borough",
"GeoTypeShortDesc": "Borough",
"Geography": "Staten Island",
"Lat": 40.5808,
"Long": -74.1534,
"TimePeriod": "2005-2007",
"start_period": 1104537600000,
"end_period": 1199059200000
}
]
},
"width": 400,
"height": 350,
"title": {
"text": "Title",
"subtitlePadding": 10,
"fontWeight": "normal",
"anchor": "start",
"fontSize": 18,
"font": "sans-serif",
"baseline": "top",
"subtitle": "Subtitle",
"dy": -10,
"subtitleFontSize": 13
},
"transform": [
{"calculate": "split(datum.TimePeriod, ' ')", "as": "TimePeriodSplit"},
{
"calculate": "datum.TimePeriodSplit[datum.TimePeriodSplit.length - 1]",
"as": "TimePeriodYear"
},
{"calculate": "year(datum.end_period)", "as": "year_end_period"},
{
"calculate": "datum.year_end_period % 2 === 0 ? datum.TimePeriodSplit : ''",
"as": "fallbackYear"
}
],
"encoding": {
"x": {
"field": "end_period",
"type": "quantitative",
"title": null,
"axis": {"labels": false, "grid": false, "ticks": false}
},
"y": {
"field": "Value",
"type": "quantitative",
"title": null,
"axis": {"tickCount": 4},
"scale": {"domainMin": 0, "nice": true}
},
"color": {
"condition": {
"param": "hover",
"field": "Geography",
"type": "nominal",
"sort": true,
"legend": {
"orient": "bottom",
"title": null,
"labelLimit": 1000,
"labelFontSize": 10
}
},
"value": "gray"
},
"opacity": {"condition": {"param": "hover", "value": 1}, "value": 0.35},
"tooltip": [
{"title": "Time", "field": "TimePeriod"},
{"title": "Geography", "field": "Geography"},
{"title": "Value", "field": "Value"}
]
},
"layer": [
{
"description": "Transparent layer to easier trigger hover",
"params": [
{
"name": "hover",
"select": {
"type": "point",
"fields": ["Geography"],
"on": "pointerover"
}
}
],
"mark": {"type": "line", "strokeWidth": 10, "stroke": "transparent"}
},
{"mark": {"type": "line", "strokeWidth": 4, "point": {"size": 70}}},
{
"transform": [
{
"aggregate": [
{"op": "argmax", "field": "end_period", "as": "Value"},
{"op": "max", "field": "end_period", "as": "end_period"}
],
"groupby": ["Geography"]
}
],
"encoding": {
"x": {"field": "end_period"},
"y": {"field": "Value['Value']"},
"text": {
"condition": {"param": "hover", "field": "Geography", "empty": false},
"value": ""
}
},
"mark": {"type": "text", "align": "left", "dx": 4}
},
{
"mark": {"type": "text", "fontWeight": 100, "fontSize": 10},
"encoding": {
"x": {
"field": "end_period",
"type": "quantitative",
"axis": {"labels": false, "grid": false, "ticks": false}
},
"y": {"value": 375},
"text": {"field": "TimePeriodSplit", "type": "nominal"},
"color": {"value": "black"}
}
},
{
"mark": {"type": "tick"},
"encoding": {
"x": {
"field": "end_period",
"type": "quantitative",
"axis": {"labels": false, "grid": false, "ticks": true}
},
"y": {"value": 350},
"color": {"value": "black"}
}
}
]
}
- How to return JSON objects without explicit aliasing in postgresql
- jq: assigning to computed property of an object
- is form enctype "application/json" available?
- How do I deserialize JSON in Rust when combining a flattened component with the need to convert keys?
- How to sort order of stacked bar
- How can I parse (read) and use JSON in Python?
- How to recursively print the path of all keys in jq
- Accessing a Variant/Object/JScriptTypeInfo property in VBA
- Using jq to group-concat fields by field name prefix
- How to parse json in flutter Dart
- how to convert json string to json object in dart flutter?
- How Best to Extract Specific JSON Key-Value Pairs in Snowflake
- laravel crashed when I use trait to auto update some values
- Object Serialization to JSON (using Gson). How to set field names in UpperCamelCase?
- How to parse JSON response in filemaker script
- Importing JSON file in TypeScript
- Formatting parameters for C# HttpClient.PostAsJsonAsync
- Swift - Wrong date format (JSON .NET)
- JSON vs JSON Array in .NET Web API - Bandwidth V2
- Jolt transform JSON to different JSON structure
- Is there a way in PHP to strip whitespace from JSON without using ob_gzhandler?
- How can I separate a .json file by keys stored in a different .json file?
- What is the difference between using express.urlencoded() with extended set to true vs set to false + manual JSON stringify/parse calls?
- How to globally set default options for System.Text.Json.JsonSerializer?
- Can I encode and decode a JSON on the GPU using MetalKit?
- Java - Magento2 rest api product upload with image silently fails
- Filtering mysql data using nested json_table returns "Incorrect arguments"
- Can I turn a Pandas Dataframe column containing a jJSON string into additional columns and rows?
- Convert an array of unsigned short to JSON using the nlohmann library
- Redshift COPY with JSON PATH Case Sensitivity