Smith

Header

Add a chart title and supporting description inside the visualization.

StatusLoading

header

Graflume.smith() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Header · Row data
`real`quantitative	`imaginary`quantitative
0.12	-1.376
0.31	-1.265
0.5	-1.108
0.69	-0.912
0.88	-0.682
1.07	-0.429
1.26	-0.159
1.45	0.116
1.64	0.387
1.83	0.644
2.02	0.878
2.21	1.08
2.4	1.243
2.59	1.362
2.78	1.431

Add a chart title and supporting description inside the visualization.

Browser API · Portable schema

Browser API

Graflume.smith()

const data = [
  {
    "imaginary": -1.376,
    "real": 0.12
  },
  {
    "imaginary": -1.265,
    "real": 0.31
  },
  {
    "imaginary": -1.108,
    "real": 0.5
  },
  {
    "imaginary": -0.912,
    "real": 0.69
  },
  {
    "imaginary": -0.682,
    "real": 0.88
  },
  {
    "imaginary": -0.429,
    "real": 1.07
  },
  {
    "imaginary": -0.159,
    "real": 1.26
  },
  {
    "imaginary": 0.116,
    "real": 1.45
  },
  {
    "imaginary": 0.387,
    "real": 1.64
  },
  {
    "imaginary": 0.644,
    "real": 1.83
  },
  {
    "imaginary": 0.878,
    "real": 2.02
  },
  {
    "imaginary": 1.08,
    "real": 2.21
  },
  {
    "imaginary": 1.243,
    "real": 2.4
  },
  {
    "imaginary": 1.362,
    "real": 2.59
  },
  {
    "imaginary": 1.431,
    "real": 2.78
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "title": {
    "subtitle": "Smith chart uses runnable data and options to demonstrate normalized impedance to reflection transform; resistance/reactance grid.",
    "text": "Smith"
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
};

Graflume.smith('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "title": {
    "subtitle": "Smith chart uses runnable data and options to demonstrate normalized impedance to reflection transform; resistance/reactance grid.",
    "text": "Smith"
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
}

Reveal exact values from a mark or axis position. Authors can choose locale-aware date/time styles and a time zone with declarative options.

StatusLoading

tooltip

Graflume.smith() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Tooltip · Row data
`real`quantitative	`imaginary`quantitative
0.12	-1.376
0.31	-1.265
0.5	-1.108
0.69	-0.912
0.88	-0.682
1.07	-0.429
1.26	-0.159
1.45	0.116
1.64	0.387
1.83	0.644
2.02	0.878
2.21	1.08
2.4	1.243
2.59	1.362
2.78	1.431

Reveal exact values from a mark or axis position. Authors can choose locale-aware date/time styles and a time zone with declarative options.

Browser API · Portable schema

Browser API

const data = [
  {
    "imaginary": -1.376,
    "real": 0.12
  },
  {
    "imaginary": -1.265,
    "real": 0.31
  },
  {
    "imaginary": -1.108,
    "real": 0.5
  },
  {
    "imaginary": -0.912,
    "real": 0.69
  },
  {
    "imaginary": -0.682,
    "real": 0.88
  },
  {
    "imaginary": -0.429,
    "real": 1.07
  },
  {
    "imaginary": -0.159,
    "real": 1.26
  },
  {
    "imaginary": 0.116,
    "real": 1.45
  },
  {
    "imaginary": 0.387,
    "real": 1.64
  },
  {
    "imaginary": 0.644,
    "real": 1.83
  },
  {
    "imaginary": 0.878,
    "real": 2.02
  },
  {
    "imaginary": 1.08,
    "real": 2.21
  },
  {
    "imaginary": 1.243,
    "real": 2.4
  },
  {
    "imaginary": 1.362,
    "real": 2.59
  },
  {
    "imaginary": 1.431,
    "real": 2.78
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "hover": true,
    "tooltip": {
      "fields": [
        {
          "field": "real",
          "format": "number",
          "label": "Real"
        },
        {
          "field": "imaginary",
          "format": "number",
          "label": "Imaginary"
        }
      ],
      "title": "Smith · Tooltip",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
};

Graflume.smith('#chart', data, options);

Portable schema

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "hover": true,
    "tooltip": {
      "fields": [
        {
          "field": "real",
          "format": "number",
          "label": "Real"
        },
        {
          "field": "imaginary",
          "format": "number",
          "label": "Imaginary"
        }
      ],
      "title": "Smith · Tooltip",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
}

Theme

Apply the current built-in theme from the selector and update every active example together.

StatusLoading

theme

Graflume.smith() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Theme · Row data
`real`quantitative	`imaginary`quantitative
0.12	-1.376
0.31	-1.265
0.5	-1.108
0.69	-0.912
0.88	-0.682
1.07	-0.429
1.26	-0.159
1.45	0.116
1.64	0.387
1.83	0.644
2.02	0.878
2.21	1.08
2.4	1.243
2.59	1.362
2.78	1.431

Apply the current built-in theme from the selector and update every active example together.

Browser API · Portable schema

Browser API

Graflume.smith()

const data = [
  {
    "imaginary": -1.376,
    "real": 0.12
  },
  {
    "imaginary": -1.265,
    "real": 0.31
  },
  {
    "imaginary": -1.108,
    "real": 0.5
  },
  {
    "imaginary": -0.912,
    "real": 0.69
  },
  {
    "imaginary": -0.682,
    "real": 0.88
  },
  {
    "imaginary": -0.429,
    "real": 1.07
  },
  {
    "imaginary": -0.159,
    "real": 1.26
  },
  {
    "imaginary": 0.116,
    "real": 1.45
  },
  {
    "imaginary": 0.387,
    "real": 1.64
  },
  {
    "imaginary": 0.644,
    "real": 1.83
  },
  {
    "imaginary": 0.878,
    "real": 2.02
  },
  {
    "imaginary": 1.08,
    "real": 2.21
  },
  {
    "imaginary": 1.243,
    "real": 2.4
  },
  {
    "imaginary": 1.362,
    "real": 2.59
  },
  {
    "imaginary": 1.431,
    "real": 2.78
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "theme": "graflume-light",
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
};

Graflume.smith('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "theme": "graflume-light",
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
}

Legend

Explain the visual meaning of layers, categories, or continuous values.

StatusLoading

legend

Legend: legend · layers · one series

Graflume.smith() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Legend · Row data
`real`quantitative	`imaginary`quantitative
0.12	-1.376
0.31	-1.265
0.5	-1.108
0.69	-0.912
0.88	-0.682
1.07	-0.429
1.26	-0.159
1.45	0.116
1.64	0.387
1.83	0.644
2.02	0.878
2.21	1.08
2.4	1.243
2.59	1.362
2.78	1.431

Explain the visual meaning of layers, categories, or continuous values.

Browser API · Portable schema

Browser API

Graflume.smith()

const data = [
  {
    "imaginary": -1.376,
    "real": 0.12
  },
  {
    "imaginary": -1.265,
    "real": 0.31
  },
  {
    "imaginary": -1.108,
    "real": 0.5
  },
  {
    "imaginary": -0.912,
    "real": 0.69
  },
  {
    "imaginary": -0.682,
    "real": 0.88
  },
  {
    "imaginary": -0.429,
    "real": 1.07
  },
  {
    "imaginary": -0.159,
    "real": 1.26
  },
  {
    "imaginary": 0.116,
    "real": 1.45
  },
  {
    "imaginary": 0.387,
    "real": 1.64
  },
  {
    "imaginary": 0.644,
    "real": 1.83
  },
  {
    "imaginary": 0.878,
    "real": 2.02
  },
  {
    "imaginary": 1.08,
    "real": 2.21
  },
  {
    "imaginary": 1.243,
    "real": 2.4
  },
  {
    "imaginary": 1.362,
    "real": 2.59
  },
  {
    "imaginary": 1.431,
    "real": 2.78
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "legend": {
    "interactive": true,
    "items": [
      {
        "id": "series",
        "label": "Smith · Legend",
        "layerId": "layer-0"
      }
    ],
    "labels": {
      "hide": "Hide",
      "show": "Show"
    },
    "maxItems": 8,
    "mode": "layers",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "Smith · Legend",
    "visible": true
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
};

Graflume.smith('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "legend": {
    "interactive": true,
    "items": [
      {
        "id": "series",
        "label": "Smith · Legend",
        "layerId": "layer-0"
      }
    ],
    "labels": {
      "hide": "Hide",
      "show": "Show"
    },
    "maxItems": 8,
    "mode": "layers",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "Smith · Legend",
    "visible": true
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
}

Highlight

Emphasize a representative datum or spatial position to guide inspection.

StatusLoading

highlight

Point and range highlights: highlights[] · datum · real

Graflume.smith() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Highlight · Row data
`real`quantitative	`imaginary`quantitative
0.12	-1.376
0.31	-1.265
0.5	-1.108
0.69	-0.912
0.88	-0.682
1.07	-0.429
1.26	-0.159
1.45	0.116
1.64	0.387
1.83	0.644
2.02	0.878
2.21	1.08
2.4	1.243
2.59	1.362
2.78	1.431

Emphasize a representative datum or spatial position to guide inspection.

Browser API · Portable schema

Browser API

Graflume.smith()

const data = [
  {
    "imaginary": -1.376,
    "real": 0.12
  },
  {
    "imaginary": -1.265,
    "real": 0.31
  },
  {
    "imaginary": -1.108,
    "real": 0.5
  },
  {
    "imaginary": -0.912,
    "real": 0.69
  },
  {
    "imaginary": -0.682,
    "real": 0.88
  },
  {
    "imaginary": -0.429,
    "real": 1.07
  },
  {
    "imaginary": -0.159,
    "real": 1.26
  },
  {
    "imaginary": 0.116,
    "real": 1.45
  },
  {
    "imaginary": 0.387,
    "real": 1.64
  },
  {
    "imaginary": 0.644,
    "real": 1.83
  },
  {
    "imaginary": 0.878,
    "real": 2.02
  },
  {
    "imaginary": 1.08,
    "real": 2.21
  },
  {
    "imaginary": 1.243,
    "real": 2.4
  },
  {
    "imaginary": 1.362,
    "real": 2.59
  },
  {
    "imaginary": 1.431,
    "real": 2.78
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "real",
        "type": "datum",
        "value": 1.45
      }
    }
  ],
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
};

Graflume.smith('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "real",
        "type": "datum",
        "value": 1.45
      }
    }
  ],
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
}

Callout

Show an explanatory callout with automatic collision avoidance and multilingual wrapping.

StatusLoading

callout

Custom callouts: annotations[] · datum · real · callout · placement:auto

Graflume.smith() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Callout · Row data
`real`quantitative	`imaginary`quantitative
0.12	-1.376
0.31	-1.265
0.5	-1.108
0.69	-0.912
0.88	-0.682
1.07	-0.429
1.26	-0.159
1.45	0.116
1.64	0.387
1.83	0.644
2.02	0.878
2.21	1.08
2.4	1.243
2.59	1.362
2.78	1.431

Show an explanatory callout with automatic collision avoidance and multilingual wrapping.

Browser API · Portable schema

Browser API

Graflume.smith()

const data = [
  {
    "imaginary": -1.376,
    "real": 0.12
  },
  {
    "imaginary": -1.265,
    "real": 0.31
  },
  {
    "imaginary": -1.108,
    "real": 0.5
  },
  {
    "imaginary": -0.912,
    "real": 0.69
  },
  {
    "imaginary": -0.682,
    "real": 0.88
  },
  {
    "imaginary": -0.429,
    "real": 1.07
  },
  {
    "imaginary": -0.159,
    "real": 1.26
  },
  {
    "imaginary": 0.116,
    "real": 1.45
  },
  {
    "imaginary": 0.387,
    "real": 1.64
  },
  {
    "imaginary": 0.644,
    "real": 1.83
  },
  {
    "imaginary": 0.878,
    "real": 2.02
  },
  {
    "imaginary": 1.08,
    "real": 2.21
  },
  {
    "imaginary": 1.243,
    "real": 2.4
  },
  {
    "imaginary": 1.362,
    "real": 2.59
  },
  {
    "imaginary": 1.431,
    "real": 2.78
  }
];

const options = {
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "Attach user-authored safe text to a datum, axis range, or normalized plot position.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "real",
        "type": "datum",
        "value": 1.45
      },
      "text": "Point and range highlights · 1.45"
    }
  ],
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      }
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
};

Graflume.smith('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "Attach user-authored safe text to a datum, axis range, or normalized plot position.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "real",
        "type": "datum",
        "value": 1.45
      },
      "text": "Point and range highlights · 1.45"
    }
  ],
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      }
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
}

Selection

Select and toggle data, then clear it from the background or Escape key.

StatusLoading

selection

Interactive selection: selection · multiple · toggle

Graflume.smith() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Selection · Row data
`real`quantitative	`imaginary`quantitative
0.12	-1.376
0.31	-1.265
0.5	-1.108
0.69	-0.912
0.88	-0.682
1.07	-0.429
1.26	-0.159
1.45	0.116
1.64	0.387
1.83	0.644
2.02	0.878
2.21	1.08
2.4	1.243
2.59	1.362
2.78	1.431

Select and toggle data, then clear it from the background or Escape key.

Browser API · Portable schema

Browser API

Graflume.smith()

const data = [
  {
    "imaginary": -1.376,
    "real": 0.12
  },
  {
    "imaginary": -1.265,
    "real": 0.31
  },
  {
    "imaginary": -1.108,
    "real": 0.5
  },
  {
    "imaginary": -0.912,
    "real": 0.69
  },
  {
    "imaginary": -0.682,
    "real": 0.88
  },
  {
    "imaginary": -0.429,
    "real": 1.07
  },
  {
    "imaginary": -0.159,
    "real": 1.26
  },
  {
    "imaginary": 0.116,
    "real": 1.45
  },
  {
    "imaginary": 0.387,
    "real": 1.64
  },
  {
    "imaginary": 0.644,
    "real": 1.83
  },
  {
    "imaginary": 0.878,
    "real": 2.02
  },
  {
    "imaginary": 1.08,
    "real": 2.21
  },
  {
    "imaginary": 1.243,
    "real": 2.4
  },
  {
    "imaginary": 1.362,
    "real": 2.59
  },
  {
    "imaginary": 1.431,
    "real": 2.78
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "selection": {
      "ariaLabel": "Interactive selection",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "key": "real",
      "mode": "multiple",
      "toggle": true
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
};

Graflume.smith('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "selection": {
      "ariaLabel": "Interactive selection",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "key": "real",
      "mode": "multiple",
      "toggle": true
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
}

View controls

Show or hide zoom, pan, reset, projection, fullscreen, and PNG export one menu at a time. Set controls: false to remove the entire toolbar.

StatusLoading

controls

Graflume.smith() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

View controls · Row data
`real`quantitative	`imaginary`quantitative
0.12	-1.376
0.31	-1.265
0.5	-1.108
0.69	-0.912
0.88	-0.682
1.07	-0.429
1.26	-0.159
1.45	0.116
1.64	0.387
1.83	0.644
2.02	0.878
2.21	1.08
2.4	1.243
2.59	1.362
2.78	1.431

Show or hide zoom, pan, reset, projection, fullscreen, and PNG export one menu at a time. Set controls: false to remove the entire toolbar.

Browser API · Portable schema

Browser API

Graflume.smith()

const data = [
  {
    "imaginary": -1.376,
    "real": 0.12
  },
  {
    "imaginary": -1.265,
    "real": 0.31
  },
  {
    "imaginary": -1.108,
    "real": 0.5
  },
  {
    "imaginary": -0.912,
    "real": 0.69
  },
  {
    "imaginary": -0.682,
    "real": 0.88
  },
  {
    "imaginary": -0.429,
    "real": 1.07
  },
  {
    "imaginary": -0.159,
    "real": 1.26
  },
  {
    "imaginary": 0.116,
    "real": 1.45
  },
  {
    "imaginary": 0.387,
    "real": 1.64
  },
  {
    "imaginary": 0.644,
    "real": 1.83
  },
  {
    "imaginary": 0.878,
    "real": 2.02
  },
  {
    "imaginary": 1.08,
    "real": 2.21
  },
  {
    "imaginary": 1.243,
    "real": 2.4
  },
  {
    "imaginary": 1.362,
    "real": 2.59
  },
  {
    "imaginary": 1.431,
    "real": 2.78
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "padding": {
    "top": 52
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
};

Graflume.smith('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "padding": {
    "top": 52
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
}

Accessibility

Pair ARIA descriptions and keyboard guidance with a semantic data table.

StatusLoading

accessibility

Graflume.smith() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Accessibility · Row data
`real`quantitative	`imaginary`quantitative
0.12	-1.376
0.31	-1.265
0.5	-1.108
0.69	-0.912
0.88	-0.682
1.07	-0.429
1.26	-0.159
1.45	0.116
1.64	0.387
1.83	0.644
2.02	0.878
2.21	1.08
2.4	1.243
2.59	1.362
2.78	1.431

Pair ARIA descriptions and keyboard guidance with a semantic data table.

Browser API · Portable schema

Browser API

Graflume.smith()

const data = [
  {
    "imaginary": -1.376,
    "real": 0.12
  },
  {
    "imaginary": -1.265,
    "real": 0.31
  },
  {
    "imaginary": -1.108,
    "real": 0.5
  },
  {
    "imaginary": -0.912,
    "real": 0.69
  },
  {
    "imaginary": -0.682,
    "real": 0.88
  },
  {
    "imaginary": -0.429,
    "real": 1.07
  },
  {
    "imaginary": -0.159,
    "real": 1.26
  },
  {
    "imaginary": 0.116,
    "real": 1.45
  },
  {
    "imaginary": 0.387,
    "real": 1.64
  },
  {
    "imaginary": 0.644,
    "real": 1.83
  },
  {
    "imaginary": 0.878,
    "real": 2.02
  },
  {
    "imaginary": 1.08,
    "real": 2.21
  },
  {
    "imaginary": 1.243,
    "real": 2.4
  },
  {
    "imaginary": 1.362,
    "real": 2.59
  },
  {
    "imaginary": 1.431,
    "real": 2.78
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Smith · Accessibility example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
};

Graflume.smith('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Smith · Accessibility example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "en",
  "mark": {
    "options": {
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "real",
    "title": "Normalized resistance",
    "type": "quantitative"
  },
  "y": {
    "field": "imaginary",
    "title": "Normalized reactance",
    "type": "quantitative"
  }
}

Smith · Basic implementation · Common features

The smallest runnable chart

Basic example

Graflume.smith()

ChartSpec 0.1 · options

Features shared by every chart

Header

Graflume.smith()

ChartSpec 0.1 · options

Tooltip

Graflume.smith()

ChartSpec 0.1 · options

Theme

Graflume.smith()

ChartSpec 0.1 · options

Legend

Graflume.smith()

ChartSpec 0.1 · options

Highlight

Graflume.smith()

ChartSpec 0.1 · options

Callout

Graflume.smith()

ChartSpec 0.1 · options

Selection

Graflume.smith()

ChartSpec 0.1 · options

View controls

Graflume.smith()

ChartSpec 0.1 · options

Accessibility

Graflume.smith()

ChartSpec 0.1 · options