React Occult: EXPERIMENTAL, NOT PRODUCTION READY
Design
Demo
Contour with Violin/Heatmap, Axes Stock chart with annotations Scatter Plot NYC Hospital Neighbourhood Difference Chart Trendline
Full source code is at: Old Faithful Contour
Quick Guide to API
<XYFrame ...frameProps> <XAxis label='Rank' /> <YAxis left=50 label='Theaters' /> <Annotation type='y' label='a vertical divide line' y=100 /> <Annotation type=AnnotationCalloutCircle note= label: 'callout' title: 'an annotation' score=10 subject= radius: 10 x=100 y=100 /> <Line ...lineProps /> <Heatmap ...heatmapProps /> <Contour ...contourProps /> <Legend ...legnedProps /> <Gradient /> </XYFrame>
Design Brief
- Components are freely composed within a
Frame
. Each component may have its dedicated data. - All charts are translated into a render pipeline which contains only graphic primitives: areas, points and lines.
- Render Pipeline are visualized in layers, in format of canvas render queue or SVG/HTML elements.
Other thoughts:
- when render pipeline is rendered in canvas, when can improve performance with
reqAnimationFrame
. This is beyond the scope ofreact
rendering - when render pipeline is rendered in SVG/HTML, it is under
react
's control
Try in dev
- Download/Clone code
- Run commands
npm install // install dependencies
npm run dev // view demos in web browser at localhost:8080
Try in product
run command: npm install react-occult --save
Demo code
code is at: demo usage
Credits
Heavily inspired by semiotic
License
This project is licensed under the MIT License - see the LICENSE file for details