Aria Garrett Tianhao Yao Jonathan Beaubien Isabelle Saechao Bryce Park
Isabelle Saechao: Page layout, first scroller, first visualization and description, and parts of the position and party visualization.
Aria Garrett: Summary, initial graphic description, creating part of/combining the position and party visualization, setting up dataset for map visualization
Tianhao Yao: Narrator in the project video, creating word connotation visualizations.
Jonathan Beaubien: Partisan percentage map, big players visualization concept, summary for project video for first visualizations.
Bryce Park: Guess scroller, wording based on source and message type word cloud, bias based on source nad message type
Society has shifted more toward online interactions and as a result political communications on social media have become increasingly prevalent. Just as the rhetoric from speeches and rallies can be analyzed, so too can online social media posts. Our goal is to investigate how US social media posts are utilized on platforms like Facebook and Twitter to convey both partisan and neutral messages, and if a politician’s age, party, government position or geographic location are correlated with these different tones. To address these questions, we anticipate using visualization techniques that emphasize comparative analysis such as word maps, pie charts, and color coded geographical maps to demonstrate our analysis. We will also use interaction techniques such as gamification that require the viewer to predict whether words are more neutral or partisan to increase engagement.
This template is a starting place for your project. Update the header information to include the relevant details for your project, and then feel free to mix and match the visualization and layout techniques introduced here for your own narrative.
Think about how the narrative structure draws readers into the story you are telling and how the visualizations interact with the text (and with each other). The narrative should help ensure that the page as a whole is greater than just the sum of it's parts. When designing your page, decide on particular layouts that enhance the reader's experience and understanding of the topic.
You must have Node.js installed. You can get it directly from https://nodejs.org/en/.
- Clone and open your project repo on your own computer.
- Make sure you have
idyllinstalled (npm i -g idyll). - Run
npm installto install project-specific dependencies.
npm is the node package manager. If you're curious how this works and what the project dependencies are, open up package.json to see where these are listed.
You can install custom dependencies by running npm install <package-name> --save. Note that any collaborators will also need to download the package locally by running npm install after pulling the changes.
Run idyll from the command line. Your post will appear at http://localhost:3000/. When the server is running, any local change that you make will be deteched and your webpage will auto-update with the new changes. Your local changes will not be visible to your team members until you push the changes to your repository. These changes will not be reflected in the final website unless you run the build script and push the updated docs folder (see below).
Run idyll build. The output will appear in the top-level build folder. To change the output location, change the output option in package.json.
Make sure your post has been built, then commit the docs folder to your project repository. It will be available at cse412-21sp.github.io/your-repo-name/. For example, you can view the sample embedded Tableau, vega-lite, and d3 charts at https://cse412-21sp.github.io/Final-Project-Template.
This template was adapted from the initial Scrollytelling template for Idyll. The code and visualization examples were adapted from the final project template created for a previous offering of CSE 412.