kopol

kopol.js

Select Task Type




Attribute Type 1

Attribute Type 2

Performance Time?

Don't Care Care

Accuracy?

Don't Care Care

Popularity?

Don't Care Care



Ranked Visualizations


What is kopol.js?

Kopol is a mini javascript visualization recommender. Kopol recommends you the ranked list of the most effective visualizations (Table, Line Chart, Bar Chart, Scatterplot, and Pie Chart) in response to the given tasks and data attributes. Kopol ranks visualizations based on the combination of users' performance time, accuracy, and popularity (users' preferences).

Recommendation model in kopol.js

To recommend ranked visualizations, kopol.js uses a decision tree that we trained using thousounds of user responses collected through a crowdsourced experiment (see our paper for details on experimental design and data collection). The decision tree model uses task and data attribute types as input features and predicts a set of visualization types ranked by their effectiveness in visualizing the data for the given task.

Ground truth values used for training the model will be calculated by taking into account normalized values of performance time, accuracy and popularity using the following formula:

      Visualization Score = (α × Time) + (β × Accuracy) + (γ × Preference)

where α, β, and γ indicate the weighting for each factor.

Getting Started

To use kopol.js in browser, include kopol.js file.

<script src="/js/kopol.min.js"></script>

getChartPeformance([task, attr1, attr2, α, β, γ])

This method returns a ranked list of 5 visualizations based on their effectiveness in response to the given task and data attribute types. kopol.js supports 10 tasks provided by the research by Amar et al. The tasks inlcude finding anomalies, retrieving values, finding groups, finding correlations, computing derived values, distribution, finding extremum, filtering, ordering, and determining range. Data attribute types supported by the current version include ordinal, numerical, and nominal. 


//Tasks :["Retrieve","Anomalies","Cluster","Correlation","Derived","Distribution","Extremum",Filter","Order","Range"] 

//Data Attributes :["Nominal","Ordinal","Numerical"] 

//α: a value between 0 to 1 that specifies the weighting/importance of time 

//β: a value between 0 to 1 that specifies the weighting/importance of accurcy 

//γ: a value between 0 to 1 that specifies the weighting/importance of preference 


getChartPeformance([task, attr1, attr2, , α, β, γ], function(val)
{
     // do something
});

Example: 

 //Code 
getChartPeformance(["Retrieve","Ordinal","Numerical", 0.5, 0.5, 0.5], function(val)
{
  console.log("best to worse: ",val);
});


 //Output
best to worse:  [ 'Table', 'BarChart', 'PieChart', 'Scatterplot', 'LineChart' ]