react-occult
v0.0.6
Published
Layered Information Visualization based on React and D3
Downloads
18
Maintainers
Readme
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