NatureNet-DataVis

NatureNet data visualization

nnvis.js contains two jQuery plugins. First, "dataParser"(deprecated) is used to parse data from NN APIs. Second, "nnchart" is used to draw a bar chart.

A demo of how to use nnvis.js can be found here: http://webpages.uncc.edu/jxia3/nnvis/ or "./index.html". The demo uses Fontawesome and Bootstrap for the UI.

Here is how to use the nnvis.js:

Step 1: Make sure those files are included in your page

    <!--  css for Fontawesome and Bootstrap -->
  	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">	
    <!--  css for the chart only. Important!-->
    <link rel="stylesheet" href="./nnvis.css">
    <!--  JavaScript dependencies -->
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <!--  Bootstrap -->
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <!--  nnvis.js -->
    <script type="text/javascript" src="./nnvis.js"></script>

Step 2: HTML markup structure, create a container for the chart

    <div class="chart_container text-center"></div>

Step 3: Plug the plugin into a DOM element

    var $chart_container = $(".chart_container");
    // plug nnchart into this DOM element
  	$chart_container.nnchart({
  		url: "http://someurl.from.nnDataAPI"
		type: "DesignIdea"
	});
	// Or, similarily, create a chart of observations by calling "nnchart" plugin.
	// However, you can't apply nnchart plugin to a same DOM object twice,
	// unless, the DOM object has removed the chart.
	$chart_container.empty();
  	$chart_container.nnchart({
		url: "http://someotherurl.from.nnDataAPI"
	  	type: "FieldNote"
	});