Vega-Lite Line Charts

.block

license: bsd-3-clause

README.md

Vega-Lite Line Charts

forked from domoritz's block: Vega-Lite Line Charts

horizon.vg.json

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "autosize": "pad",
  "padding": 5,
  "data": [
    {
      "name": "source_0",
      "url": "stocks.csv",
      "format": {
        "type": "csv",
        "parse": {
          "date": "date",
          "price": "number"
        }
      },
      "transform": [
        {
          "type": "filter",
          "expr": "datum.symbol !== 'GOOG'"
        },
        {
          "type": "formula",
          "expr": "datum.price / 4",
          "as": "quarter_price"
        }
      ]
    },
    {
      "name": "row_domain",
      "source": "source_0",
      "transform": [
        {
          "type": "aggregate",
          "groupby": [
            "symbol"
          ]
        }
      ]
    },
    {
      "name": "layer_indices",
      "values": [
        0,
        1,
        2,
        3
      ],
      "transform": [
        {
          "type": "formula",
          "expr": "datum.data * - child_height",
          "as": "offset"
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "child_width",
      "update": "300"
    },
    {
      "name": "child_height",
      "update": "30"
    },
    {
      "name": "fake_height",
      "update": "120"
    }
  ],
  "layout": {
    "padding": {
      "row": 10,
      "column": 10
    },
    "offset": 10,
    "columns": 1,
    "bounds": "full",
    "align": "all"
  },
  "marks": [

    {
      "name": "row_header",
      "type": "group",
      "role": "row-header",
      "from": {
        "data": "row_domain"
      },
      "sort": {
        "field": "datum[\"symbol\"]",
        "order": "ascending"
      },
      "title": {
        "text": {
          "signal": "''+parent[\"symbol\"]"
        },
        "offset": 10,
        "orient": "left",
        "style": "guide-label",
        "encode": {
          "update": {
            "fontWeight": {
              "value": "normal"
            },
            "angle": {
              "value": -90
            },
            "fontSize": {
              "value": 10
            }
          }
        }
      },
      "encode": {
        "update": {
          "height": {
            "signal": "child_height"
          }
        }
      },
      "axes": [
        {
          "scale": "y_axis",
          "labelOverlap": true,
          "orient": "left",
          "tickCount": {
            "signal": "ceil(child_height/40)"
          },
          "title": "Price",
          "zindex": 1
        }
      ]
    },
    {
      "name": "column_footer",
      "type": "group",
      "role": "column-footer",
      "encode": {
        "update": {
          "width": {
            "signal": "child_width"
          }
        }
      },
      "axes": [
        {
          "scale": "x",
          "labelOverlap": true,
          "orient": "bottom",
          "tickCount": {
            "signal": "ceil(child_width/40)"
          },
          "title": "Time",
          "zindex": 1,
          "encode": {
            "labels": {
              "update": {
                "text": {
                  "signal": "timeFormat(datum.value, '%Y')"
                }
              }
            }
          }
        }
      ]
    },
    {
      "name": "cell",
      "type": "group",
      "style": "cell",
      "from": {
        "facet": {
          "name": "facet",
          "data": "source_0",
          "groupby": [
            "symbol"
          ]
        }
      },
      "sort": {
        "field": [
          "datum[\"symbol\"]"
        ],
        "order": [
          "ascending"
        ]
      },
      "encode": {
        "update": {
          "width": {
            "signal": "child_width"
          },
          "height": {
            "signal": "child_height"
          },
          "clip": {"value": true}
        }
      },
      "marks": [
        {
          "type": "group",
          "from": {
            "data": "layer_indices"
          },
          "encode": {
            "update": {
              "y": {
                "field": "offset"
              }
            }
          },
          "marks": [
            {
              "name": "child_marks",
              "type": "area",
              "style": [
                "area"
              ],
              "sort": {
                "field": "datum[\"date\"]",
                "order": "descending"
              },
              "from": {
                "data": "facet"
              },
              "encode": {
                "update": {
                  "x": {
                    "scale": "x",
                    "field": "date"
                  },
                  "y": {
                    "scale": "y_height",
                    "field": "price"
                  },
                  "y2": {
                    "scale": "y_height",
                    "value": 0
                  },
                  "fill": {
                    "value": "#4c78a8"
                  },
                  "orient": {
                    "value": "vertical"
                  },
                  "fillOpacity": {
                    "value": 0.3
                  }
                }
              }
            }
          ]
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "time",
      "domain": {
        "data": "source_0",
        "field": "date"
      },
      "range": [
        0,
        {
          "signal": "child_width"
        }
      ]
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {
        "data": "source_0",
        "field": "price"
      },
      "range": [
        {
          "signal": "child_height"
        },
        0
      ],
      "nice": true,
      "zero": true
    },
    {
      "name": "y_axis",
      "type": "linear",
      "domain": {
        "data": "source_0",
        "field": "quarter_price"
      },
      "range": [
        {
          "signal": "child_height"
        },
        0
      ],
      "nice": true,
      "zero": true
    },
    {
      "name": "y_height",
      "type": "linear",
      "domain": {
        "data": "source_0",
        "field": "price"
      },
      "range": [
        {
          "signal": "fake_height"
        },
        0
      ],
      "nice": true,
      "zero": true
    }
  ]
}

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.8/vega.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.3/vega-lite.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc7/vega-embed.js"></script>
</head>

<body>
  <div id="line"></div>
  <div id="stacked"></div>
  <div id="multiples"></div>
  <div id="lasagna"></div>
  <div id="horizon"></div>
  <div id="joy"></div>
  
  <script>
    switch (window.location.hash) {
      case "#line":
        vegaEmbed('#line', "line.vl.json", {actions: false, renderer: "svg"});
        break;
      case "#stacked":
        vegaEmbed('#stacked', "stacked.vl.json", {actions: false, renderer: "svg"});
        break;
      case "#multiples":
        vegaEmbed('#multiples', "multiples.vl.json", {actions: false, renderer: "svg"});
        break;
      case "#lasagna":
        vegaEmbed('#lasagna', "lasagna.vl.json", {actions: false, renderer: "svg"});
        break;
      case "#horizon":
        vegaEmbed('#horizon', "horizon.vg.json", {actions: false, renderer: "svg"});
        break;
      case "#joy":
        vegaEmbed('#joy', "joy.vg.json", {actions: false, renderer: "svg"});
        break;
      default:
        vegaEmbed('#line', "line.vl.json", {actions: false, renderer: "svg"});
        vegaEmbed('#stacked', "stacked.vl.json", {actions: false, renderer: "svg"});
        vegaEmbed('#multiples', "multiples.vl.json", {actions: false, renderer: "svg"});
        vegaEmbed('#lasagna', "lasagna.vl.json", {actions: false, renderer: "svg"});
        vegaEmbed('#horizon', "horizon.vg.json", {actions: false, renderer: "svg"});
        vegaEmbed('#joy', "joy.vg.json", {actions: false, renderer: "svg"});
    }
  </script>
</body>

joy.vg.json

{
    "$schema": "https://vega.github.io/schema/vega/v3.0.json",
    "data": [
      {
        "name": "source",
        "url": "stocks.csv",
        "format": {
          "type": "csv",
          "parse": {"date": "date", "price": "number"}
        },
        "transform": [
          {"type": "filter","expr": "datum.symbol !== 'GOOG'"}
        ]
      }
    ],
    "width": 250,
    "marks": [
      {
        "type": "group",
        "from": {
          "facet": {
            "name": "facet",
            "data": "source",
            "groupby": ["symbol"]
          }
        },
        "sort": {
          "field": ["datum.symbol"],
          "order": ["ascending"]
        },
        "encode": {
          "update": {
            "y": {"field": "symbol", "scale": "row", "offset": -60}
          }
        },
        "marks": [
          {
            "from": {"data": "facet"},
            "type": "area",
            "sort": {
              "field": "datum.date",
              "order": "descending"
            },
            "encode": {
              "update": {
                "x": {"scale": "x","field": "date"},
                "y": {"scale": "y","field": "price"},
                "y2": {"scale": "y","value": 0},
                "fill": {"scale": "color","field": "symbol"},
                "opacity": {"value": 0.7}
              }
            }
          },
          {
            "from": {"data": "facet"},
            "type": "line",
            "sort": {
              "field": "datum.date",
              "order": "descending"
            },
            "encode": {
              "update": {
                "x": {"scale": "x","field": "date"},
                "y": {"scale": "y","field": "price"},
                "stroke": {"value": "#666"},
                "strokeWidth": {"value": 1.5}
              }
            }
          }
        ]
      }
    ],
    "scales": [
      {
        "name": "x",
        "type": "time",
        "domain": {"data": "source","field": "date"},
        "range": "width"
      },
      {
        "name": "y",
        "type": "linear",
        "domain": {"data": "source","field": "price"},
        "range": [60, 0],
        "nice": true,
        "zero": true
      },
      {
        "name": "color",
        "type": "ordinal",
        "domain": {"data": "source","field": "symbol", "sort": true},
        "range": "category"
      },
      {
        "name": "row",
        "type": "point",
        "domain": {"data": "source","field": "symbol", "sort": true},
        "range": [0, 60]
      }
    ],
    "axes": [{
      "orient": "right",
      "scale": "row",
      "grid": true,
      "domain": false,
      "labelPadding": 7,
      "encode": {
          "labels": {
              "update": {
                  "baseline": {"value": "alphabetic"},
                  "fontSize": {"value": 11}
              }
          },
          "grid": {
              "update": {
                  "strokeWidth": {"value": 1},
                  "stroke": {"value": "#333"}
              }
          }
      }
    }]
  }

lasagna.vl.json

{
    "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
    "transform": [
        {
            "filter": "datum.symbol !== 'GOOG'"
        }
    ],
    "width": 300,
    "height": 100,
    "data": {
        "url": "stocks.csv"
    },
    "mark": "rect",
    "encoding": {
        "x": {
            "field": "date",
            "type": "ordinal",
            "axis": {
                "format": "%Y",
                "labelAngle": 0,
                "title": "Time"
            },
            "timeUnit": "yearmonthdate",
            "scale": {
                "paddingInner": 0
            }
        },
        "color": {
            "field": "price",
            "type": "quantitative",
            "stack": "zero",
            "aggregate": "sum",
            "legend": {"title": "Price"}
        },
        "y": {
            "field": "symbol",
            "type": "nominal",
            "axis": {"title": ""}
        }
    },
    "config": {
        "range": {
            "heatmap": {
                "scheme": "viridis",
                "extent": [1, 0]
            }
        }
    }
}

line.vl.json

{
    "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
    "transform": [
        {
            "filter": "datum.symbol !== 'GOOG'"
        }
    ],
    "width": 320,
    "height": 130,
    "data": {
        "url": "stocks.csv"
    },
    "mark": "line",
    "encoding": {
        "x": {
            "field": "date",
            "type": "temporal",
            "axis": {
                "format": "%Y",
                "labelAngle": 0,
                "title": "Time",
                "grid": false
            }
        },
        "y": {
            "field": "price",
            "type": "quantitative",
            "aggregate": "sum",
            "axis": {
                "title": "Price",
                "grid": false
            }
        },
        "color": {
            "field": "symbol",
            "type": "nominal",
            "legend": {"title": "Symbol"}
        }
    }
}

multiples.vl.json

{
    "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
    "transform": [
        {
            "filter": "datum.symbol !== 'GOOG'"
        }
    ],
    "width": 300,
    "height": 36,
    "data": {
        "url": "stocks.csv"
    },
    "mark": "area",
    "encoding": {
        "x": {
            "field": "date",
            "type": "temporal",
            "axis": {
                "format": "%Y",
                "labelAngle": 0,
                "title": "Time",
                "grid": false
            }
        },
        "y": {
            "field": "price",
            "type": "quantitative",
            "axis": {
                "title": "Price",
                "grid": false
            }
        },
        "color": {
            "field": "symbol",
            "type": "nominal",
            "legend": null
        },
        "row": {
            "field": "symbol",
            "type": "nominal",
            "header": {"title": "", "labelAngle": -90}
        }
    }
}

stacked.vl.json

{
    "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
    "transform": [
        {
            "filter": "datum.symbol !== 'GOOG'"
        }
    ],
    "width": 320,
    "height": 130,
    "data": {
        "url": "stocks.csv"
    },
    "mark": "area",
    "encoding": {
        "x": {
            "field": "date",
            "type": "temporal",
            "axis": {
                "format": "%Y",
                "labelAngle": 0,
                "title": "Time",
                "grid": false
            },
            "timeUnit": "yearmonthdate"
        },
        "y": {
            "field": "price",
            "type": "quantitative",
            "stack": "zero",
            "aggregate": "sum",
            "axis": {
                "title": "Price",
                "grid": false
            }
        },
        "color": {
            "field": "symbol",
            "type": "nominal",
            "legend": {"title": "Symbol"}
        }
    }
}

stocks.csv

thumbnail.png