No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
vis
.gitignore
.npmignore
README.md
package.json
simpledatavis.js

README.md

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 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>

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"></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 respository contains the source for this page.