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