Template:Graph:Lines

<graph>

{
  "version": 2,
  "width": 300,
  "height": 200,

  "data": [{
    "name": "chart",
    "url": "tabular:///Earnings/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
    "format": {"type": "json", "property": "data"},
    "transform": [
      {"type": "formula", "field": "date", "expr": "datetime(datum.year, 0, 1)"},
      {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]}
    ]
  },
  {
    // This is not a good long-term solution, I will need to rethink how to get these values from tab data's "title" header
    "name": "labels",
    "values": [
      {"id": "age_16_24", "name": "16 to 24"},
      {"id": "age_25_34", "name": "25 to 34"},
      {"id": "age_35_44", "name": "35 to 44"},
      {"id": "age_45_54", "name": "45 to 54"},
    ]
  }],
  "scales": [
    {
      "name": "x",
      "type": "time",
      "domain": {"data": "chart", "field": "date"},
      "range": "width"
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "domain": {"data": "chart", "field": "value"},
      "zero": false,
      "nice": true,
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "chart", "field": "key"},
      "range": "category10"
    },
    {
      "name": "labels",
      "type": "ordinal",
      "domain": {"data": "labels", "field": "id"},
      "range": {"data": "labels", "field": "name"},
    }
  ],
  "legends": [{
    "fill": "color",
    "stroke": "color",
    "title": "Age",
    "properties": {
      "labels": { "text": {"scale": "labels", "field": "data"} }
    }
  }],
  "axes": [
    {"scale": "x", "type": "x", "title": "Year", "ticks": 5},
    {"scale": "y", "type": "y", "title": "Percent"}
  ],

  "marks": [
    // Group data by the "key" (age_.._..), and draw lines
    {
      "type": "group",
      "from": {
        "data": "chart",
        "transform": [{"groupby": ["key"], "type": "facet"}]
      },
      "marks": [
        {
          "type": "line",
          "properties": {
            "enter": {
              "y": {"scale": "y", "field": "value"},
              "x": {"scale": "x", "field": "date"},
              "stroke": {"scale": "color", "field": "key"},
              "interpolate": {"value": "monotone"},
              "strokeWidth": {"value": 2.5}
            }
          }
        }
      ],
    },

    // Draw title at the top of the graph
    {
      "type": "text",
      "properties": {
        "enter": {
          "x": {"signal": "width", "mult": 0.5, "offset": 30},
          "y": {"value": -15},
          "text": {"value": "Gender pay gap in the United States"},
          "fontWeight": {"value": "bold"},
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#000"}
        }
      }
    }
  ]
}

</graph>