Vega Christmas tree

tree.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic bar chart example, with value labels shown upon mouse hover.",
  "width": 400,
  "height": 300,
  "padding": 5,
  "data": [
    {"name": "myscale", "values": [{"x": -10, "y": 0}, {"x": 10, "y": 50}]},
    {
      "name": "leaves",
      "values": [
        {"x": 0, "y": 15, "size": 18000},
        {"x": 0, "y": 20, "size": 15000},
        {"x": 0, "y": 25, "size": 13000},
        {"x": 0, "y": 30, "size": 10000},
        {"x": 0, "y": 36, "size": 6000}
      ]
    },
    {"name": "tree", "values": [{"x": 0, "y": 0}]},
    {"name": "star", "values": [{"x": 0, "y": 42, "size": 1000}]},
    {
      "name": "lines",
      "values": [
        {"x": -4, "y": 10, "layer": 1},
        {"x": 4, "y": 20, "layer": 1},
        {"x": -4, "y": 20, "layer": 2},
        {"x": 4, "y": 30, "layer": 2},
        {"x": -4, "y": 30, "layer": 3},
        {"x": 4, "y": 40, "layer": 3}
      ]
    },
    {
      "name": "bolls",
      "values": [
        {"x": -2, "y": 15},
        {"x": 2, "y": 12},
        {"x": -1, "y": 25},
        {"x": 1.2, "y": 20},
        {"x": -0.8, "y": 10},
        {"x": 0.4, "y": 32},
        {"x": -0.6, "y": 38}
      ],
      "transform": [{"type": "formula", "as": "c", "expr": "datum.x * datum.y"}]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "domain": {"data": "myscale", "field": "x"},
      "range": "width",
      "round": true
    },
    {
      "name": "yscale",
      "domain": {"data": "myscale", "field": "y"},
      "range": "height"
    },
    {
      "name": "color",
      "domain": {"data": "bolls", "field": "c"},
      "range": {"scheme": "pastel1"}
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "xscale"},
    {"orient": "left", "scale": "yscale"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "tree"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "signal": "datum.x - 0.8"},
          "x2": {"scale": "xscale", "signal": "datum.x + 0.8"},
          "y": {"scale": "yscale", "value": 10},
          "y2": {"scale": "yscale", "value": 0},
          "fill": {"value": "#864A2b"}
        }
      }
    },
    {
      "type": "symbol",
      "from": {"data": "leaves"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "size": {"field": "size"},
          "shape": {"value": "triangle"},
          "fill": {"value": "green"}
        }
      }
    },
    {
      "type": "symbol",
      "from": {"data": "star"},
      "encode": {
        "enter": {"fill": {"value": "#939597"}, "stroke": {"value": "#652c90"}},
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "size": {"field": "size"},
          "shape": {
            "value": "M0,.5L.6,.8L.5,.1L1,-.3L.3,-.4L0,-1L-.3,-.4L-1,-.3L-.5,.1L-.6,.8L0,.5Z"
          },
          "opacity": {"value": 1},
          "fill": {"value": "yellow"}
        },
        "hover": {"opacity": {"value": 0.5}}
      }
    },
    {
      "type": "group",
      "from": {"facet": {"data": "lines", "name": "facet", "groupby": "layer"}},
      "marks": [
        {
          "type": "line",
          "from": {"data": "facet"},
          "encode": {
            "update": {
              "x": {"scale": "xscale", "field": "x"},
              "y": {"scale": "yscale", "field": "y"},
              "strokeWidth": {"value": 5},
              "stroke": {"value": "white"}
            }
          }
        }
      ]
    },
    {
      "type": "symbol",
      "from": {"data": "bolls"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "size": {"value": 150},
          "fill": {"scale": "color", "field": "c"}
        }
      }
    }
  ]
}