Vega-Lite 折线图:在悬停时标记最终点

问题描述 投票:0回答:1

我在应用程序中使用 Vega-Lite 绘制图表,并努力获得所需的交互性。我的目标是用“地理”字段标记每条线的终点 - 仅在悬停时。

但是,我无法让 VL 仅标记最后一点,并且无法让文本标记仅在悬停时出现。

我借用了 VL 示例中的代码,例如带有交互式标签的折线图,但在将它们应用到我的规范时遇到了两个问题。首先,尽管使用下面的代码,但文本在每个点都被标记 - 不仅仅是 end_period 的最大点。

  "encoding": {
    "x": {"aggregate": "max", "field": "end_period"},
    "y": {"aggregate": {"argmax": "end_period"}, "field": "Value"}
  },

其次,尽管对文本编码上的悬停进行了条件测试,但所有值都在没有悬停的情况下显示。

我现在无法告诉为什么这不起作用,所以我不知道该去哪里。预先感谢!

完整规格:

{
  "$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"}
      }
    }
  ]
}
json visualization vega-lite
1个回答
0
投票

enter image description here

{
  "$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"}
      }
    }
  ]
}
© www.soinside.com 2019 - 2024. All rights reserved.