Commit 11f6ae1c authored by Alberto Pascual's avatar Alberto Pascual

initial version

parents
{
"name": "chernoff-faces",
"homepage": "https://lab.cluster.gsi.dit.upm.es/sefarad/chernoff-faces",
"authors": [
"gsi-upm"
],
"description": "Chernoff faces for sentiment visualisation",
"main": "chernoff-face.html",
"keywords": [
"sentiment",
"chernoff",
"polymer",
"web-components"
],
"dependencies": {
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"license": "MIT"
}
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<dom-module id="chernoff-face">
<style is="custom-style">
@import url("../../styles/app-theme.html");
</style>
<style type="text/css">
#chernoff {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<template>
<canvas id="chernoff"></canvas>
<span id="brand">{{brand}}</span>
</template>
<script>
function drawChernoffFace(el, widthP, hlE, pE, aE, cM) {
var width = widthP;
var height = widthP;
half_length_of_eyes_ratio = hlE;
position_of_eyes_ratio = pE;
angle_of_eyebrow_ratio = aE;
curvature_of_mouth_ratio = cM;
var c2 = el;
c2.width = width;
c2.height = height;
$(el).chernoff({
canvas: c2,
half_length_of_eyes_ratio: half_length_of_eyes_ratio,
position_of_eyes_ratio: position_of_eyes_ratio,
angle_of_eyebrow_ratio: angle_of_eyebrow_ratio,
curvature_of_mouth_ratio: curvature_of_mouth_ratio
});
}
Polymer({
is: 'chernoff-face',
properties: {
brand: {
type: String,
value: "Undefined"
},
sentiment: {
type: String,
value: "Neutral"
},
width: {
type: Number,
value: 200
},
height: {
type: Number,
value: 200
},
/* Half Length of Eyes Ratio */
hlE: {
type: String,
value: "0.9",
notify: true
},
/* Position of Eyes Ratio */
pE: {
type: String,
value: "0.9"
},
/* Angle of Eyebrow Ratio */
aE: {
type: String,
value: "0.9"
},
/* Curvature of Mouth Ratio */
cM: {
type: String,
value: "0.9"
}
},
ready: function() {
this.checkSentiment();
drawChernoffFace(this.$.chernoff, this.width, this.hlE, this.pE, this.aE, this.cM)
},
checkSentiment: function() {
if (this.sentiment == "Positive") {
this.hlE = 0.1;
this.pE = 0.3;
this.aE = 0.2;
this.cM = 0.2;
} else if (this.sentiment == "Negative") {
this.hlE = 0.9;
this.pE = 0.7;
this.aE = 0.8;
this.cM = 0.9;
} else {
this.hlE = 0.6;
this.pE = 0.4;
this.aE = 0.5;
this.cM = 0.5;
}
}
});
</script>
</dom-module>
:host {
margin: 0;
padding: 0;
width: 400px;
height: 300px;
text-align: center;
}
.top-bar{
width: 100%;
background-color: var(--dark-primary-color);
border-radius: 5px 5px 0 0;
color: white;
text-align: center;
height: 35px;
line-height: 35px;
}
paper-dialog {
background-color: white;
color: black;
max-height: 200px;
}
paper-icon-button {
color: gray;
}
.top-bar span {
vertical-align: middle;
}
\ No newline at end of file
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="chernoff-face.html">
<dom-module id="chernoff-faces">
<style is="custom-style">
@import url("../../styles/app-theme.html");
</style>
<link rel="import" type="css" href="chernoff-faces.css">
<template>
<!-- Shadow DOM -->
<paper-material elevation="1">
<div class="top-bar">
<iron-icon icon="{{icon}}"></iron-icon>
<span>{{title}}</span>
</div>
<template is="dom-repeat" items="{{data}}" as="face">
<chernoff-face sentiment="{{face.sentiment}}" brand="{{face.brand}}" width=90 height=90 style="float: left; margin: 10px; margin-left: 80px;"></chernoff-face>
</template>
<div style="width:100%; clear: both"></div>
</paper-material>
</template>
<script>
var filtered = false;
Polymer({
is: 'chernoff-faces',
properties: {
data: {
type: Array,
value: [{"sentiment":"Positive", "brand": "Vodafone"},{"sentiment":"Positive", "brand": "$AAPL"},{"sentiment":"Neutral", "brand": "$GOOG"}] //default value for data array.
},
icon: {
type: String,
value: "face"
},
title: {
type: String,
value: "Chernoff Faces Chart"
},
query: {
type: String,
observer: '_queryChanged'
},
index: {
type: String
},
subindex: {
type: String
},
fields: {
type: Array,
value: function() { return []; }
},
field: {
type: String
},
host: {
type: String
},
param: {
type: String,
notify: true
},
filters: {
type: Array,
notify: true,
value: function() { return []; }
}
},
observers: [
'_filtersChange(filters.*)'
],
ready: function() {
this.field ? this.queryDefault() : undefined
},
queryDefault: function() {
var client = new $.es.Client({
hosts: this.host
});
var that = this
client.search({
// undocumented params are appended to the query string
index: this.index,
type: this.subindex,
body: {
size: 10000,
query: {
match_all: {}
}
}
}).then(function (resp) {
var hits = resp.hits.hits;
var results = [];
var aparitions = [];
var aux = [];
hits.forEach(function(entry) {
if(results[entry._source.name] == undefined){
results[entry._source.name] = 0
aparitions[entry._source.name] = 1
if (entry._source.sentiment == "Positive")
results[entry._source.name] = 1
if (entry._source.sentiment == "Negative")
results[entry._source.name] = 1
} else {
aparitions[entry._source.name] ++
if (entry._source.sentiment == "Positive")
results[entry._source.name] += 1
if (entry._source.sentiment == "Negative")
results[entry._source.name] -= 1
}
});
for (key in results) {
if (results[key] > 1)
aux.push({"brand": key, "sentiment": "Positive"})
else if (results[key] == 0)
aux.push({"brand": key, "sentiment": "Neutral"})
else
aux.push({"brand": key, "sentiment": "Negative"})
}
var tuples = [];
for (var key in aparitions) tuples.push([key, aparitions[key]]);
tuples.sort(function(a, b) {
a = a[1];
b = b[1];
return a > b ? -1 : (a < b ? 1 : 0);
});
aparitions = []
for (var i = 0; i < tuples.length; i++) {
var key = tuples[i][0];
var value = tuples[i][1];
aparitions[i] = key
// do something with key and value
}
aparitions = aparitions.splice(0,3)
results = []
var cnt = 0
aux.forEach(function(entry) {
if(cnt != 4) {
if(entry.brand == aparitions[cnt]){
results.push({"brand": entry.brand, "sentiment": entry.sentiment})
cnt++
}
} else
return
})
that.data = results
});
},
queryChange: function(value) {
var client = new $.es.Client({
hosts: this.host
});
var that = this
client.search({
// undocumented params are appended to the query string
index: this.index,
type: this.subindex,
body: {
size: 10000,
query: {
multi_match:{
query: this.query,
fields: this.fields
}
}
}
}).then(function (resp) {
var hits = resp.hits.hits;
var results = [];
var aparitions = [];
var aux = [];
hits.forEach(function(entry) {
if(results[entry._source.name] == undefined){
results[entry._source.name] = 0
aparitions[entry._source.name] = 1
if (entry._source.sentiment == "Positive")
results[entry._source.name] = 1
if (entry._source.sentiment == "Negative")
results[entry._source.name] = 1
} else {
aparitions[entry._source.name] ++
if (entry._source.sentiment == "Positive")
results[entry._source.name] += 1
if (entry._source.sentiment == "Negative")
results[entry._source.name] -= 1
}
});
for (key in results) {
if (results[key] > 1)
aux.push({"brand": key, "sentiment": "Positive"})
else if (results[key] == 0)
aux.push({"brand": key, "sentiment": "Neutral"})
else
aux.push({"brand": key, "sentiment": "Negative"})
}
var tuples = [];
for (var key in aparitions) tuples.push([key, aparitions[key]]);
tuples.sort(function(a, b) {
a = a[1];
b = b[1];
return a > b ? -1 : (a < b ? 1 : 0);
});
aparitions = []
for (var i = 0; i < tuples.length; i++) {
var key = tuples[i][0];
var value = tuples[i][1];
aparitions[i] = key
// do something with key and value
}
aparitions = aparitions.splice(0,3)
results = []
var cnt = 0
aux.forEach(function(entry) {
if(cnt != 4) {
if(entry.brand == aparitions[cnt]){
results.push({"brand": entry.brand, "sentiment": entry.sentiment})
cnt++
}
} else
return
})
that.data = results
});
},
/** Fired when a search is made.
*
* @event query-change
* @param {Object} detail
* @param {Object} detail.query The search string.
*/
_queryChanged: function() {
this.query ? this.queryChange(this.query) : this.queryDefault();
},
_filtersChange: function() {
if(filtered){
var client = new $.es.Client({
hosts: this.host
});
var that = this
client.search({
// undocumented params are appended to the query string
index: this.index,
type: this.subindex,
body: {
size: 10000,
query: {
bool: {
must: this.filters,
}
}
}
}).then(function (resp) {
var hits = resp.hits.hits;
var results = [];
var aparitions = [];
var aux = [];
hits.forEach(function(entry) {
if(results[entry._source.name] == undefined){
results[entry._source.name] = 0
aparitions[entry._source.name] = 1
if (entry._source.sentiment == "Positive")
results[entry._source.name] = 1
if (entry._source.sentiment == "Negative")
results[entry._source.name] = 1
} else {
aparitions[entry._source.name] ++
if (entry._source.sentiment == "Positive")
results[entry._source.name] += 1
if (entry._source.sentiment == "Negative")
results[entry._source.name] -= 1
}
});
for (key in results) {
if (results[key] > 1)
aux.push({"brand": key, "sentiment": "Positive"})
else if (results[key] == 0)
aux.push({"brand": key, "sentiment": "Neutral"})
else
aux.push({"brand": key, "sentiment": "Negative"})
}
var tuples = [];
for (var key in aparitions) tuples.push([key, aparitions[key]]);
tuples.sort(function(a, b) {
a = a[1];
b = b[1];
return a > b ? -1 : (a < b ? 1 : 0);
});
aparitions = []
for (var i = 0; i < tuples.length; i++) {
var key = tuples[i][0];
var value = tuples[i][1];
aparitions[i] = key
// do something with key and value
}
aparitions = aparitions.splice(0,3)
results = []
var cnt = 0
aux.forEach(function(entry) {
if(cnt != 4) {
if(entry.brand == aparitions[cnt]){
results.push({"brand": entry.brand, "sentiment": entry.sentiment})
cnt++
}
} else
return
})
that.data = results
});
}
}
});
</script>
</dom-module>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment