Semiotic

Semiotic (v 1.18.0+) is a data visualization framework for React.

It provides three types of frames XYFrame, OrdinalFrame, NetworkFrame, to deploy a wide variety of charts.

  • XYFrame: XY data i.e. line charts and scatterplots
  • OrdinalFrame: categorical data i.e. bar charts, violin plots, parallel coordinates
  • NetworkFrame: topological and network data i.e. flow diagrams, network visualization, and hierarchical views

This library is created and maintained by Elijah Meeks.

These docs were created in collaboration with Susie Lu.

Go to nteract's slack to discuss in the #semiotic channel.

Getting Started

Install and save semiotic to your project with yarn or npm.

yarn add -E semiotic
//or npm
npm i -SE semiotic

with the following import syntax:

import NetworkFrame from "semiotic/lib/NetworkFrame"

or you can use the bundled version on unpkg.com

<script src="https://unpkg.com/semiotic" />

with the following import syntax:

const { NetworkFrame } = Semiotic

In addition to the React components, these examples also rely on some basic CSS for styling.

Guides

Examples