{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "config": {
    "background": "#1c1a1d",
    "font": "Helvetica, Arial, sans-serif",
    "axis": {
      "labelColor": "#aaa",
      "titleColor": "#aaa",
      "domainColor": "#363338",
      "tickColor": "#363338",
      "gridColor": "#363338",
      "gridOpacity": 0.6,
      "labelFontSize": 14,
      "titleFontSize": 14,
      "titleFontWeight": "normal"
    },
    "legend": {
      "labelColor": "#e0e0e0",
      "titleColor": "#aaa",
      "labelFontSize": 14,
      "symbolType": "square",
      "symbolSize": 130
    },
    "title": {
      "color": "#e0e0e0",
      "fontSize": 19,
      "fontWeight": 600,
      "anchor": "start",
      "subtitleColor": "#aaa",
      "subtitleFontSize": 14,
      "subtitleLineHeight": 20,
      "offset": 12
    },
    "header": {
      "labelColor": "#e0e0e0",
      "labelFontSize": 14,
      "labelFontWeight": 600,
      "titleColor": "#aaa"
    },
    "view": {
      "stroke": null
    }
  },
  "title": {
    "text": "Tokens and indicative cost, by model",
    "subtitle": "Same ordering in both panels, with independent scales."
  },
  "facet": {
    "column": {
      "field": "measure",
      "type": "nominal",
      "title": null,
      "sort": [
        "billions of tokens",
        "indicative API cost (US$)"
      ]
    }
  },
  "resolve": {
    "scale": {
      "x": "independent"
    }
  },
  "spec": {
    "width": 396,
    "height": 340,
    "mark": {
      "type": "bar",
      "cornerRadiusEnd": 4,
      "height": {
        "band": 0.7
      }
    },
    "encoding": {
      "y": {
        "field": "model",
        "type": "nominal",
        "sort": [
          "Sonnet 5",
          "Opus 4.8",
          "Opus 5",
          "Opus 4.7",
          "Opus 4.6",
          "Fable 5",
          "Opus 4.5",
          "Opus 4.1",
          "Sonnet 4.5",
          "Opus 4",
          "Haiku 4.5",
          "Sonnet 4.6",
          "Sonnet 4",
          "Sonnet 3.7"
        ],
        "axis": {
          "title": null,
          "grid": false
        }
      },
      "x": {
        "field": "value",
        "type": "quantitative",
        "axis": {
          "title": null,
          "format": "~s",
          "tickCount": 6
        }
      },
      "color": {
        "field": "measure",
        "type": "nominal",
        "legend": null,
        "scale": {
          "domain": [
            "billions of tokens",
            "indicative API cost (US$)"
          ],
          "range": [
            "#be2edd",
            "#d97706"
          ]
        }
      },
      "tooltip": [
        {
          "field": "model",
          "type": "nominal"
        },
        {
          "field": "value",
          "type": "quantitative",
          "format": ",.1f"
        }
      ]
    }
  },
  "data": {
    "url": "/code/token-charts/by-model.data.json",
    "format": {
      "type": "json"
    }
  }
}