search

zeitgeistpm / ui

Zeitgeist general prediction markets application.
https://app.zeitgeist.pm
Apache License 2.0
15 stars 4 forks source link

Research Data Visualization Options #2439

Open robhyrk opened 1 month ago

robhyrk commented 1 month ago

  1. Nivo

    • built with React; uses components
    • built on top of D3.js
    • looks good out of the box; nice animations, gradients, etc
    • Nivo web dashboard provides ways to preview charts with imported data
    • provides SSR ability
    • easy to use, responsive
    • examples: Streams, Line, Calendar , Bullet (for Scalar markets)
    • more examples

  2. Highcharts

    • used by COingecko and Coinmarket cap
    • has a suite dedicated for financial charts
    • Tyepscript + React support
    • financial chart tools available for add-ons (% change, indicators, etc)
    • dynamic charts for live changes - zoomable charts

  3. VisX (AirBnB)

    • unopiniated and meant to be used to build your own charting library
    • uses React components
    • built on top of D3.js
    • lots of customization options
    • provides for customized styling and animations to be used
    • would take extra effort upfront to create
    • doesn't seem to focus on financial charts
    • examples of components

  4. Chart.JS

    • most popular (64K Stars on Github)
    • simple to use
    • slightly fewer customization options than Nivo
    • offers good customization for tooltips on Line Charts
    • including styling looks good but is less advanced than Nivo
    • line chart example

  5. React Financial Charts

    • examples
    • likely the best option if we want to opt for fiancial charts
    • uses React components
    • offers easy way to zoom in/out of data timelines
    • can easily switch between candles, lines, and other visualizations
    • includes indicators like ATR, MACD, etc

  6. Plotly

    • more advanced options/charts available
    • built on top of D3.js
    • visualizations not as appealing as first two options
    • only option that seems to offer Candlestick charts as a template
    • feels clunky

  7. D3

    • very customizable
    • likely overkill for what we need however

Considerations:

Overall, Nivo seems like the good balanced option between customizability and an out of box solution since it's built with React components and has decent customization options. Highcharts would be a great choice if we decide to pursue a more traditional financial chart option and offers good support for style customization. It also contains plenty of additional features and financial tools. D3 alone seems unecessary unless we plan to make completely custom designs.