dataviz-portfolio/specs/margin.vl.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Стало: обчислена маржа з нульовою віссю.",
  "title": {
    "text": "Маржа, % від продажів",
    "subtitle": "Sample Superstore, 2014–2017",
    "anchor": "start",
    "fontSize": 16,
    "subtitleFontSize": 12,
    "subtitleColor": "#7a8894"
  },
  "width": 600,
  "height": 300,
  "data": {
    "values": [
      {
        "month": "2014-01-01",
        "margin": 17.21
      },
      {
        "month": "2014-02-01",
        "margin": 19.08
      },
      {
        "month": "2014-03-01",
        "margin": 0.9
      },
      {
        "month": "2014-04-01",
        "margin": 12.33
      },
      {
        "month": "2014-05-01",
        "margin": 11.58
      },
      {
        "month": "2014-06-01",
        "margin": 14.38
      },
      {
        "month": "2014-07-01",
        "margin": -2.48
      },
      {
        "month": "2014-08-01",
        "margin": 19.05
      },
      {
        "month": "2014-09-01",
        "margin": 10.18
      },
      {
        "month": "2014-10-01",
        "margin": 10.96
      },
      {
        "month": "2014-11-01",
        "margin": 11.82
      },
      {
        "month": "2014-12-01",
        "margin": 12.92
      },
      {
        "month": "2015-01-01",
        "margin": -18.05
      },
      {
        "month": "2015-02-01",
        "margin": 23.54
      },
      {
        "month": "2015-03-01",
        "margin": 25.13
      },
      {
        "month": "2015-04-01",
        "margin": 12.25
      },
      {
        "month": "2015-05-01",
        "margin": 15.49
      },
      {
        "month": "2015-06-01",
        "margin": 13.45
      },
      {
        "month": "2015-07-01",
        "margin": 11.43
      },
      {
        "month": "2015-08-01",
        "margin": 14.52
      },
      {
        "month": "2015-09-01",
        "margin": 12.71
      },
      {
        "month": "2015-10-01",
        "margin": 8.97
      },
      {
        "month": "2015-11-01",
        "margin": 16.42
      },
      {
        "month": "2015-12-01",
        "margin": 10.7
      },
      {
        "month": "2016-01-01",
        "margin": 15.23
      },
      {
        "month": "2016-02-01",
        "margin": 21.78
      },
      {
        "month": "2016-03-01",
        "margin": 6.98
      },
      {
        "month": "2016-04-01",
        "margin": 7.68
      },
      {
        "month": "2016-05-01",
        "margin": 15.2
      },
      {
        "month": "2016-06-01",
        "margin": 11.77
      },
      {
        "month": "2016-07-01",
        "margin": 11.29
      },
      {
        "month": "2016-08-01",
        "margin": 6.63
      },
      {
        "month": "2016-09-01",
        "margin": 12.71
      },
      {
        "month": "2016-10-01",
        "margin": 27.21
      },
      {
        "month": "2016-11-01",
        "margin": 5.05
      },
      {
        "month": "2016-12-01",
        "margin": 18.44
      },
      {
        "month": "2017-01-01",
        "margin": 16.24
      },
      {
        "month": "2017-02-01",
        "margin": 7.95
      },
      {
        "month": "2017-03-01",
        "margin": 25.06
      },
      {
        "month": "2017-04-01",
        "margin": 2.56
      },
      {
        "month": "2017-05-01",
        "margin": 14.33
      },
      {
        "month": "2017-06-01",
        "margin": 15.52
      },
      {
        "month": "2017-07-01",
        "margin": 15.36
      },
      {
        "month": "2017-08-01",
        "margin": 14.32
      },
      {
        "month": "2017-09-01",
        "margin": 12.51
      },
      {
        "month": "2017-10-01",
        "margin": 11.93
      },
      {
        "month": "2017-11-01",
        "margin": 8.18
      },
      {
        "month": "2017-12-01",
        "margin": 10.12
      }
    ]
  },
  "layer": [
    {
      "mark": {
        "type": "area",
        "line": {
          "color": "#003964",
          "strokeWidth": 2
        },
        "color": "#cfe4ea",
        "opacity": 0.9
      },
      "encoding": {
        "x": {
          "field": "month",
          "type": "temporal",
          "title": null,
          "axis": {
            "format": "%Y",
            "tickCount": 4
          }
        },
        "y": {
          "field": "margin",
          "type": "quantitative",
          "title": null
        }
      }
    },
    {
      "transform": [
        {
          "filter": "datum.margin < 0"
        }
      ],
      "mark": {
        "type": "point",
        "filled": true,
        "size": 70,
        "color": "#f15b43"
      },
      "encoding": {
        "x": {
          "field": "month",
          "type": "temporal"
        },
        "y": {
          "field": "margin",
          "type": "quantitative"
        },
        "tooltip": [
          {
            "field": "month",
            "type": "temporal",
            "title": "місяць",
            "format": "%b %Y"
          },
          {
            "field": "margin",
            "type": "quantitative",
            "title": "маржа, %"
          }
        ]
      }
    },
    {
      "mark": {
        "type": "rule",
        "color": "#8a97a3",
        "strokeWidth": 1
      },
      "encoding": {
        "y": {
          "datum": 0
        }
      }
    }
  ]
}