Skip to content

GitLab

Commit edd9c49d authored by Alberto Pascual's avatar Alberto Pascual
Browse files

new viz

parent 48c069da
Hide whitespace changes
Inline Side-by-side
dashboard-reddit.env.html
View file @ edd9c49d
......@@ -12,7 +12,9 @@
<link rel="import" href="/bower_components/paper-item/paper-item.html">
<link rel="import" href="/bower_components/paper-menu/paper-menu.html">
<link rel="import" href="/elements/entities-chart/entities-chart.html">
<link rel="import" href="/elements/people-chart/people-chart.html">
<link rel="import" href="/elements/news-chart/news-chart.html">
<link rel="import" href="/elements/tweet-chart/tweet-chart.html">
<link rel="import" href="/elements/leaflet-maps/leaflet-map.html">
<dom-module id="dashboard-reddit">
......@@ -27,6 +29,13 @@
handle-as="json"
last-response="{{queries}}"></iron-ajax>
<div style="width:10%; padding: 1em; display:inline-block">
<img style="width: 100%;"src="/images/trivalent.jpg">
</div>
<div style="width:80%; padding-bottom: 12px; text-align:center; display:inline-block">
<img style="width: 30%; margin:0 auto;"src="/images/logo-gsi-crawler.png">
</div>
<paper-tabs selected="{{selected}}">
<paper-tab>Dashboard</paper-tab>
<paper-tab>Sparql Editor</paper-tab>
......@@ -35,19 +44,19 @@
<iron-pages selected="{{selected}}">
<div>
<div class="row">
<material-search search-value="{{query}}"></material-search>
<material-search active="true" search-value="{{query}}"></material-search>
</div>
<br>
<div class="row" style="width: 100%; display: inline-block">
<div style="width: 32%; margin-right: 2%; float: left">
<div class="row">
<div class="col-md-3">
<number-chart
icon="/images/news.ico"
stylebg="bg-yellow"
title="Items selected"
title="News selected"
data="{{data}}">
</number-chart>
</div>
<div style="width: 32%; margin-right: 2%; float: left">
<div class="col-md-3">
<number-chart
data="{{data}}"
object="cnn"
......@@ -57,7 +66,7 @@
stylebg="bg-red">
</number-chart>
</div>
<div style="width: 32%; float: left">
<div class="col-md-3">
<number-chart
data="{{data}}"
object="The New York Times"
......@@ -68,21 +77,22 @@
stylebg="bg-green">
</number-chart>
</div>
<div class="col-md-3">
<number-chart
data="{{data}}"
object="twitter"
aggKey="schema:author"
title="Twitter"
icon="/images/twitter.ico"
subtitle="Total"
aggkey="location"
stylebg="bg-aqua">
</number-chart>
</div>
</div>
<div class="row" style="width: 100%; display: inline-block">
<div class="chart_container" style="right: 0; float: right">
<entities-chart
field="entities.dbps:anyURI"
data="{{data}}"
title="Entities founded"
icon="icons:list"
param="{{param}}"
id="entitieschart"
filters="{{filters}}">
</entities-chart>
</div>
<div class="chart_container" style="left: 0; float: left">
<br>
<div class="row">
<div class="col-md-6">
<google-chart
field="schema:author"
data="{{data}}"
......@@ -93,28 +103,49 @@
icon='icons:reorder'
options='{"title": "Source"}'
cols='[{"label": "type", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart>
</google-chart>
</div>
<div class="col-md-6">
<entities-chart
field="topics.rdfs:subClassOf"
data="{{data}}"
title="Topics"
icon="icons:list"
param="{{param}}"
id="entitieschart"
filters="{{filters}}">
</entities-chart>
</div>
</div>
<div class="row" style="width: 100%">
<div class="chart_container" style="left: 0; float: left">
<br>
<div class="row">
<div class="col-md-6">
<google-chart
field="sentiment"
data="{{data}}"
id='pie-chart5'
extra-id='pie-chart5'
id='barsentiment'
extra-id='1'
type='column'
filters="{{filters}}"
icon='social:mood'
options='{"title": "Sentiments"}'
cols='[{"label": "Sentiment", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart>
</div>
<div class="chart_container" style="left: 0; float: right">
</div>
<div class="col-md-6">
<people-chart
data="[[getPeople(data)]]"
title="People"
icon="maps:person-pin"
param="{{param}}"
id="entitieschart"
filters="{{filters}}">
</people-chart>
</div>
</div>
<div class="chart_container row" style="left: 0; float: left; width: 100%">
<br>
<div class="row">
<div class="col-md-12">
<google-chart
field="schema:datePublished"
data="{{data}}"
......@@ -123,15 +154,17 @@
type='area'
filters="{{filters}}"
icon='icons:trending-up'
options='{"title": "News rate"}'
options='{"title": "Temporal Trends"}'
cols='[{"label": "Date", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart>
</div>
</div>
<br>
<div class="row">
<div class="chart_container col-md-6" style="left: 0; float: left;">
<div class="col-md-6">
<paper-tabs selected="{{selectedpage}}">
<paper-tab><iron-icon icon="icons:receipt"></iron-icon> List of news</paper-tab>
<paper-tab>Social Media</paper-tab>
<paper-tab><iron-icon icon="icons:speaker-notes"></iron-icon> Social Media</paper-tab>
</paper-tabs>
<iron-pages class="lists" selected="{{selectedpage}}">
<div>
......@@ -142,22 +175,28 @@
icon='icons:receipt'>
</news-chart>
</div>
<div></div>
<div>
<tweet-chart
datos = "{{data}}"
title="List of tweets"
filters="{{filters}}"
icon='communication:comment'>
</tweet-chart></div>
</iron-pages>
</div>
<div class="chart_container col-md-6">
<div class="col-md-6">
<div class="top-bar">
<iron-icon icon="maps:my-location"></iron-icon>
<span>Geolocated News and Social Media</span>
</div>
<leaflet-map fit-to-markers>
<!--<template is="dom-repeat" items="[[getPoints(places.*)]]" as="place">
<template is="dom-repeat" items="[[getPlaces(data)]]" as="place">
<leaflet-marker latitude="{{place.lat}}" longitude="{{place.lng}}" title="{{place.name}}">
<b>Name:</b>
<b>Headline:</b>
<span>{{place.name}}</span>
</leaflet-marker>
</template>-->
<leaflet-marker latitude="40.4520074" longitude="-3.7258213" title="Demo place">
</template>
<!-- <leaflet-marker latitude="40.4520074" longitude="-3.7258213" title="Demo place">
<b>Name:</b>
<span>Demo<span>
</leaflet-marker>
......@@ -171,7 +210,7 @@
</leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="48.827534" longitude="2.370932" title="Boulangerie de Tolbiac">
</leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="41.386084311622" longitude="2.1677023172379" title="St Christopher's Inn">
</leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="41.38985943707" longitude="2.1471921354532" title="Sunotel Junior">
</leaflet-marker>
</leaflet-marker>-->
</leaflet-map>
</div>
</div>
......@@ -185,7 +224,7 @@
</iron-pages>
<div style="background-color:#ccc; padding: 1%;">
<div style="width:32%; margin: 0 auto">
<img height="60px" src="/images/gsi.png"> © 2017 Grupo de Sistemas Inteligentes GSI-UPM
<img height="60px" src="/images/gsi.png"> © 2017 Grupo de Sistemas Inteligentes GSI-UPM
</div>
</div>
</template>
......@@ -250,6 +289,46 @@
ready = true;
this._query();
},
getPeople: function(data){
var people = []
//console.log(data)
data.hits.hits.forEach( function (entry){
//console.log(entry)
entry._source.entities.forEach(function(entity){
//console.log(entity)
if ('dbo:thumbnail' in entity) {
people.push({'name': entity['nif:anchorOf'], 'image': entity['dbo:thumbnail']})
}
})
})
people = this.removeDuplicates(people, 'name')
console.log(people)
return people.slice(0,9)
},
removeDuplicates: function(originalArray, prop){
var newArray = [];
var lookupObject = {};
for(var i in originalArray) {
lookupObject[originalArray[i][prop]] = originalArray[i];
}
for(i in lookupObject) {
newArray.push(lookupObject[i]);
}
return newArray;
},
getPlaces: function(data){
var places = []
data.hits.hits.forEach( function (entry){
entry._source.entities.forEach(function(entity){
if ('latitude' in entity) {
places.push({'lat': entity.latitude, 'lng': entity.longitude, 'name': entry._source['schema:headline']})
}
})
})
return places
},
_search: function(){
//console.log("search fired")
//console.log(this.query.length)
......@@ -275,7 +354,7 @@
query: {
multi_match:{
query: this.query,
fields: ['schema:author', 'schema:headline', 'sentiments', 'schema:about']
fields: ['schema:author', 'schema:headline', 'sentiments', 'schema:about', 'entities.nif:anchorOf']
}
},
sort:{'schema:datePublished':{order: "desc"}},
......@@ -296,9 +375,18 @@
}
}
},
'entities.dbps:anyURI': {
'entities.rdfs:subClassOf': {
terms: {
field: "entities.rdfs:subClassOf.keyword",
order: {
_count: "desc"
}
}
},
'topics.rdfs:subClassOf': {
terms: {
field: "entities.dbps:anyURI.keyword",
field: "topics.rdfs:subClassOf.keyword",
size: 20,
order: {
_count: "desc"
}
......@@ -335,7 +423,7 @@
that.ids = myids;
//console.log(that.ids)
that.data = resp;
//console.log(that.data);
console.log(that.data);
});
}
......@@ -373,9 +461,18 @@
}
}
},
'entities.dbps:anyURI': {
'entities.rdfs:subClassOf': {
terms: {
field: "entities.rdfs:subClassOf.keyword",
order: {
_count: "desc"
}
}
},
'topics.rdfs:subClassOf': {
terms: {
field: "entities.dbps:anyURI.keyword",
field: "topics.rdfs:subClassOf.keyword",
size: 20,
order: {
_count: "desc"
}
......@@ -412,7 +509,7 @@
that.ids = myids;
//console.log(that.ids)
that.data = resp;
//console.log(that.data);
console.log(that.data);
});
}
......
dashboard-reddit.html
View file @ edd9c49d
......@@ -12,7 +12,9 @@
<link rel="import" href="/bower_components/paper-item/paper-item.html">
<link rel="import" href="/bower_components/paper-menu/paper-menu.html">
<link rel="import" href="/elements/entities-chart/entities-chart.html">
<link rel="import" href="/elements/people-chart/people-chart.html">
<link rel="import" href="/elements/news-chart/news-chart.html">
<link rel="import" href="/elements/tweet-chart/tweet-chart.html">
<link rel="import" href="/elements/leaflet-maps/leaflet-map.html">
<dom-module id="dashboard-reddit">
......@@ -27,6 +29,13 @@
handle-as="json"
last-response="{{queries}}"></iron-ajax>
<div style="width:10%; padding: 1em; display:inline-block">
<img style="width: 100%;"src="/images/trivalent.jpg">
</div>
<div style="width:80%; padding-bottom: 12px; text-align:center; display:inline-block">
<img style="width: 30%; margin:0 auto;"src="/images/logo-gsi-crawler.png">
</div>
<paper-tabs selected="{{selected}}">
<paper-tab>Dashboard</paper-tab>
<paper-tab>Sparql Editor</paper-tab>
......@@ -35,19 +44,19 @@
<iron-pages selected="{{selected}}">
<div>
<div class="row">
<material-search search-value="{{query}}"></material-search>
<material-search active="true" search-value="{{query}}"></material-search>
</div>
<br>
<div class="row" style="width: 100%; display: inline-block">
<div style="width: 32%; margin-right: 2%; float: left">
<div class="row">
<div class="col-md-3">
<number-chart
icon="/images/news.ico"
stylebg="bg-yellow"
title="Items selected"
title="Selected elements"
data="{{data}}">
</number-chart>
</div>
<div style="width: 32%; margin-right: 2%; float: left">
<div class="col-md-3">
<number-chart
data="{{data}}"
object="cnn"
......@@ -57,7 +66,7 @@
stylebg="bg-red">
</number-chart>
</div>
<div style="width: 32%; float: left">
<div class="col-md-3">
<number-chart
data="{{data}}"
object="The New York Times"
......@@ -68,21 +77,22 @@
stylebg="bg-green">
</number-chart>
</div>
<div class="col-md-3">
<number-chart
data="{{data}}"
object="twitter"
aggKey="schema:author"
title="Twitter"
icon="/images/twitter.ico"
subtitle="Total"
aggkey="location"
stylebg="bg-aqua">
</number-chart>
</div>
</div>
<div class="row" style="width: 100%; display: inline-block">
<div class="chart_container" style="right: 0; float: right">
<entities-chart
field="entities.dbps:anyURI"
data="{{data}}"
title="Entities founded"
icon="icons:list"
param="{{param}}"
id="entitieschart"
filters="{{filters}}">
</entities-chart>
</div>
<div class="chart_container" style="left: 0; float: left">
<br>
<div class="row">
<div class="col-md-6">
<google-chart
field="schema:author"
data="{{data}}"
......@@ -93,28 +103,49 @@
icon='icons:reorder'
options='{"title": "Source"}'
cols='[{"label": "type", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart>
</google-chart>
</div>
<div class="col-md-6">
<entities-chart
field="topics.rdfs:subClassOf"
data="{{data}}"
title="Topics"
icon="icons:list"
param="{{param}}"
id="entitieschart"
filters="{{filters}}">
</entities-chart>
</div>
</div>
<div class="row" style="width: 100%">
<div class="chart_container" style="left: 0; float: left">
<br>
<div class="row">
<div class="col-md-6">
<google-chart
field="sentiment"
data="{{data}}"
id='pie-chart5'
extra-id='pie-chart5'
id='barsentiment'
extra-id='1'
type='column'
filters="{{filters}}"
icon='social:mood'
options='{"title": "Sentiments"}'
cols='[{"label": "Sentiment", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart>
</div>
<div class="chart_container" style="left: 0; float: right">
</div>
<div class="col-md-6">
<people-chart
data="[[getPeople(data)]]"
title="People"
icon="maps:person-pin"
param="{{param}}"
id="entitieschart"
filters="{{filters}}">
</people-chart>
</div>
</div>
<div class="chart_container row" style="left: 0; float: left; width: 100%">
<br>
<div class="row">
<div class="col-md-12">
<google-chart
field="schema:datePublished"
data="{{data}}"
......@@ -123,15 +154,17 @@
type='area'
filters="{{filters}}"
icon='icons:trending-up'
options='{"title": "News rate"}'
options='{"title": "Temporal Trends"}'
cols='[{"label": "Date", "type": "string"},{"label": "Count", "type": "number"}]'
</google-chart>
</div>
</div>
<br>
<div class="row">
<div class="chart_container col-md-6" style="left: 0; float: left;">
<div class="col-md-6">
<paper-tabs selected="{{selectedpage}}">
<paper-tab><iron-icon icon="icons:receipt"></iron-icon> List of news</paper-tab>
<paper-tab>Social Media</paper-tab>
<paper-tab><iron-icon icon="icons:speaker-notes"></iron-icon> Social Media</paper-tab>
</paper-tabs>
<iron-pages class="lists" selected="{{selectedpage}}">
<div>
......@@ -142,22 +175,28 @@
icon='icons:receipt'>
</news-chart>
</div>
<div></div>
<div>
<tweet-chart
datos = "{{data}}"
title="List of tweets"
filters="{{filters}}"
icon='communication:comment'>
</tweet-chart></div>
</iron-pages>
</div>
<div class="chart_container col-md-6">
<div class="col-md-6">
<div class="top-bar">
<iron-icon icon="maps:my-location"></iron-icon>
<span>Geolocated News and Social Media</span>
</div>
<leaflet-map fit-to-markers>
<!--<template is="dom-repeat" items="[[getPoints(places.*)]]" as="place">
<template is="dom-repeat" items="[[getPlaces(data)]]" as="place">
<leaflet-marker latitude="{{place.lat}}" longitude="{{place.lng}}" title="{{place.name}}">
<b>Name:</b>
<b>Headline:</b>
<span>{{place.name}}</span>
</leaflet-marker>
</template>-->
<leaflet-marker latitude="40.4520074" longitude="-3.7258213" title="Demo place">
</template>
<!-- <leaflet-marker latitude="40.4520074" longitude="-3.7258213" title="Demo place">
<b>Name:</b>
<span>Demo<span>
</leaflet-marker>
......@@ -171,7 +210,7 @@
</leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="48.827534" longitude="2.370932" title="Boulangerie de Tolbiac">
</leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="41.386084311622" longitude="2.1677023172379" title="St Christopher's Inn">
</leaflet-marker><leaflet-marker class="style-scope dashboard-tourpedia" latitude="41.38985943707" longitude="2.1471921354532" title="Sunotel Junior">
</leaflet-marker>
</leaflet-marker>-->
</leaflet-map>
</div>
</div>
......@@ -185,7 +224,7 @@
</iron-pages>
<div style="background-color:#ccc; padding: 1%;">
<div style="width:32%; margin: 0 auto">
<img height="60px" src="/images/gsi.png"> © 2017 Grupo de Sistemas Inteligentes GSI-UPM
<img height="60px" src="/images/gsi.png"> © 2017 Grupo de Sistemas Inteligentes GSI-UPM
</div>
</div>
</template>
......@@ -250,6 +289,46 @@
ready = true;
this._query();
},
getPeople: function(data){
var people = []
//console.log(data)
data.hits.hits.forEach( function (entry){
//console.log(entry)
entry._source.entities.forEach(function(entity){
//console.log(entity)
if ('dbo:thumbnail' in entity) {
people.push({'name': entity['nif:anchorOf'], 'image': entity['dbo:thumbnail']})
}
})
})
people = this.removeDuplicates(people, 'name')
console.log(people)
return people.slice(0,8)
},
removeDuplicates: function(originalArray, prop){
var newArray = [];
var lookupObject = {};
for(var i in originalArray) {
lookupObject[originalArray[i][prop]] = originalArray[i];
}
for(i in lookupObject) {
newArray.push(lookupObject[i]);
}
return newArray;
},
getPlaces: function(data){
var places = []
data.hits.hits.forEach( function (entry){
entry._source.entities.forEach(function(entity){
if ('latitude' in entity) {
places.push({'lat': entity.latitude, 'lng': entity.longitude, 'name': entry._source['schema:headline']})
}
})
})
return places
},
_search: function(){
//console.log("search fired")
//console.log(this.query.length)
......@@ -271,11 +350,11 @@
// undocumented params are appended to the query string
index: "gsicrawler",
body: {
size: 20,
size: 22,
query: {
multi_match:{
query: this.query,
fields: ['schema:author', 'schema:headline', 'sentiments', 'schema:about']
fields: ['schema:author', 'schema:headline', 'sentiments', 'schema:about', 'entities.nif:anchorOf']
}
},
sort:{'schema:datePublished':{order: "desc"}},
......@@ -296,9 +375,18 @@
}
}
},
'entities.dbps:anyURI': {
'entities.rdfs:subClassOf': {
terms: {
field: "entities.rdfs:subClassOf.keyword",
order: {
_count: "desc