Example of doing linked highlighting with React, Vega, and Redux
An example of doing linked highlighting between separate visualization components using React, Vega, and Redux. The original structure and code for the server comes from Redux examples.
A line chart and a radial heatmap are drawn, rendering the same set of data. When the user mouses over either chart, highlighting marks are drawn on both charts. See linked-highlighting-react-d3-reflux for a similar example using React, D3, and Reflux.
Demo: http://pbeshai.github.io/linked-highlighting-react-vega-redux/
Charts with no highlighting
Charts with linked highlighting on mouse over
Install npm packages:
npm install
If you had an error installing vega's npm package involving missing pkg-config or some other error installing canvas, here are the steps I did to fix them using Homebrew:
brew update
brew install cask
brew install Caskroom/cask/xquartz
brew install cairo
Then I set my PKG_CONFIG_PATH
environment variable to /opt/X11/lib/pkgconfig
.
Alternative instructions: https://github.com/Automattic/node-canvas/wiki/Installation---OSX
Start the server:
npm start
Note the server uses webpack's hot reloading feature, which allows you to see changes you make to javascript automatically, without having to do a full page refresh.
To build the production files:
npm run build
Peter Beshai @pbesh