simple-data-vis

Simple Data Vis

Simple Data Vis is a JavaScript module initially developed to visualize data gathered by the Simple Logging Service for its visualization page. It is however generic enough that can be used to visual various types of data including cloudant.com views.

Once installed the module can be used to access any REST API that returns JSON array of key/value pairs and have that data visually displayed onto the web page (using D3).

Install

• Node.js

  npm install --save simple-data-vis
  

• browser

  Include the following files in your HTML file:

  • D3
  • simpledatavis.js

  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="simpledatavis.js"></script>
  

  Also include the desired visualizations:

  <script type="text/javascript" src="vis/simpledatavis-barchart.js"></script>
  <script type="text/javascript" src="vis/simpledatavis-bubblechart.js"></script>
  <script type="text/javascript" src="vis/simpledatavis-piechart.js"></script>
  

Usage

The module can be initialized via JavaScript or using HTML data attributes:

• HTML data attributes

  <div type="text" data-vis="http://some-data-url"
          data-vis-type="bar-chart"
          data-vis-ondata="onDataCallback"></div>
  

  data-vis - (Required) the url to retrieve the JSON data
  data-vis-type - (Optional) the type of visualization to use to render the data (e.g., bar-chart, pie-chart, bubble-chart, etc.)
  data-vis-ondata - (Optional) the callback function when data has been retrieved but before visualization is rendered

  Additional attributes are available based on the visualization. See the Visualizations section for more information.

• Javascript

  var datavis = SimpleDataVis(dataUrl);
  datavis
  	.on('end', function (data, svgnode) {
  		// chart has been created and available in the svgnode (D3 selection)
  	})
  	.render(selector);
  

  where dataUrl is the url to retrieve the JSON data. The render() function is called passing in the selector where the visualization will be placed. For Node.js, the selector is not used/required instead the SVG will be available as a D3 selection in the onEnd callback.

Additional Info

Additional information available in the Simple Data Vis Wiki.

Demo

Examples can be found in the /demo folder of the respository.