# Data Wrangling

The core of the CanvasXpress library has a large collection of functions to facilitate data wrangling without the need to make a server call. This capability empowers the end-user to explore the data effectively and efficiently. These functions can be called programatically or used directly trough one of the UIs.

Let's take the following dataset to showcase some of these methods.

Name Weight Height Waist Hip Age Gender Excercise
Keith 65.6 174 71.5 93.5 21 Male Low
Nina 51.6 161 66.5 92.0 22 Female Moderate
Freddy 80.7 194 83.2 95.0 28 Male Moderate
Tracey 49.2 160 61.2 91.0 19 Female Moderate
Isabelle 55.2 173 66.5 90.3 32 Female Low
Penny 48.7 151 61.6 90.0 35 Female Intense

# Grouping Data

Original Data
Group Data by Gender

Grouping can be done through the CanvasXpress configuration

Configuration

new CanvasXpress(
  targetId, 
  data, {
    graphType: "Boxplot",
    ...
    groupingFactors: ["Gender"],
});

or a function call after the visualization has been rendered

var cX = new CanvasXpress(targetId, data, config);
cX.groupSamples(["Gender"]);

# Facets

Facet by Exercise

Facets can be done through the CanvasXpress configuration

Configuration

new CanvasXpress(
  targetId, 
  data, {
    graphType: "Bar",
    ...
    segregateSamplesBy: ["Excercise"],
});

or a function call after the visualization has been rendered

var cX = new CanvasXpress(targetId, data, config);
cX.segregateSamples(["Excercise"]);

# Sort Data

Sort Data by Age
Sort Data by Height

Sorting can be done through the CanvasXpress configuration

Configuration

// Sort data by Age
new CanvasXpress(
  targetId, 
  data, {
    graphType: "Bar",
    sortData: [['var', 'smp', 'Age']]
});

//Sort data by Height
new CanvasXpress(
  targetId, 
  data, {
    graphType: "Bar",
    sortData: [['cat', 'smp', 'Height']]
});

or a function call after the visualization has been rendered

var cX = new CanvasXpress(targetId, data, config);

// Sort by Age
cX.modifySort(['var', 'smp', 'Age']);

// Sort by Height
cX.modifySort(['cat', 'smp', 'Height']);

# Corelating Data

Data can be correlated to its meta-data

Corelation between Age and Hip

Correlation can be done through a function call

Configuration

var cX = new CanvasXpress(targetId, data, config);
cX.correlateData(true, "Hip");

# Histogram Data

Histogram of Age

Histograms can be created through the CanvasXpress configuration

Configuration

new CanvasXpress(
  targetId, 
  data, {
    graphType: "Bar",
    histogramData: true
});

or a function call after the visualization has been rendered

var cX = new CanvasXpress(targetId, data, config);
cX.createHistogram();

# Clustering Data

Cluster Samples

Cluster data can be done through the CanvasXpress configuration

Configuration

new CanvasXpress(
  targetId, 
  data, {
    graphType: "Bar",
    samplesClustered: true
});

or a function call after the visualization has been rendered

var cX = new CanvasXpress(targetId, data, config);
cX.clusterSamples();

# Transform Data

Log data transform

Data transformation can be done through a funciton call

Configuration

var cX = new CanvasXpress(targetId, data, config);
cX.transform("log2");

# Transpose Data

Original Data
Transposed Data

Transposing data can be done through the CanvasXpress configuration

Configuration

new CanvasXpress(
  targetId, 
  data, {
    graphType: "Bar",
    transposeData: true
});

or a function call after the visualization has been rendered

var cX = new CanvasXpress(targetId, data, config);
cX.transpose();

# Pivot Data

Pivot data by Gender

Pivot data can be done through a funciton call

Configuration

var cX = new CanvasXpress(targetId, data, config);
cX.pivotX("Gender");