Skip to content

Instantly share code, notes, and snippets.

@timproDev

timproDev/app.css

Created June 22, 2018 21:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timproDev/66daed3ac6aca368be938d47263abff8 to your computer and use it in GitHub Desktop.
Save timproDev/66daed3ac6aca368be938d47263abff8 to your computer and use it in GitHub Desktop.
Download ZIP
Wordy Worderson
Raw
app.css
@media only screen and (min-width: 641px) {
body, html {
overflow-x: hidden; } }
@media only screen and (max-width: 40em) {
html {
-webkit-text-size-adjust: 100%; } }
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: auto;
display: block; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block; }
img {
border: none; }
button, input, optgroup, select, textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
-webkit-font-smoothing: antialiased; }
input, button, select {
outline: none; }
*,
*:before,
*:after {
box-sizing: border-box; }
.global-chart-container {
display: inline-block;
width: 65%; }
.mx-dv-container, .mx-dv-container-full {
margin: 2rem 0;
background-color: transparent;
border-top: 6px solid #f5f5f5;
border-bottom: 6px solid #f5f5f5;
text-align: center;
padding-top: .5rem;
max-width: 775px;
/* IE HACK CANVAS */ }
.mx-dv-container .plot-wrap.no-svg, .mx-dv-container-full .plot-wrap.no-svg {
display: none;
padding-bottom: 1rem; }
.mx-dv-container .plot-wrap.no-svg img, .mx-dv-container-full .plot-wrap.no-svg img {
width: 100%;
max-width: 706px; }
.mx-dv-container .plot-wrap.ie-hack, .mx-dv-container-full .plot-wrap.ie-hack {
/* IE HACK CANVAS */
position: relative; }
.mx-dv-container .plot-wrap.ie-hack canvas, .mx-dv-container-full .plot-wrap.ie-hack canvas {
display: block;
height: 100%;
visibility: hidden; }
.mx-dv-container .plot-wrap.ie-hack svg, .mx-dv-container-full .plot-wrap.ie-hack svg {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%; }
.mx-dv-container .svg-container, .mx-dv-container-full .svg-container {
position: relative; }
.mx-dv-container .svg-container canvas, .mx-dv-container-full .svg-container canvas {
display: block;
height: 100%;
visibility: hidden; }
.mx-dv-container .svg-container svg, .mx-dv-container-full .svg-container svg {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%; }
.mx-dv-container .chart-title, .mx-dv-container-full .chart-title {
padding: 1.15rem 0 0 0;
margin: 0;
text-align: left; }
.mx-dv-container .chart-premise, .mx-dv-container .chart-citation, .mx-dv-container-full .chart-premise, .mx-dv-container-full .chart-citation {
color: #808080;
padding: .25rem 0 1rem 0;
margin: 0;
text-align: left; }
.mx-dv-container .chart-premise p, .mx-dv-container .chart-premise input, .mx-dv-container .chart-citation p, .mx-dv-container .chart-citation input, .mx-dv-container-full .chart-premise p, .mx-dv-container-full .chart-premise input, .mx-dv-container-full .chart-citation p, .mx-dv-container-full .chart-citation input {
margin: 0;
text-align: left;
display: inline-block;
vertical-align: middle;
padding: 0 .75rem .25rem 0; }
.mx-dv-container .chart-citation, .mx-dv-container-full .chart-citation {
color: #bdbdbd; }
body {
padding-bottom:20rem;
}
textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
outline:0px !important;
-webkit-appearance:none;
}
#wordzButton {
background: #c7c7c7;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
font-family: Arial;
color: #ffffff;
font-size: 1rem;
font-weight:bold;
text-transform:uppercase;
padding: 12px 20px 10px 20px;
text-decoration: none;
border:none;
display:block;
margin:1rem auto;
}
#wordzButton:hover {
cursor:pointer;
background: salmon;
}
#wordArea {
border-radius:4px;
width:100%;
height:200px;
border: 1px solid #d8d8d8;
background-color: #f9f9f9;
padding:1rem;
box-shadow:inset 0 2px 14px -7px #000000;
font-family:arial, sans-serif;
color:#707070;
&:focus {
outline:none;
}
}
.word-count-wrapper {
width:85%;
max-width:775px;
display: block;
margin:3rem auto;
background-color: transparent;
text-align:left;
}
.word-count-wrapper > h2 {
text-align:center;
font-family:arial, sans-serif;
font-weight:bold;
font-size:2rem;
color:#c7c7c7;
}
#wordAnswer span {
font-weight:bold;
color:salmon;
font-size:1.75rem;
}
#wordAnswer p {
color:#707070;
padding:0;
margin:.25rem 0 0 0;
line-height:1.5;
display:block;
font-family:arial, sans-serif;
}
#wordAnswer span.small-text {
font-family:arial, sans-serif;
color:#707070;
margin:1.5rem 0 .5rem 0;
font-size:.75rem;
display:block;
font-weight:normal;
font-style:italic;
}
Raw
grab-text-init.js
document.addEventListener("DOMContentLoaded", function(){
var textURL = "assets/d3-bundles/grab-text/trump-tweet.txt";
var removedWords = ["all ve re when out me my s its only we because him i over just also other had you your were he his she her hers said being be our could these who do there t https http co was they the a an another no 's the a an no another 's any their its another no 's 1, 2, 3, 4, 5, 6, etc. 1/2, 1/3, 1/4, etc. its no 's this that the at so are have and a of by in on to is it that from with what as about or this not be for but then may has"];
d3.select("#wordzButton").on('click', function(){
var getText = d3.select("#wordArea").property('value');
doAllTheStuff(getText)
})
// d3.request(textURL)
// .response(function (xhr) {
// return xhr.responseText;
// })
// .get(function(data) {
// doAllTheStuff(data)
// });
function doAllTheStuff(data) {
var d = reReg(data).split(' ');
var totalWords = d.length;
var textData = findDuplicates(d).sort()
var countData = count(textData);
var refineData = refine(countData, 'count');
d3.select("#wordAnswer").selectAll("p")
.data(refineData)
.enter()
.append('p')
.html(function(d){
return "<span>" + d.word + "</span> was used " + "<span>" + d.count + "</span> times out of " + totalWords + " words.";
});
d3.select("#wordAnswer")
.insert("span")
.classed('small-text', true)
.html("* Words removed from text count: " + removedWords[0]);
}
function refine(e,c) {
e.sort(function(a,b){
return d3.descending(+a[c], +b[c])
});
var conditions = removedWords[0].split(" ");
for (var i = 0; i < conditions.length; i++) {
e = e.filter(function(d) {
return d.word !== conditions[i];
});
}
e = e.filter(function(d, i) {
var count = 10 + 1;
if (i < count) {
return i;
}
});
return e;
}
function count(array_elements) {
var objArr = [];
var current = null;
var cnt = 1;
for (var i = 0; i < array_elements.length; i++) {
if (array_elements[i] != current) {
if (cnt > 0) {
if (current !== null) {
objArr.push({word:current,count:cnt});
}
}
current = array_elements[i];
cnt = 1;
} else {
cnt++;
}
}
return objArr;
}
function reReg(x) {
// .replace(/[\u2018\u2019]/g, "'")
var y = x.replace(/['!"#$%&\\'()\*+,\-\.\/:;<=>?@\[\\\]\^_`{|}~']/g," ");
y = y.replace(/[“”‘’]/g,' ');
y = y.replace(/\s{2,}/g," ").toLowerCase();
return y;
}
function findDuplicates(data) {
var result = [];
data.forEach(function(element, index) {
if (data.indexOf(element, index + 1) > -1) { // If duplicate in data = true
result.push(element);
}
});
return result;
}
});
Raw
index.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magic Word Counter Thingie</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="word-count-wrapper">
<h2>Top 10 Word Shower Machine</h2>
<section class="word-container">
<div class="" id="getText">
<textarea id="wordArea"></textarea>
<button id="wordzButton">Do Words</button>
</div>
</section>
<div id="wordAnswer"></div>
</div>
<script src="grab-text-init.js"></script>
<script src="https://rawgit.com/timproDev/d3-first-timer/master/js/d3v4-473-jetpack.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment