Lissy93/twitter-sentiment-visualisation

extends layout


block content
    .container.trending-container
        .row.card-panel
            h3 Search trends by location
            .col.s8
                .input-field
                    input#txtLocation.validate(type='text', value='#{location}')
                    label(for='txtLocation') Enter a location (e.g. postcode or city name) to fetch local trends
            .col.s4
                br
                a.btn.waves-effect.waves-light#btnSearch Find Trending Topics
        .row.card-panel
            if location == ''
                h3 Showing world-wide Twitter trends
            else
                h3 Showing the latest Twitter trends from <span id='titleLocation'>#{location}</span>
            p.small-grey Sorted by volume, and the color indicates the sentiment of associated Tweets.
                | Click a trend for more information
            #trending-text-loader.center-block(style='width: 2px;'): include ./component_spinner
            #trending-text

        .row.card-panel
            #bubble-trends.center-block(style='width: 460px;')
            p.flow-text Bubble chart shows trending topics for today from a specific location.
                | The size of the bubble represents the volume of Tweets about a certain
                | topic, and the color illustrates sentiment calculated from Tweets
                | associated with the topic. Hover over a bubble for more details.


block scripts
    script(type='text/javascript').
        var locationTxt = !{JSON.stringify(location)};
    script(type='text/javascript', src='/bower_components/d3/d3.min.js')
    script(type='text/javascript', src='/javascripts/charts/trending-bubble-chart.js')
    script(type='text/javascript', src='/javascripts/charts/trending.js')