simple-data-vis v0.4.0

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 CouchDB and Cloudant views.

Once installed the module can be used to render JSON Array data visually onto a web page (with D3). The data can be provided directly or via a REST endpoint.

Install

• Node.js

  	```
  	npm install --save simple-data-vis
  	```

• browser

  	Include the following files in your HTML file:  
  
  	* [D3](https://d3js.org/) - version 3 and version 4 are supported
  	* [`simpledatavis.js`](https://github.com/ibm-watson-data-lab/simple-data-vis/blob/master/simpledatavis.js)
  
  	```html
  	<script src="https://d3js.org/d3.v4.min.js"></script>
  	<script src="simpledatavis.js"></script>
  	```  
  
  	Also include the desired [visualizations](https://github.com/ibm-watson-data-lab/simple-data-vis/wiki/Visualizations):
  
  	```html

  	```  

Usage

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

• HTML data attributes

  	```html
  	<div type="text" data-vis="https://some-data-url"
  	        data-vis-type="bar-chart"></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.)  
  
  	Additional attributes are available based on the visualization. See the __Visualizations__ section for more information.  

• JavaScript

  	```js
  	SimpleDataVis(URL_or_JSONArray)
  		.attr('type', 'bar-chart')
  		.render(selector)
  	```
  
  	where __URL\_or\_JSONArray__ is the url to retrieve the JSON data or the actual JSON data. The __render()__ function is called passing in the (CSS) selector of where the visualization will be placed.  

• Node.js

  	```js
  	var SimpleDataVis = require('simple-data-vis')
  
  	SimpleDataVis(URL_or_JSONArray)
  		.attr('type', 'bar-chart')
  		.on('end', function (data, selection) {
  			// chart has been created and available in the (D3) selection
  			var svghtml = selection.node().outerHTML
  		})
  		.render()
  	```
  
  	where __URL\_or\_JSONArray__ is the url to retrieve the JSON data or the actual JSON data. The __render()__ function is called and the SVG will be available as a D3 selection in the _onEnd_ callback.  

Additional Info

• API
• Visualizations
• Samples

Demo

The /demo folder of the repository contains the source for this page.