CSVIZ

Live example

Build process(npm all the thing)

$ npm install

// development
$ npm run watch

//production
$ npm run build

PS: If you have problem running the above commands, you can try to run npm run clean to clean up the build folder.

Architecture

First, we are using the flux architecture from Facebook.

Reference: Getting To Know Flux, the React.js Architecture

main.js is the entry point of the app which define the route with react-router, and the defaut page is MapPage which you can find under /pages/Map.

Actions

• MapActionCreators - trigger the view action to dispatcher
• MapServerActionCreators - listen on the server response event and send the server action to dispatcher

View(Components)

Our app is made from serval reusable component:

• Map component - render the map with mapbox and re-redender on indicator changes
• Map control component(sidebar) - the sidebar component, which contain other sub-component
  • control header(title, config)
  • indicator selector(selectbox for change indicator)
  • social pannel(share and download)
  • graph(gauge, bar chart, line chart...)

Pages

• Map page - main map
• Not found page - handle 404 page
• Edit apge

License

MIT