Skip to content

Integration with a JS project

Jump to bottom
archv edited this page Jun 5, 2020 · 3 revisions

A project is written using JavaScript language.

Loading necessary JS and CSS

Connecting a project requires several css and js files to be included in the html.

Please include those tags in the <head> tag:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/ju-1.12.1/jq-3.3.1/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/datatables.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/css/select2.min.css"/>
<link rel="stylesheet" href="assets/pc/css/ParallelCoordinates.css">

Include those tags in the <body> tag:

<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript"
                src="https://cdn.datatables.net/v/ju-1.12.1/jq-3.3.1/jszip-2.5.0/dt-1.10.20/fc-3.3.0/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/simple-statistics.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.19.1/URI.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/g/mark.js(jquery.mark.min.js),datatables.mark.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/js/select2.full.js"></script>

<script type="text/javascript" src="assets/pc/js/ParallelCoordinates.js"></script>

Load files from git

At this point we assume that parallel coordinates will be loaded in assets/pc folder relative to the index.html.

Load the necessary files from git:

git clone https://github.com/PanDAWMS/InVEx-ParCoords-SA.git assets/pc

Then, a parallel coordinates object needs a div.

Include the div

Add a <div> tag to the html page.

<div id="ParallelCoordinatesGraph"></div>

This id is then used to insert a diagram into it. The page can have multiple divs to have multiple parallel diagrams on the page.

<div id="ParallelCoordinatesGraph1"></div>
<div id="ParallelCoordinatesGraph2"></div>
<div id="ParallelCoordinatesGraph3"></div>

ParallelCoordinates object creation

Prepare the arrays with data and create the ParallelCoordinates object:

var PCobject = new ParallelCoordinates(div_id, features, objects, clusters_list, clusters_color_scheme, options);

where the variables are:

div_id - id of the div, i.e. "ParallelCoordinatesGraph1"

features - array with feature names, i.e. ["feature1", "feature2"]

objects - array with objects.

[ 
    ["object1_feature1_value", "object1_feature2_value"], 
    ["object1_feature2_value", "object2_feature2_value"] 
]

clusters_list - a feature name to automatically color the lines, or null.

clusters_color_scheme - set null in case of automatic coloring,

options - array with options, can be omitted to be automatic

{
​​​    draw:                        // Draw options
    {
​​​​        framework: "d3",         // Framework 
        mode: "cluster"​​​​,         // Draw mode: print (no colors) or cluster (with colors)
        parts_visible:           // Visible parts of the diagram
        {
​​​​            cluster_table: true
​​​​​            hint: true
​​​​​            selector: true
​​​​​            table: true
​​​​​            table_colvis: true
​​​​​        },
​​​        skip: {                 // Feature skip options
​​​​            dims:
​​​​​            {
                mode: "show"    // Skip mode: show, hide, none
​​​​                strict_naming: true 
​​​​​                values: [...]   // Features to be shown on diagram by default
​​​​​            },
        },
}

Parallel coordinates example

index.html

<html>
    <head>
	...
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/ju-1.12.1/jq-3.3.1/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/datatables.min.css"/>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro&display=swap">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/css/select2.min.css"/>
	<link rel="stylesheet" href="assets/pc/css/ParallelCoordinates.css">
	...
    </head>
    <body>
        ...
	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
  	<script type="text/javascript" src="https://cdn.datatables.net/v/ju-1.12.1/jq-3.3.1/jszip-2.5.0/dt-1.10.20/fc-3.3.0/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/datatables.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
	<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/simple-statistics.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.19.1/URI.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/g/mark.js(jquery.mark.min.js),datatables.mark.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.9/js/select2.full.js"></script>
	
	<script type="text/javascript" src="assets/pc/js/ParallelCoordinates.js"></script>
	...

	<div id="ParallelCoordinatesGraph1"></div>
	<div id="ParallelCoordinatesGraph2"></div>

	...

	<script>

	//Prepare the data
	...

	// Create ParCoords object
	var PCobject1 = new ParallelCoordinates("ParallelCoordinatesGraph1", features1, objects1, null, null);    // Parallel Coordinates with blue lines
	var PCobject2 = new ParallelCoordinates("ParallelCoordinatesGraph2", features2, objects2, "color_feature_name", null);    // Parallel coodinates with lines colored by a feature name

	</script>


    </body>
</html>
Clone this wiki locally