Skip to main content
Version: Current

Introduction to Line Layer

What is a line layer?​

A line layer is made up of path. They are useful to check patterns and exceptions in data which has sequential progression, like time. It forms the basis of a line chart. Muze automatically creates a line layer if you assign temporal (dimension) field to either of the axes.

In order to create a line chart, map a temporal field to any of the axes. Temporal field is a special type of dimension which represents date-time. A Line chart shows trend over time, hence a temporal variable is needed to show a line chart. Therefore, on mapping a measure field with a temporal one, we get a line chart automatically.

Example​

const { muze, getDataFromSearchQuery, env } = viz;

const data = getDataFromSearchQuery();

muze
  .canvas()
  .rows(["Horsepower"])
  .columns(["Year"])
  .data(data)
  .mount("#chart");

Creating a multi-series line chart​

Assigning a color field to a line chart creates a multi series line chart, where

total number of lines = number of unique values in the color field

Example​

const { muze, getDataFromSearchQuery, env } = viz;

const data = getDataFromSearchQuery();

muze
  .canvas()
  .rows(["Acceleration"])
  .columns(["Year"])
  .color("Origin")
  .title("Multi series Line")
  .data(data)
  .mount("#chart");

Creating a line chart with missing data​

A non existent point in a line chart can be customized (change color, thickness and dashed)

Example​

const { muze, getDataFromSearchQuery, env } = viz;

const data = getDataFromSearchQuery();

muze
  .canvas()
  .rows(["Acceleration"])
  .columns(["Year"])
  .color("Origin")
  .layers([
    {
      mark: "line",
      connectNullData: true,
      nullDataLineStyle: {
        "stroke-dasharray": "8,4",
        "stroke-width": 4,
        stroke: "blue",
      },
    },
  ])
  .title("Null Data Line")
  .data(data)
  .mount("#chart");

NOTE: Here, for Origin Holland some points for the years are missing and thus connected with the Holland line, customized by width and color

Creating a spline/step line chart​

Providing a interpolation changes the line plot

  • catmullRom - produces a spline curve
  • step - Generates alternating horizontal and vertical lines
  • stepAfter - Same as step but the y value changes after the x value
  • stepBefore - Same as step but the y value changes before the x value

Spline chart​

Example​

const { muze, getDataFromSearchQuery, env } = viz;

const data = getDataFromSearchQuery();

muze
  .canvas()
  .rows(["Acceleration"])
  .columns(["Year"])
  .layers([
    {
      mark: "line",
      interpolate: "catmullRom",
    },
  ])
  .data(data)
  .mount("#chart");

Step chart​

Example​

const { muze, getDataFromSearchQuery, env } = viz;

const data = getDataFromSearchQuery();

muze
  .canvas()
  .rows(["Acceleration"])
  .columns(["Year"])
  .layers([
    {
      mark: "line",
      interpolate: "step",
    },
  ])
  .data(data)
  .mount("#chart");