Dc.js server-side (v0.9)

From Native Big Data Documentation
Jump to: navigation, search


dc.js server side

Native Big Data v 0.9 implements a server side implementation that can be connected with dc.js . This allows implement dc dashboards without browsers limitations.

The same report can be used in server-side or client-side mode. Client side will use crossfilter.js lib in a browser. Server side will use Native Big Data map reduce functions. Client side will have a upload option that allow to automatically transfer data from a url to a NBD server

An example report is available in https://www.nativebigdata.com/nbd_sim/covid_19.html. By default a report will use the client-side version. The server version will be used if a ?server=true parameter is used in the url:

Server side only works in a nativebig data server. Example loaded from www.nativebigdata.com cant be used a server-side report because it is not hosted in a Native Big Data Server


How to create a report

The COVID-19 report will be used as an example:

  • Create a html file like the followed one
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

	<title>dc.js with nbd server support </title>
    
	<!-- slyles -->
    <link type="text/css" rel="stylesheet" href="js/leaflet/leaflet.css" />
	<link type="text/css" rel="stylesheet" href="js/leaflet/MarkerCluster.css" />
	<link type="text/css" rel="stylesheet" href="js/leaflet/MarkerCluster.Default.css" />
	<link type="text/css" rel="stylesheet" href="css/dc.css"/>
	<link type='text/css' rel='stylesheet' href="css/nbd_fonts.css"/>
	
	
	<!-- dc -->
	<script type="text/javascript" src="js/d3/d3.js"></script>
	<script type="text/javascript" src="js/crossfilter/crossfilter.js"></script>
	<script type="text/javascript" src="js/dc/dc.js"></script>
	<script type="text/javascript" src="js/dc/dc_box.js"></script>
	<script type="text/javascript" src="js/dc/dc-leaflet.js"></script>
	<script type="text/javascript" src="js/leaflet/leaflet.js"></script>
	<script type="text/javascript" src="js/leaflet/leaflet.markercluster.js"></script>
	<script type="text/javascript" src="js/leaflet/leaflet-heat.js"></script>

	<!-- utils -->
		<script type="text/javascript" src="js/fileSaver/fileSaver.min.js"></script>
	
	<!-- nbd libs -->
	<script type="text/javascript" src="js/nbd/nbd.js"></script>
	<script type="text/javascript" src="js/nbd/nbd_serializer.js"></script>
	<script type="text/javascript" src="js/nbd/nbd_session.js"></script>
	<script type="text/javascript" src="js/nbd/nbd_http.js"></script>
	<script type="text/javascript" src="js/nbd/nbd_dc_plugin.js"></script>

	<!-- chart code comes here -->
	<script type="text/javascript" 
		src="js/examples/covid_19.js"
	></script>
	<!-- chart code end -->
	
</head>
<body onload = "NBD.dc.main()">

	<div id='float_container' style='display:inline-block;width:100%;height:12000px;border:1px solid #ddd'></div>

</body >
</html>

At this point the only the "chart code comes here" section should be changed.


  • Create a javascript file with your report configuration (covid_19.js in this example):
'use strict';


NBD.dc.cfg = {
	"nbd_server": "127.0.0.1",
	"urp"    : "urp:obj:/COVID_19",
	"room"   : null,
	"parser" : [ 
		  { "in": "cases"                               , "parser": "integer"                           }                           
		, { "in": "deaths"                              , "parser": "integer"                           }                           
		, { "in": "popData2019"                         , "parser": "integer"                           }
		, { "in": ["year","month","day"]                , "parser": "date"   , "out"   : "date"         } 
		, { "in": "countriesAndTerritories"                                  , "out"   : "country"      } 
		, { "in": "countryterritoryCode"                                     , "out"   : "country_code" } 
	],
	"url_data"  : "https://www.nativebigdata.com/server/covid_data.php",
	"create"    : create
};

function create(nbd_chart) {

	NBD.dc.geojson.load();

	NBD.colors("cases" , "orange");
	NBD.colors("deaths", "red");
	
	
	var groups = [
		  { name: "cases"          , "var": "cases"           , "metric": "sum" }
		, { name: "deaths"         , "var": "deaths"          , "metric": "sum" }
		, { name: "population"     , "var": "population"      , "metric": "sum" }
		, { name: "cases/1Mp"    , "custom":  function (o) { var n = o.value.cases.sum * 1000000; var d = o.value.population.sum;
													return (d > 0 && isFinite(d)) ?  n/d : 0; } } 
	];

	var groups_2 = [ 
		{ name: "cases"          , "var": "cases"           , "metric": "sum" } , 
		{ name: "deaths"         , "var": "deaths"          , "metric": "sum" } 
	];
	
	
	nbd_chart		
		.setGrps({ 
			"cases"                    : NBD.dc.getter ("cases" )
			, "deaths"                 : NBD.dc.getter ("deaths")
			, "population"             : NBD.dc.getter ("popData2019") 
		})
		.float('#float_container')
		.title("Covid 19 pandemic worldwide data")
		.src  ("https://www.ecdc.europa.eu/en/publications-data/download-todays-data-geographic-distribution-covid-19-cases-worldwide")

		.createChart ( 'gaugeChart'              , "Cases"      ,[  10 ,  30,  350 ,  75] ).getters( null                              , [ groups[0] ])
		.createChart ( 'gaugeChart'              , "Deaths"     ,[  10 , 110,  350 ,  75] ).getters( null                              , [ groups[1] ])
		.createChart ( 'gaugeChart'              , "cases/1Mp"  ,[  10 , 190,  350 ,  75] ).getters( null                              , [ groups[3] ])

		.createChart ( 'dateChart'               , "Evolution" ,[ 400 ,  30,  900 , 300] ).getters( NBD.dc.getter(["date","Day"] )    , groups_2, [ "lineChart" , [ "lineChart" , true ] ] )	
		
		.createChart ( 'rowChart'                , "Country"   ,[  10 , 330,  350 , 1010] ).getters( NBD.dc.getter("country")          , groups ).top(20)
		.createChart ( 'leafletChoroplethChart'  , "Countries" ,[ 400 , 330,  900 ,  500] ).getters( NBD.dc.getter("country_code")     , groups )
		.createChart ( 'leafletMarkerChart'      , "Location"  ,[ 400 , 850,  900 ,  500] ).getters( NBD.dc.getter("country_code" )    , groups )
}


  • NBD.dc.cfg : This object contains the basic configuration of the server side dc.js report:
    • "nbd_server": The ip or hostname of a Native Big Data server. In client mode this will be use to upload data. in server mode this server will execute all the map-reduce operations.
    • "urp"  : The urp of the data. In client mode this will be use to upload data. In server mode this must point to the data urp
    • "room"  : The room of the urp or null if the public room is used.
    • "url_data"  : url of the source of the data. Client-side reports will download data from this url or pass it to a NBD server in the upload data process. Server side reports don't uses this url.
    • "create"  : A Javascript function with the report creation code.
    • "parser"  : An object used to parse the CSV pointed by "url_data". This object must be an array of fields. Every field defines how to load a field from the CSV.
      • "in" : The column(s) name(s) of a field.
      • "out": The name of the output object
      • "parser" : The name of predefined parsers available:
        • integer : The field is a integer value.
        • float  : The field is a floating point number value.
        • date  : The field is a date.
        • coords  : The field constains coordinates
        • geojson : The field constains a geoJSON shape.


  • Create function: Contains the creation code. This function has a parameter witch is a nbd - dc.js empty report.

API:

    • setGrps : Defines the main groups object.
    • float  : The "div" container of the report in the HTML template.
    • title  : The title of the report. Is the text of the header
    • src  : A url of the source data. Important to link (and credit) to the owner of the data.
    • createChart : This function creates a new chart. Paramenters:
      • chart_type: The type of chart (see dc.js chart and some more): 'gaugeChart'
      • title: The title of the chart
      • coordinates: initial coordinates and size of the chart in pixels : [ left , top , width, height]
      • getters( dimension_getter, group_list, <modes> )
        • dimension_getter: getter on a dimension or null in a gaugeChart. NBD.dc.getters should be used as a factory of getters because this funcion creates server side compatible getters
        • group_list : A list of agrupations to be showed in the chart. Every agrupation must be in the format: { name: "..." , "var": "..." , "metric": "..." } or { name: "..." , "custom": f }
          • name: the name of the agrupation.
          • var: a var name from the main groups object.
          • metric: How to group: can be:
            • sum: The sum of the indicator values for very key
            • count: The number of records with a valid indicator for very key
            • sum%: The sum of the indicator values for very key as a percentage
            • count%: The number of records with a valid indicator for very key as a percentage
            • "max" : The max value
            • "min" : The min value
            • "mean": The mean value
            • "1"  : The 1 constant
            • "median"  : under development, not tested and only server-side: a median value stimation
            • "Q2"  : under development, not tested and only server-side: a Q2 quartile value
            • "Q1"  : under development, not tested only server-side: a Q1 quartile value
            • "Q3"  : under development, not tested only server-side: a Q3 quartile value
            • "std"  : under development, not tested only server-side: Standard desviation
            • "skewness" : under development, not tested only server-side: skewness value
            • "kurtosis" : under development, not tested only server-side: kurtosis value
          • custom: defines a JS function with an alternative way to calculate post-agregate values. As an example:
function (o) { var n = o.value.cases.sum * 1000000; var d = o.value.population.sum;													return (d > 0 && isFinite(d)) ?  n/d : 0; }
Retrieved from "http://wiki.nativebigdata.com/index.php?title=Dc.js_server-side_(v0.9)&oldid=119"