Trump Twitter Tirade

Create a vizzu-player element that will contain the rendered story.

<vizzu-player controller></vizzu-player>

In a script module element:

// Import VizzuPlayer
import VizzuPlayer from 'https://cdn.jsdelivr.net/npm/vizzu-story@0.7/dist/vizzu-story.min.js'
import Csv2Js from 'https://vizzu-story.vizzuhq.com/0.7/assets/javascripts/csv2js.js'

// Get the created element
const vp = document.querySelector('vizzu-player')

// Create data object
const dataLoaded = Csv2Js.csv('./trumptwitter.csv', {
    measures: [
        'NewtoTwitter',
        'Businessman',
        'Nominee',
        'President',
        'RT_New to Twitter',
        'RT_Businessman',
        'RT_Nominee',
        'RT_President',
        'Obama'
    ]
})

dataLoaded.then((data) => {
    // Set the style of the charts in the story
    const style = {
        tooltip: { fontSize: '22px' },
        title: { paddingTop: '1.2em', fontSize: '2.5em' },
        legend: { label: { fontSize: '1.8em' }, width: '16em' },
        logo: { width: '6em' },
        plot: {
            marker: { label: { fontSize: '1.5em' } },
            yAxis: {
                label: { fontSize: '1.5em' },
                title: { color: '#ffffff00' },
                interlacing: { color: '#ffffff00' }
            },
            xAxis: {
                label: { fontSize: '1.6em', paddingTop: '1em' },
                title: { fontSize: '1.4em', paddingTop: '2.5em' }
            }
        }
    }

    // Each slide here is a page in the final interactive story
    const slides = [
        [
            {
                filter: (record) => record.Firsttweet === 'Yes' && record.Dummy === 'No',
                config: {
                    channels: {
                        y: { set: ['tweets'] },
                        x: { set: ['Period', 'year', 'month'] },
                        color: 'Period'
                    },
                    title: "Trump started tweeting in May '09"
                }
            }
        ],
        [
            {
                filter: (record) => record.Period === 'New to Twitter' && record.Dummy === 'No',
                config: { title: "In the first two years he wasn't very active" }
            }
        ],
        [
            {
                filter: (record) =>
                    (record.Period === 'New to Twitter' || record.Period === 'Businessman') &&
                    record.Dummy === 'No',
                config: { title: 'Then he got hooked on' }
            }
        ],
        [
            {
                filter: (record) =>
                    (record.Period === 'New to Twitter' ||
                        record.Period === 'Businessman' ||
                        record.Period === 'Nominee') &&
                    record.Dummy === 'No',
                config: {
                    title: 'Interesting trend after becoming a presidential nominee'
                }
            }
        ],
        [
            {
                filter: (record) => record.Dummy === 'No',
                config: { title: 'And after he became President' }
            }
        ],
        [
            { config: { geometry: 'area', align: 'center' } },
            { config: { title: "All of Trump's tweets until May 2020" } }
        ],
        [
            {
                config: {
                    y: 'retweetcount',
                    title: 'And the number of times these were retweeted'
                }
            }
        ],
        [
            {
                config: {
                    y: 'tweets',
                    title: "Let's focus on the number of tweets for now"
                }
            },
            { config: { x: { set: ['year', 'month'] }, color: null } }
        ],
        [
            {
                config: {
                    y: ['tweets', 'Type'],
                    color: 'Type',
                    title: 'Original tweets, retweets & replies sent'
                },
                style: {
                    plot: { marker: { colorPalette: '#A0CDEBFF #60C0E6FF #1DA1F3FF' } }
                }
            }
        ],
        [
            {
                config: { split: true, align: 'none' },
                style: { plot: { yAxis: { label: { color: '#ffffff00' } } } }
            }
        ],
        [
            {
                config: {
                    split: false,
                    align: 'stretch',
                    title: 'Original tweets, retweets & replies sent (%)'
                },
                style: { plot: { yAxis: { label: { color: '#999999ff' } } } }
            }
        ],
        [
            { config: { align: 'center', title: '' } },
            {
                config: { y: 'tweets', color: null, legend: 'lightness' },
                style: { plot: { marker: { colorPalette: 'null' } } }
            },
            {
                config: {
                    y: ['tweets', 'Tool'],
                    color: 'Tool',
                    title: 'Tools Trump Used to Tweet',
                    legend: 'color'
                },
                style: {
                    plot: {
                        marker: {
                            colorPalette: '#597696FF #ED2828FF #26EC87FF #29B9BFFF '
                        }
                    }
                }
            }
        ],
        [
            {
                config: { split: true, align: 'none' },
                style: { plot: { yAxis: { label: { color: '#ffffff00' } } } }
            }
        ],
        [
            { config: { geometry: 'rectangle' } },
            {
                config: {
                    x: ['tweets', 'year', 'month'],
                    y: 'Tool',
                    geometry: 'rectangle',
                    split: false,
                    align: 'none'
                },
                style: {
                    plot: {
                        xAxis: { title: { color: '#ffffff00' } },
                        yAxis: { label: { color: '#999999ff' } }
                    }
                }
            },
            { config: { x: 'tweets', label: 'tweets' } }
        ],
        [
            { config: { x: ['tweets', 'AMPM', 'hour12'], label: null } },
            {
                config: { y: ['tweets', 'Tool'], x: ['AMPM', 'hour12'], align: 'max' }
            },
            { config: { geometry: 'area' } },
            {
                config: {
                    coordSystem: 'polar',
                    angle: Math.PI,
                    title: 'Time of Day When Trump Tweeted'
                },
                style: {
                    plot: {
                        yAxis: { label: { color: '#ffffff00' } },
                        xAxis: {
                            label: {
                                fontSize: '2em',
                                paddingBottom: '2.5em',
                                paddingTop: '2.5em',
                                paddingLeft: '2.5em',
                                paddingRight: '2.5em'
                            }
                        }
                    }
                }
            }
        ],
        [
            {
                config: {
                    y: ['Businessman', 'Tool'],
                    title: 'Times Trump Tweeted When Being a Businessman'
                }
            }
        ],
        [
            {
                config: {
                    y: ['President', 'Tool'],
                    title: 'Times Trump Tweeted When Being President'
                }
            }
        ]
    ]

    // Create story configuration object, add data and slides to it
    const story = {
        data,
        style,
        slides
    }

    // Set the size of the HTML element
    vp.style.cssText = 'width: 100%; height: 400px;'

    // Set up the created element with the configuration object
    vp.slides = story
    vp.initializing.then((chart) => {
        // Switch on the tooltip that appears
        // when the user hovers the mouse over a chart element
        chart.feature('tooltip', true)
    })
})