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 - version 3 and version 4 are supported
  • simpledatavis.js

  <script src="https://d3js.org/d3.v4.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>
  <script type="text/javascript" src="vis/simpledatavis-groupedbarchart.js"></script>
  <script type="text/javascript" src="vis/simpledatavis-stackedbarchart.js"></script>
  <script type="text/javascript" src="vis/simpledatavis-rangebarchart.js"></script>

Usage

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

• HTML data attributes

  <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

  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

  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.