json Vega-Lite(天津四):难以在折线图上应用最小值和最大值,并在线条末端应用文本标签和点

aoyhnmkz  于 5个月前  发布在  其他
关注(0)|答案(1)|浏览(35)

我迷失在Vega-lite酱料中。不知道我哪里错了。
我基本上需要两层:

  • 所有年份的行(“color”:)
  • 本年度(2023年)的单一红线
  • 要突出显示的标记:a)最高点,B)最低点和c)同一条2023过滤线上的最新点-带有显示值的文本标签(见下图)

x1c 0d1x的数据
我取得了部分成功,但感觉我在错误的顺序或错误的层编码的东西。2023年的最低温度标记不尊重过滤器转换,文本标签正在受到“颜色”的影响:编码而不是2023年标记的编码。
我把pbix附在这里:TemperatureDEV_pbix

  • (注意:这是一个大数据集,我已经切换了“覆盖数据限制”选项)*

对于JSON的混乱,我提前道歉。对于最高和最低的分数,我尝试使用“window”:expression。在另一次尝试中,我能够使用“argmax”获得结束标记:但我无法合并将结束标记和最高/最低分数结合起来。

{
  "data": {"name": "dataset"},
  "encoding": {
    "x": {
      "field": "DayOfYear",
      "type": "temporal",
      "axis": {
        "labels": false,
        "ticks": false,
        "grid": false,
        "title": "Day Of Year"
      }
    },
    "y": {
      "field": "Temp",
      "type": "quantitative",
      "scale": {"zero": false},
      "title": "Temperature"
    },
    "color": {
      "legend": null,
      "field": "Year",
      "type": "quantitative",
      "scale": {
        "reverse": false,
        "range": [
          "#0041C2",
          "#0041C250",
          "#0041C230",
          "#4169E220",
          "#4863A015"
        ]
      }
    }
  },
  
  "layer": [
    
    {
      "mark": {
        "type": "line",
        "interpolate": "monotone",
        "strokeWidth": 1.5
      }
    },
    {
      "transform": [
        {
          "calculate": "(datum.Temp)",
          "as": "2023_temp"
        },
        {
          "filter": {
            "field": "Year",
            "oneOf": ["2023"]
          }
        }
      ],
      "encoding": {
        "x": {
          "field": "DayOfYear",
          "type": "temporal",
          "axis": {
            "labels": false,
            "ticks": false,
            "grid": false,
            "title": "Day Of Year"
          }
        },
        "y": {
          "field": "2023_temp",
          "type": "quantitative",
          "scale": {"zero": false},
          "title": "Temperature"
        }
      },
      "layer": [
        {
          "mark": {
            "type": "line",
            "interpolate": "monotone",
            "stroke": "crimson",
            "strokeWidth": 3
          },
          "encoding": {
            "y": {"field": "2023_temp"}
          }
        },
        {
          "mark": {
            "type": "text",
            "align": "left",
            "dx": 5,
            "size": 15,
            "fontWeight": "bold",
            "color": "red"
          },
          "encoding": {
            "x": {
              "aggregate": "max",
              "field": "DayOfYear"
            },
            "y": {
              "aggregate": {
                "argmax": "DayOfYear"
              },
              "field": "2023_temp"
            },
            "text": {
              "aggregate": {
                "argmax": "DayOfYear"
              },
              "field": "2023_temp",
              "format": ".3~s"
            }
          }
        }
      ]
    },
    {
      "transform": [
        {
          "window": [
            {"op": "rank", "as": "jeff"}
          ],
          "sort": [
            {
              "field": "Temp",
              "order": "descending"
            }
          ]
        },
        {"filter": "datum.jeff ==1"}
      ],
      "mark": {
        "type": "point",
        "shape": "triangle-down",
        "size": 200,
        "yOffset": -8,
        "fill": "red",
        "opacity": 1
      },
      "encoding": {
        "x": {"field": "DayOfYear"},
        "y": {"field": "Temp"}
      }
    },
    {
      "transform": [
        {
          "window": [
            {
              "op": "rank",
              "as": "tempRank"
            }
          ],
          "sort": [
            {
              "field": "Temp",
              "order": "ascending"
            }
          ]
        },
        {
          "filter": "datum.tempRank == 1"
        }
      ],
      "mark": {
        "type": "point",
        "shape": "circle",
        "size": 200,
        "yOffset": -8,
        "fill": "red",
        "opacity": 1,
        "stroke": null
      },
      "encoding": {
        "x": {"field": "DayOfYear"},
        "y": {"field": "Temp"}
      }
    },
    {
      "layer": [
        {
          "transform": [
            {
              "calculate": "(datum.Temp)",
              "as": "1979_temp"
            },
            {
              "filter": "datum.Year == '1979'"
            }
          ],
          "mark": {
            "type": "line",
            "interpolate": "monotone",
            "stroke": "orange",
            "strokeWidth": 3
          },
          "encoding": {
            "y": {"field": "1979_temp"}
          }
        }
      ]
    }
  ]
}

字符串

lmvvr0a8

lmvvr0a81#

这个怎么样


的数据

{
  "data": {"name": "dataset"},
  "encoding": {
    "x": {
      "field": "DayOfYear",
      "type": "temporal",
      "axis": {
        "labels": false,
        "ticks": false,
        "grid": false,
        "title": "Day Of Year"
      }
    },
    "y": {
      "field": "Temp",
      "type": "quantitative",
      "scale": {"zero": false},
      "title": "Temperature"
    },
    "color": {
      "legend": null,
      "field": "Year",
      "type": "quantitative",
      "scale": {
        "reverse": false,
        "range": [
          "#0041C2",
          "#0041C250",
          "#0041C230",
          "#4169E220",
          "#4863A015"
        ]
      }
    }
  },
  "layer": [
    {
      "mark": {
        "type": "line",
        "interpolate": "monotone",
        "strokeWidth": 1.5
      }
    },
    {
      "transform": [
        {
          "calculate": "(datum.Temp)",
          "as": "2023_temp"
        },
        {
          "filter": {
            "field": "Year",
            "oneOf": ["2023"]
          }
        }
      ],
      "encoding": {
        "x": {
          "field": "DayOfYear",
          "type": "temporal",
          "axis": {
            "labels": false,
            "ticks": false,
            "grid": false,
            "title": "Day Of Year"
          }
        },
        "y": {
          "field": "2023_temp",
          "type": "quantitative",
          "scale": {"zero": false},
          "title": "Temperature"
        }
      },
      "mark": {
        "type": "line",
        "interpolate": "monotone",
        "stroke": "crimson",
        "strokeWidth": 3
      }
    },
    {
      "transform": [
        {
          "filter": {
            "field": "Year",
            "oneOf": ["2023"]
          }
        },
        {
          "window": [
            {"op": "rank", "as": "high"}
          ],
          "sort": [
            {
              "field": "Temp",
              "order": "descending"
            }
          ]
        },
        {
          "window": [
            {"op": "rank", "as": "low"}
          ],
          "sort": [
            {
              "field": "Temp",
              "order": "ascending"
            }
          ]
        },
        {
          "window": [
            {"op": "rank", "as": "last"}
          ],
          "sort": [
            {
              "field": "Year",
              "order": "ascending"
            },
            {
              "field": "DayOfYear",
              "order": "descending"
            }
          ]
        }
      ],
      "layer": [
              {
          "mark": {
            "type": "text",
            
            "fontSize": {"expr": "datum.high ==1 || datum.low==1|| datum.last==1?10:0"
            },
            "dy":-25,
            "fill": "black",
            "yOffset": 0,
            "opacity": 1
          },
          "encoding": {
      "text": {"field": "Temp", "type": "quantitative"}
    }
        },
        {
          "mark": {
            "type": "point",
            "shape": "circle",
            "size": {
              "expr": "datum.high ==1 || datum.low==1|| datum.last==1?150:0"
            },
            "yOffset": 0,
            "strokeWidth": 0.8,
            "stroke": "black",
            "fill": "red",
            "opacity": 1
          }
        }
      ]
    },
    {
      "layer": [
        {
          "transform": [
            {
              "calculate": "(datum.Temp)",
              "as": "1979_temp"
            },
            {
              "filter": "datum.Year == '1979'"
            }
          ],
          "mark": {
            "type": "line",
            "interpolate": "monotone",
            "stroke": "orange",
            "strokeWidth": 3
          },
          "encoding": {
            "y": {"field": "1979_temp"}
          }
        }
      ]
    }
  ]
}

字符串

相关问题