The Rhetoric of Donald Trump - A Data Visualization

Developer
Emily Hayman
Size
10,050 Kb
Views
68,816
  1. The Rhetoric of Donald Trump - A Data Visualization Previews
  2. The Rhetoric of Donald Trump - A Data Visualization HTML Codes
  3. The Rhetoric of Donald Trump - A Data Visualization CSS Codes
  4. The Rhetoric of Donald Trump - A Data Visualization JS Codes

How do I make an the rhetoric of donald trump - a data visualization?

Analysis on both word frequency and average grade level of Donald Trump, comparing a collection of his speeches with past presidential speeches. . What is a the rhetoric of donald trump - a data visualization? How do you make a the rhetoric of donald trump - a data visualization? This script and codes were developed by Emily Hayman on 14 June 2022, Tuesday.

The Rhetoric of Donald Trump - A Data Visualization Previews
IQ Test

The Rhetoric of Donald Trump - A Data Visualization - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Rhetoric of Donald Trump - A Data Visualization</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Playfair+Display:400,900'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="PresidentialSpeeches" class="wrapper ng-cloak"> <div class="copy-container">
<h1>The Rhetoric of Donald Trump</h1> <div class="copy-main"> <p>Throughout this election cycle, Trump has become infamous for many things (his hair, his strange relationship with his daughter, his odd undying love for Putin), but above all for his taglines - "make American great again", "build a wall and make Mexico pay for it", "I love women", and so forth. Curious as to just how radical his rhetoric has been, I did a bit of analysis on both word frequency and average grade level, comparing a collection of his speeches with past presidential speeches. The difference was stark. Trump's speeches are on average <em>less than half</em> the average grade level (that is, the number of years of education needed to understand a text) than average presidential speech.</p> <p>Even more telling, however, were the most frequently used words. I removed a standard list of <a href="http://www.ranks.nl/stopwords">stop words</a> (that is, the most common words in the English language) from the results to improve the data. Normally, words such as "I", "we", and "you" are included in this list. However, Trump's usage of "I" represented such a high percentage in comparison to even the second most used word ("you") that I felt it statistically significant and worth retaining. By comparison, in past presidential speeches "our" is the most common word.</p> </div> <h2>Word Frequency and Grade Level of Donald Trump's Speeches</h2> <div class="copy-secondary"> <p>With an average grade level of <em>5.2</em>, Trump's speeches focus mostly on - well, himself. "I" wins the race by a landslide, and "Don" (his own name) follows soon after ("Trump" makes an appearance as well). <a href="https://github.com/ryanmcdermott/trump-speeches">Data Source</a></p> </div> </div> <div class="graph-wrapper trump ng-cloak"> <data-bar-graph data-graph-name="'trump'" data-spread-offset="12"></data-bar-graph> <div class="graph-grade-container"> <p class="graph-grade-level">5.2</p> <p class="graph-grade-subtitle">Grade Level</p> </div> </div> <div class="copy-container"> <h2>Word Frequency and Grade Level of Presidential Speeches (1789 - 2016)</h2> <div class="copy-secondary"> <p>Past presidential speeches focus heavily on an overarching motif of unity and nationalism - words like "people", "united", "one", and so forth appear again and again. <a href="http://www.datasets.co/dataset/US-Presidential-Speeches">Data Source</a></p> </div> </div> <div class="graph-wrapper presidents ng-cloak">
<data-bar-graph data-graph-name="'presidents'" data-spread-offset="12"></data-bar-graph> <div class="graph-grade-container"> <p class="graph-grade-level">10.8</p> <p class="graph-grade-subtitle">Grade Level</p> </div> </div>
</div> <script type="text/javascript"> window.bootstrap = window.bootstrap || {}; window.bootstrap.graphData = { "trump": [ { "title": "i", "value": 5678 }, { "title": "you", "value": 3526 }, { "title": "we", "value": 2876 }, { "title": "going", "value": 2271 }, { "title": "people", "value": 1493 }, { "title": "don", "value": 1114 }, { "title": "me", "value": 866 }, { "title": "like", "value": 761 }, { "title": "think", "value": 752 }, { "title": "great", "value": 726 }, { "title": "get", "value": 716 }, { "title": "no", "value": 619 }, { "title": "right", "value": 608 }, { "title": "say", "value": 583 }, { "title": "country", "value": 548 }, { "title": "money", "value": 436 }, { "title": "look", "value": 434 }, { "title": "good", "value": 404 }, { "title": "make", "value": 374 }, { "title": "love", "value": 338 }, { "title": "never", "value": 319 }, { "title": "time", "value": 316 }, { "title": "win", "value": 314 }, { "title": "take", "value": 310 }, { "title": "trump", "value": 306 }, { "title": "big", "value": 304 }, { "title": "things", "value": 272 }, { "title": "believe", "value": 271 }, { "title": "again", "value": 258 }, { "title": "okay", "value": 256 }, { "title": "world", "value": 253 }, { "title": "everybody", "value": 242 }, { "title": "deal", "value": 242 } ], "presidents": [ { "title": "our", "value": 154164 }, { "title": "we", "value": 149014 }, { "title": "i", "value": 144220 }, { "title": "states", "value": 63619 }, { "title": "government", "value": 60738 }, { "title": "people", "value": 52196 }, { "title": "united", "value": 52039 }, { "title": "you", "value": 50782 }, { "title": "congress", "value": 36762 }, { "title": "one", "value": 35066 }, { "title": "country", "value": 32438 }, { "title": "president", "value": 30256 }, { "title": "time", "value": 29820 }, { "title": "war", "value": 29296 }, { "title": "great", "value": 28848 }, { "title": "world", "value": 28762 }, { "title": "american", "value": 27868 }, { "title": "new", "value": 26094 }, { "title": "year", "value": 26048 }, { "title": "every", "value": 25506 }, { "title": "public", "value": 23640 }, { "title": "peace", "value": 23198 }, { "title": "state", "value": 21503 }, { "title": "power", "value": 20110 }, { "title": "make", "value": 18810 }, { "title": "nation", "value": 18236 }, { "title": "law", "value": 17858 }, { "title": "first", "value": 17790 }, { "title": "against", "value": 17086 }, { "title": "without", "value": 16728 }, { "title": "men", "value": 16488 }, { "title": "general", "value": 16360 }, { "title": "think", "value": 16071 } ] }
</script> <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.3/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js'></script> <script src="js/index.js"></script>
</body>
</html>

The Rhetoric of Donald Trump - A Data Visualization - Script Codes CSS Codes

html { box-sizing: border-box;
}
*,
*:before,
*:after { box-sizing: inherit;
}
.ng-cloak { opacity: 0;
}
body { font-family: "Playfair Display"; color: #5b5b5b;
}
body ::-moz-selection { background-color: rgba(46, 49, 52, 0.7); color: #f5f5f1;
}
body ::selection { background-color: rgba(46, 49, 52, 0.7); color: #f5f5f1;
}
body ::-moz-selection { background-color: rgba(46, 49, 52, 0.7); color: #f5f5f1;
}
em { font-style: italic;
}
a { color: #2c2c2c; text-decoration: underline; -webkit-transition: .2s; transition: .2s;
}
a:hover { color: rgba(44, 44, 44, 0.6);
}
h1 { font-size: 4rem; line-height: 1.15; font-weight: 900; letter-spacing: -.05rem; color: #2c2c2c; text-align: center; margin-bottom: 1em;
}
@media (max-width: 720px) { h1 { font-size: 3rem; }
}
@media (max-width: 400px) { h1 { font-size: 2.4rem; }
}
h2 { color: #2c2c2c; font-size: 1.9rem; line-height: 1.3; margin-bottom: 1.1em;
}
h2:before { content: ""; height: 6px; width: 120px; background-color: #ebebeb; display: block; margin: 2.5em auto;
}
@media (max-width: 420px) { h2:before { margin: 1.8em auto; }
}
@media (max-width: 720px) { h2 { font-size: 1.7rem; }
}
.wrapper { margin-top: 4.5em;
}
@media (max-width: 420px) { .wrapper { margin-top: 2.5em; }
}
.copy-container { margin: 0 auto; max-width: 680px;
}
@media (max-width: 720px) { .copy-container { padding-left: 1.5em; padding-right: 1.5em; }
}
.copy-main { font-size: 1.2rem; line-height: 1.5;
}
.copy-main P + P { margin-top: 2em;
}
@media (max-width: 720px) { .copy-main { font-size: 1.1rem; }
}
.copy-secondary { font-family: "Montserrat"; color: #979797; font-size: .85rem; line-height: 1.6;
}
.graph-wrapper { max-width: 1000px; margin: 4em auto; position: relative;
}
.graph-container { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.graph-values { text-align: right; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; min-width: 120px; padding-right: 10px;
}
@media (max-width: 590px) { .graph-values { min-width: 100px; padding-right: 5px; }
}
@media (max-width: 450px) { .graph-values { min-width: 80px; }
}
@media (max-width: 380px) { .graph-values { min-width: 60px; }
}
.graph-values-item { font-family: "Montserrat"; font-size: .8rem; color: #979797; text-transform: uppercase; letter-spacing: .05rem; -webkit-transition: .2s; transition: .2s;
}
.graph-values-item.active { color: #000;
}
@media (max-width: 590px) { .graph-values-item { font-size: .65rem; }
}
@media (max-width: 450px) { .graph-values-item { font-size: .55rem; }
}
@media (max-width: 380px) { .graph-values-item { font-size: .4rem; }
}
.graph-svg { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;
}
.graph-svg > svg { stroke: #fff;
}
.graph-svg > svg rect { -webkit-transition: .2s; transition: .2s;
}
@media (max-width: 600px) { .graph-svg > svg rect { stroke-width: 1; }
}
.trump .graph-svg > svg rect:nth-child(even) { fill: rgba(174, 0, 1, 0.2);
}
.trump .graph-svg > svg rect:nth-child(odd) { fill: rgba(174, 0, 1, 0.4);
}
.trump .graph-svg > svg rect:hover { fill: rgba(174, 0, 1, 0.8);
}
.presidents .graph-svg > svg rect:nth-child(even) { fill: rgba(0, 98, 205, 0.2);
}
.presidents .graph-svg > svg rect:nth-child(odd) { fill: rgba(0, 98, 205, 0.4);
}
.presidents .graph-svg > svg rect:hover { fill: rgba(0, 98, 205, 0.8);
}
.graph-grade-container { position: absolute; bottom: 0; right: 20px; text-align: center; border: 5px solid #ebebeb; border-radius: 10px; box-shadow: 5px 5px 0 #fbfbfb; width: 196px; height: 196px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
@media (max-width: 775px) { .graph-grade-container { font-size: 3.3rem; width: 120px; height: 120px; }
}
@media (max-width: 500px) { .graph-grade-container { position: static; margin: .5em auto; }
}
.graph-grade-level { font-weight: 900; font-size: 5rem; line-height: 1; margin-bottom: .15em; letter-spacing: -.1rem;
}
@media (max-width: 775px) { .graph-grade-level { font-size: 3rem; }
}
@media (max-width: 400px) { .graph-grade-level { font-size: 2.6rem; }
}
.graph-grade-subtitle { font-family: "Montserrat"; font-size: .8rem; color: #979797; text-transform: uppercase; letter-spacing: .05rem;
}

The Rhetoric of Donald Trump - A Data Visualization - Script Codes JS Codes

'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var DataStore = function () { function DataStore() { _classCallCheck(this, DataStore); this._graphData = window.bootstrap.graphData; } /** ** getGraphValues :: object -> array ** Returns array of values from graph data */ DataStore.prototype._getGraphValues = function _getGraphValues(graphData, value) { return _.map(graphData, value); }; /** ** getGraphTitles :: object -> array ** Returns array of titles from graph data */ DataStore.prototype.getGraphTitles = function getGraphTitles(graphData) { return _.map(graphData, "title"); }; /** ** filterNaNs :: array -> array ** Returns array of safe number values */ DataStore.prototype._filterNaNs = function _filterNaNs(values) { return values.filter(function (value) { return !Number.isNaN(value); }); }; /** ** filterNotStrings :: array -> array ** Returns array of safe strings from array */ DataStore.prototype._filterNotStrings = function _filterNotStrings(strings) { return strings.filter(function (string) { return _.isString(string); }); }; /** ** returnRange :: array -> array ** Returns array of appropriately stepped range values from sorted values based on spread offset */ DataStore.prototype._returnRange = function _returnRange(sortedValues, spread) { var spreadOffset = this._determineSpread(sortedValues) / spread; var firstRangeValue = _.first(sortedValues) - spreadOffset; var lastRangeValue = _.last(sortedValues) + spreadOffset * 2; return _.range(firstRangeValue > 0 ? firstRangeValue : 0, lastRangeValue, spreadOffset); }; /** ** roundValues :: array -> array ** Returns array of values rounded to the nearest tenth */ DataStore.prototype._roundValues = function _roundValues(rangeValues) { return rangeValues.map(function (val) { return Math.round(10 * val) / 10; }); }; /** ** determineSpread :: array -> number ** Returns spread of sorted graph values */ DataStore.prototype._determineSpread = function _determineSpread(sortedValues) { return _.last(sortedValues) - _.first(sortedValues); }; /** ** getStringLengths :: array -> array ** Returns array of lengths of each string from an array of strings */ DataStore.prototype._getStringLengths = function _getStringLengths(strings) { return strings.map(function (string) { return string.length; }); }; /** ** getGreatest :: array -> number ** Returns greatest value in an array of numbers */ DataStore.prototype._getGreatest = function _getGreatest(values) { return values.reduce(function (prev, curr) { return curr - prev > 0 ? curr : prev; }); }; _createClass(DataStore, [{ key: 'graphData', get: function get() { return this._graphData; } /** ** getSortedGraphValues :: object -> array ** Returns array of numerical graph values from graph data */ }, { key: 'getSortedGraphValues', get: function get() { return _.flow([this._getGraphValues, this._filterNaNs, _.sortBy]); } /** ** getRangeValues :: array -> array ** Returns array of rounded range values from graph values */ }, { key: 'getRangeValues', get: function get() { return _.flow([this._returnRange, this._roundValues]); } /** ** getRangeSpread :: array -> number ** Returns value of spread of array of range values */ }, { key: 'getRangeSpread', get: function get() { return _.flow([this.getRangeValues, this._determineSpread]); } /** ** getInitialValue :: array -> number ** Returns first value of array of range values */ }, { key: 'getInitialValue', get: function get() { return _.flow([this.getRangeValues, _.first]); } /** ** getLengthOfLongestString :: array -> number ** Returns length of longest string from an array */ }, { key: 'getLengthOfLongestString', get: function get() { return _.flow([this._filterNotStrings, this._getStringLengths, _.uniq, this._getGreatest]); } }]); return DataStore;
}();
barGraph.$inject = ['$timeout', '$sce'];
function barGraph($timeout, $sce) { return { restrict: 'E', scope: { graphName: '=', spreadOffset: '=' }, replace: true, controller: 'BarGraphController', controllerAs: 'barGraphController', bindToController: true, templateUrl: $sce.trustAsResourceUrl('http://codepen.io/eehayman/pen/xEPRoy.html'), link: link }; function link(scope, element, attrs, ctrl) {}
}
var BarGraphController = function () { _createClass(BarGraphController, null, [{ key: '$inject', get: function get() { return ['dataStore']; } }]); function BarGraphController(dataStore) { _classCallCheck(this, BarGraphController); this._dataStore = dataStore; this._activeValue = -1; } BarGraphController.prototype.updateActiveValue = function updateActiveValue(value) { this._activeValue = value; }; _createClass(BarGraphController, [{ key: 'currentReportData', get: function get() { return this._dataStore.graphData[this.graphName]; } }, { key: 'rangeSpread', get: function get() { return this._dataStore.getRangeSpread(this.sortedGraphValues, this.spreadOffset); } }, { key: 'isMobile', get: function get() { return window.innerWidth < 600 ? true : false; } }, { key: 'barWidth', get: function get() { return this.isMobile ? this.rangeSpread / this.currentReportData.length * 2 : this.rangeSpread / this.currentReportData.length; } }, { key: 'sortedGraphValues', get: function get() { return this._dataStore.getSortedGraphValues(this.currentReportData, "value"); } }, { key: 'yAxisRange', get: function get() { return this._dataStore.getRangeValues(this.sortedGraphValues, this.spreadOffset); } }, { key: 'viewBoxWidth', get: function get() { return this.currentReportData.length * this.barWidth; } }, { key: 'viewBoxHeight', get: function get() { return this.rangeSpread; } }, { key: 'graphInitialValue', get: function get() { return this._dataStore.getInitialValue(this.sortedGraphValues, this.spreadOffset); } }, { key: 'viewBox', get: function get() { if (this.currentReportData) { return this.isMobile ? "0 0 " + this.viewBoxWidth / 2 + " " + this.viewBoxHeight * 2 : "0 0 " + this.viewBoxWidth + " " + this.viewBoxHeight; } } }, { key: 'xAxisRange', get: function get() { if (this.currentReportData) { return this._dataStore.getGraphTitles(this.currentReportData); } } }, { key: 'activeValue', get: function get() { return this._activeValue; } }, { key: 'offsetPadding', get: function get() { if (this.xAxisRange) { return this._reportDataStore.getLengthOfLongestString(this.xAxisRange) * 7; } } }]); return BarGraphController;
}();
angular.module('PresidentialSpeeches', []).config(['$compileProvider', function ($compileProvider) { $compileProvider.debugInfoEnabled(false);
}]).service('dataStore', DataStore).controller('BarGraphController', BarGraphController).directive('barGraph', barGraph);
angular.element(document).ready(function () { angular.bootstrap(document.getElementById("PresidentialSpeeches"), ['PresidentialSpeeches']);
});
The Rhetoric of Donald Trump - A Data Visualization - Script Codes
The Rhetoric of Donald Trump - A Data Visualization - Script Codes
Home Page Home
Developer Emily Hayman
Username eehayman
Uploaded June 14, 2022
Rating 3.5
Size 10,050 Kb
Views 68,816
Do you need developer help for The Rhetoric of Donald Trump - A Data Visualization?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Emily Hayman (eehayman) Script Codes
Name
Single Div Apple Mouse
Slider Animation Effect
CSS Variable-Powered Clock
SVG Stroke Animation - Origami Crane
Custom Dropdown List
Full Page Parallax Scroll Effect
A Pen by Emily Hayman
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!