Semiotic 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 scatterplotsOrdinalFrame
: categorical data i.e. bar charts, violin plots, parallel coordinatesNetworkFrame
: topological and network data i.e. flow diagrams, network visualization, and hierarchical viewsThis library is created and maintained by Elijah Meeks.
These docs were created in collaboration with Susie Lu.
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
These examples use some CSS that override the default Semiotic styling.
Create a fork of the repo.
If you are creating a new page
src/examples
or src/guides
folderssrc/App.js
file, search for the PAGES
array, this array drives the navigation on the left, the url to component specification, and the image associated with the new pageTips for creating the page
MarkdownText
component on your page you can use backslash \
to escape any additional backticks and $ signs in template coderenderMode
, you may see an error like ERROR: no label found for renderMode
this means that DocumentFrame
couldn't find a category to put that prop into, go into the src/process.js
file and add that new prop into the corresponding process step. This allows DocumentFrame
to group the code snippet props into meaningful categoriesTest your code snippets
src/Test.js
import React from "react"
statement at the toplocalhost:3000/test
to see how your component looks, make sure it matches exactly to the component you originally createdoverrideProps
on DocumentFrame
, this allows you to pass an object of props where the key is the same property you're sending to Semiotic, but instead you give it a string value. See the candlestick example for an example where a title needs to be overwritten because it contains JSX pre
on DocumentFrame
to add initial code outside of your frame props, See the candlestick example to see how it adds the import statement import { scaleTime } from "d3-scale"
to the code snippet
overrideProps take the prop as a key, and a text. you need to
Using the pre value, baseball exampleIf you created a new page instead of adding to an existing guide, create an image for your new page
public/assets/img
foldersrc/App.js
file entry you made in the PAGES
array, make sure you update the associated image with the name of the file you added to the public folderSubmit a pull request