Skip to content

Latest commit

 

History

History
96 lines (62 loc) · 3.7 KB

README.md

File metadata and controls

96 lines (62 loc) · 3.7 KB
Raw

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:

     <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

Demo

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