views/page_now.jade
extends layout
block head
link(href='/bower_components/c3/c3.min.css', rel='stylesheet')
script(src='https://www.gstatic.com/charts/loader.js')
script(src='https://www.google.com/jsapi')
block content
.container
h2.flow-text(style='font-size: 2em; margin-bottom: 5px;') The mood from around the world, right now.
span.small-grey Sentiment results calculated from real-time Twitter data,
| and illustrated live on a series of isomorphic D3.js data visualisations.<br>
| The sentiment analysis algorithm is based on the lexicon approach,
| and written in CoffeeScript, all code is open sauce on
| <a href="https://github.com/Lissy93/twitter-sentiment-visualisation">GitHub</a>
| <br><br>
.row
.col.s12.m5.l4
.card-panel.better-padding
h3.flow-text Stats
p <b class='green-text' id='countPos'>0</b> positive,
| and <b class='red-text' id='countNeg'>0</b> negative
| tweets analysed since landing on this page
.card-panel.better-padding
h3.flow-text +/- Proportions
svg#mini-bar-charts.center-block(style='width: 90%')
.card-panel.better-padding
p Want to view sentiment results for just a specific topic?
a.btn.waves-effect.waves-light.center-block(href='/search', style='width: 80%') Make a new search
br
.col.s12.m7.l8
.card-panel.better-padding
h3.flow-text Live Sentiment Tweets by Location
p.small-grey Dots show (a set of) real-time tweets,
| where color indicates sentiment (green = positive,
| red = negative, and all shades in between).
| Hover over a point for more information.
#geo-chart(style='display: none; min-height: 350px;')
#geo-chart-loader.center-block(style='width: 100px;'): include ./component_spinner
span.flow-text More geo-views:
a.waves-effect.waves-teal.btn-flat.inline(href='/map') Heat Map
a.waves-effect.waves-teal.btn-flat.inline(href='/globe') 3D Globe
a.waves-effect.waves-teal.btn-flat.inline(href='/region-map') Regional Map
.row
.col.s12.m12
.card-panel.better-padding#bullet-container
h3.flow-text Bullet Chart
p.small-grey The bullet chart shows volume of tweets analysed
| since you landed on this page (x-axis), and what proportion
| of these are positive (green) and negative (red).
#bullet-chart
.row
.col.s12.m6
.card-panel.better-padding
h3.flow-text Recent Positive Tweets
.input-field.pull-right(style='width: 100px; top:-40px;')
select#posLimit
option(value='3') 3
option(value='8', selected='') 8
option(value='10') 10
option(value='15') 15
option(value='25') 25
span How many tweets to show
br
br
#topPositive
#topPosLoader.center-block(style='width: 50px;')
br
include ./component_spinner
a.waves-effect.waves-teal.btn-flat.center-block.center-align(href='/text-tweets') See More
.col.s12.m6
.card-panel.better-padding
h3.flow-text Recent Negative Tweets
.input-field.pull-right(style='width: 100px; top:-40px;')
select#negLimit
option(value='3') 3
option(value='8', selected='') 8
option(value='10') 10
option(value='15') 15
option(value='25') 25
span How many tweets to show
br
br
#topNegative
#topNegLoader.center-block(style='width: 50px;')
br
include ./component_spinner
a.waves-effect.waves-teal.btn-flat.center-block.center-align(href='/text-tweets') See More
.row
.col.s12.m12
.card-panel.better-padding
h3.flow-text Search
.row
.input-field.col.s12.m8.offset-m1
input#txtKeyword.validate(placeholder='Enter a keyword, place, brand, celebrity, politician, object....', type='text')
label(for='txtKeyword') Enter a topic and press enter
.col.s10.offest-s1.m2
br
a.waves-effect.waves-light.btn.center-block#btnSearch Go!
.row
.col.s12.m6
.card-panel.better-padding
h4.flow-text About Sentiment Sweep
p Sentiment Sweep aims to captcha the mood of the internet,
| either overall or towards a specific topic. It does
| this by analysing real-time Twitter data, and calculating
| how positive or negative each Tweet it.
| <br><br>
| A series of dynamic data visualisations are then used
| to illustrate the results, and find trends between
| sentiment and other factors such as time of day,
| location, topic, country, people etc
a.waves-effect.waves-teal.btn-flat.pull-right(href='/about') Read More...
br
br
br
.col.s12.m6
.card-panel.better-padding
h4.flow-text Source & Documentation
p Sentiment Sweep is open sauce and distributed under the
| <a href='https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/LICENSE.md'>MIT License</a>.
| All code is published on
| <a href='https://github.com/Lissy93/twitter-sentiment-visualisation/'>GitHub (lissy93/twitter-sentiment-visualisations)</a>.
| <br><br>
| The project is primarily written in Node.js CoffeeScript,
| and D3.js is used for the majority of the data visualisations.
| Socket.io is used to manage the live interactions, and the
| data cache is MongoDB. Everything is hosted on a CentOS VPS.
| <br><br>
| All code is thoroughly documented and tested.
.row
h2 More Sentiment Data Visualisations
p.flow-text.grey-text.darken-4 Click one of the links below to generate the chart with the latest Twitter data
each page in pages
.col.s12.m4.l3.xl1
a(href='/#{page.page}')
.card.home-card
.card-image.waves-effect.waves-block.waves-light
img(src='/images/thumbnails/thumb_#{page.index}.png')
.card-content
span.card-title.grey-text.text-darken-4= page.title
.row
.col.s12.offset-m3.m6.l4.offset-l4.xl2.offset-xl5
.card-panel.more-info
h4.flow-text For more information....
a.waves-effect.waves-teal.btn-flat.btn(href='/') Visit the home page
a.waves-effect.waves-teal.btn-flat.btn(href='/Search') Make a new Search
a.waves-effect.waves-teal.btn-flat.btn(href='/about') About Sentiment Sweep
a.waves-effect.waves-teal.btn-flat.btn(href='https://github.com/Lissy93/twitter-sentiment-visualisation') Source Code + Documentation
a(href='http://aliciasykes.com') © Alicia Sykes 2018
a(href='https://github.com/Lissy93/twitter-sentiment-visualisation/blob/dev/docs/LICENSE.md') Open sourced under MIT
.card-panel
include ./component_social
include ./footer
block scripts
script(type = 'text/javascript', src = 'https://cdn.socket.io/socket.io-1.4.3.js')
script(type='text/javascript', src='/bower_components/d3/d3.min.js')
script(type = 'text/javascript', src = '/bower_components/c3/c3.min.js')
script(type = 'text/javascript', src = '/bower_components/bullet.js/index.js')
script(type='text/javascript', src='/javascripts/now.bundle.js')