Skip to content

Data-Viz-Labs/DataViz-DojoKata

Repository files navigation

DataViz-DojoKata

Demo example DataVIz - DojoKata

In this example we build an website with HTML+CSS+JS with charts and connect to a node-express backend to get the data. This code it's intented to learn and generate from scratch, step by step.

  1. Create index.html & show with http-server
  2. Add Bootstrap@3 & JQuery@2 through a CDN like cdnjs
  3. Add D3@3.3 & NVD3@latest and generate an static chart
  4. Add a second chart (pref. some with d3.json() => {} )
  5. Create a node backend with express@4
  6. Connect both to populate chart by an AJAX call

To run, you need:

One term for the frontend:

  # Install http-server (globally as tool)
  $ npm install -g http-server
  
  # Run the webserver (in the project folder)
  $ hs
  
  # Go to your browser: http://localhost:8080

Another term for the backend:

  # Install express (locally inside the project folder) and dependencies
  $ npm install express
  $ npm install cors
  
  # Run
  # node server.js