Prism Charts

Prism's react component library of charts

Vega-lite

All of our charts are built with vega-lite, an open source charting library that provides a declarative JSON syntax for creating many different visuals and visual interactions.

What's in here

All of the chart code lives in the src/features/charts directory. Here is a general overview of the file structure:

📦 src/features/charts
 ┣ 📂
 ┣ ┗ 📂 [chartType]
 ┣ ┃ ┣ 📜 constants.ts // lists possible encodings and features for the given chart
 ┣ ┃ ┣ 📜 [chartType].tsx // method for generating spec & react component for the given chart type
 ┣ ┗ ┗ 📜 types.ts // type specific to the chart type
 ┣ 📂 construction (name to change)
 ┣ ┣ 📂 chart-features
 ┃ ┃ ┗ 📜 [feature-name].ts // methods for generating vl code for given feature
 ┣ ┣ 📂 encoding
 ┃ ┃ ┗ 📜 [encoding-channel-name].ts // methods for generating vl encoding for given channel
 ┣ ┣ 📂 mark
 ┃ ┃ ┗ 📜 mark.ts // method for generating vl mark
 ┣ ┣ 📂 top-level-props
 ┃ ┃ ┗ 📜 top-level-props.ts // method for generating vl top level configuration
 ┣ ┃ 📂 types //
 ┣ ┃ 📜 constants.ts // maps feature and encoding names to their construction methods
 ┣ ┗ 📜 utils.ts // methods for putting the different features and encodings together
 ┣ 📜 base-chart.tsx // wrapper for all charts
 ┣ 📜 types.ts // types used across components
 ┗ 📜 utils.ts // misc util methods for charts

Notes

• Components
  • Each chart type will have its own folder in charts/components. Each component file has a method for generating the spec and a separate react component for the chart. This gives us some flexibility if we want to use just the spec and not the component in other systems
• Construction (finding a better name for this)
  • This directory is responsible for building the vega lite spec.
  • Vl-specs consist mainly of encodings, marks, parameters, and data. We can put these pieces together and layer them on top of each other to make more complex charts
  • Encodings
    • Charts have required and optional encodings. For example, for a scatter plot to really be a scatter plot, it needs an x and y axis, so x and y are required encodings. A scatter plot can also have color, shape, and size features. These are optional encodings. We define these in the chart component constants.
  • Features
    • Different charts can also have different features. For example, a scatter plot can support trend lines, whereas they don’t make sense on a pie chart. We define the list of optional features in the chart component constants.
  • To put together all the pieces of a chart, we define what the optional encodings and optional features are for a given chart. The method finalizeSpec is responsible for going through the provided chart props and adding the correct encodings and features.

Running locally

yarn install
yarn dev