Skip to content

Instantly share code, notes, and snippets.

@PBI-DataVizzle

PBI-DataVizzle/highlight_line_on_hover.json

Created September 21, 2024 16:54
Show Gist options
  • Save PBI-DataVizzle/761ddc65d0d8151a6ac08d52fba0be16 to your computer and use it in GitHub Desktop.
Save PBI-DataVizzle/761ddc65d0d8151a6ac08d52fba0be16 to your computer and use it in GitHub Desktop.
Download ZIP
highlight_line_on_hover
Raw
highlight_line_on_hover.json
{
"$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"}
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment