Changed name of Wordtagger to reading_structure. Updated script to newest version. Updated makefile. WARNING: Weasyprint is an extra dependency.
jvdhorst
6 years ago
parent
087459e01b
commit
3deaaeac0b
@ -0,0 +1,99 @@
|
||||
@page {
|
||||
/* dimensions for the whole page */
|
||||
size: A3 portrait;
|
||||
margin: 2rem 2rem 3em 2rem;
|
||||
background-color: #003cb3;
|
||||
|
||||
@bottom-center {
|
||||
content: 'make output/reading_structure';
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
white-space: pre;
|
||||
color: #fff;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* ---
|
||||
|
||||
BASIC ELEMENTS
|
||||
|
||||
--- */
|
||||
|
||||
body {
|
||||
background-color: none !important;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 2rem 2.5rem;
|
||||
max-width: 100% !important;
|
||||
min-height: 90% !important;
|
||||
background-color: #003cb3 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
span.wrapper {
|
||||
display: inline-block;
|
||||
font-family: 'PT Serif', serif;
|
||||
font-size: 1.5rem;
|
||||
text-align:center;
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.action-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ---
|
||||
|
||||
ELEMENTS IN .WRAPPER
|
||||
|
||||
--- */
|
||||
|
||||
.word, .tag {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
.word {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
span.invisible {
|
||||
|
||||
}
|
||||
|
||||
span.tag {
|
||||
color: #fff;
|
||||
opacity: 0.5;
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* Show original word when hovering label */
|
||||
span.word_label, .stopword .word {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.stopword > .wordtype:hover, {
|
||||
opacity: 1;
|
||||
/*color: red;*/
|
||||
}
|
||||
|
||||
.stopword > .wordtype {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Spacing fix for punctuation */
|
||||
.punctuation {
|
||||
margin-left: -4px;
|
||||
}
|
||||
@ -0,0 +1,112 @@
|
||||
/*
|
||||
The index.html features all words and their labels. The function of this script is to show and hide
|
||||
specific words based on their label. In this case the word is hidden, but its respective label is shown in the text.
|
||||
|
||||
Each collection of words and labels is inside a .wrapper with an id.
|
||||
The classes of these wrapper feature the word, and the values of the labels (e.g. class="wrapper software noun keyword neutral")
|
||||
by default all words inside the wrapper have the class .word. This class is visible.
|
||||
by default all labels (noun, neutral etc.) have the class .tag and another class with the type of label (POS, sentiment, etc). .tag is by default display:none
|
||||
|
||||
If the user clicks on one of the .wrapper elements, the page changes the hidden words. The state changes.
|
||||
|
||||
What happens inside the wrapper if the state changes to hide all nouns?
|
||||
|
||||
- Previous filter is disabled. All tags invisible. All words visible.
|
||||
- the words in the wrapper with class noun are selected. They get the class word_label. Which means: only visible on :hovering the wrapper.
|
||||
- the span with the text 'noun' and class 'pos' will lose the class invisible. The tag is now visible in the text.
|
||||
|
||||
Aside: What about Weasyprint?
|
||||
Weasyprint can't see the changes made by this script. It will only show the normal text, without any labels.
|
||||
To print the text with the desired styling, there is a specific stylesheet called print.css.
|
||||
*/
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
// State 1 Selectors for stopword tagger: selecting the word, and the label 'stopword'
|
||||
var stopword_word = $('.stopword > .word');
|
||||
var stopword_label = $('.stopword > .wordtype');
|
||||
|
||||
// State 2 Selectors for the sentiment tagger, showing neutral words and their labels
|
||||
var posneg_word = $('.negative > .word, .positive > .word');
|
||||
var posneg_label = $('.negative > .sentiment, .positive > .sentiment');
|
||||
|
||||
// State 3 Selectors for the noun taggger
|
||||
var noun_word = $('.noun > .word');
|
||||
var noun_label = $('.noun > .pos');
|
||||
|
||||
// State 4 Selectors for the adjective and adverb taggger
|
||||
var ad_word = $('.adjective > .word, .adverb > .word');
|
||||
var ad_label = $('.adjective > .pos, .adverb > .pos');
|
||||
|
||||
// State 5 Selectors for the determiner, pronoun, preposition and infinitival to taggger
|
||||
var dppt_word = $('.determiner > .word, .pronoun > .word, .to > .word, .preposition > .word');
|
||||
var dppt_label = $('.determiner > .pos, .pronoun > .pos, .to > .pos, .preposition > .pos');
|
||||
|
||||
// State 6 Selectors for the sentiment tagger, showing only positive and negative words and their labels
|
||||
var neutral_word = $('.neutral > .word');
|
||||
var neutral_label = $('.neutral > .sentiment');
|
||||
|
||||
// On page load, prepare the right view for state one. Hiding all stopwords, showing the stopword label
|
||||
var state = 1;
|
||||
stopword_word.addClass('word_label');
|
||||
stopword_label.removeClass('invisible');
|
||||
|
||||
// Here we run through the states
|
||||
$('.container').click( function() {
|
||||
console.log(state);
|
||||
|
||||
if (state == 1) {
|
||||
stopword_word.removeClass('word_label');
|
||||
stopword_label.addClass('invisible');
|
||||
|
||||
posneg_word.addClass('word_label');
|
||||
posneg_label.removeClass('invisible');
|
||||
}
|
||||
|
||||
if (state == 2) {
|
||||
posneg_word.removeClass('word_label');
|
||||
posneg_label.addClass('invisible');
|
||||
|
||||
noun_word.addClass('word_label');
|
||||
noun_label.removeClass('invisible');
|
||||
}
|
||||
|
||||
if (state == 3) {
|
||||
noun_word.removeClass('word_label');
|
||||
noun_label.addClass('invisible');
|
||||
|
||||
ad_word.addClass('word_label');
|
||||
ad_label.removeClass('invisible');
|
||||
}
|
||||
|
||||
if (state == 4) {
|
||||
ad_word.removeClass('word_label');
|
||||
ad_label.addClass('invisible');
|
||||
|
||||
dppt_word.addClass('word_label');
|
||||
dppt_label.removeClass('invisible');
|
||||
}
|
||||
|
||||
if (state == 5) {
|
||||
dppt_word.removeClass('word_label');
|
||||
dppt_label.addClass('invisible');
|
||||
|
||||
neutral_word.addClass('word_label');
|
||||
neutral_label.removeClass('invisible');
|
||||
}
|
||||
|
||||
if (state == 6) {
|
||||
neutral_word.removeClass('word_label');
|
||||
neutral_label.addClass('invisible');
|
||||
|
||||
stopword_word.addClass('word_label');
|
||||
stopword_label.removeClass('invisible');
|
||||
|
||||
state = 0;
|
||||
}
|
||||
|
||||
state = state+1;
|
||||
});
|
||||
|
||||
});
|
||||
@ -0,0 +1,140 @@
|
||||
/* ---
|
||||
|
||||
BASIC ELEMENTS
|
||||
|
||||
--- */
|
||||
|
||||
body {
|
||||
background-color: #dfdfdf;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 2rem auto;
|
||||
padding: 4rem 5rem;
|
||||
min-width: 40rem;
|
||||
max-width: 45%;
|
||||
min-height: 90vh;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
border: 0px solid #aeaeae;
|
||||
box-shadow: 0 1px 15px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.action-container {
|
||||
margin: 2rem;
|
||||
padding: 2rem 2.5rem;
|
||||
max-width: 45%;
|
||||
float: right;
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
span.wrapper {
|
||||
display: inline-block;
|
||||
font-family: 'PT Serif', serif;
|
||||
font-size: 1.2rem;
|
||||
text-align:center;
|
||||
position: relative;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* ---
|
||||
|
||||
ELEMENTS IN ACTION CONTAINER
|
||||
|
||||
--- */
|
||||
|
||||
.action-container a {
|
||||
font-family: 'PT Serif', serif;
|
||||
padding: 0.4rem;
|
||||
background: black;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
}
|
||||
|
||||
.action-container a:hover {
|
||||
box-shadow: 0 1px 10px rgba(0,0,0,0.12), 0 1px 10px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.action-container p {
|
||||
margin: 1.25rem 2rem 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* ---
|
||||
|
||||
ELEMENTS IN .WRAPPER
|
||||
|
||||
--- */
|
||||
|
||||
.word, .tag {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
span.invisible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.word {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
span.tag {
|
||||
color: #fff;
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
margin-bottom: -1.25rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Show original word when hovering label */
|
||||
span.word_label {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
}
|
||||
|
||||
.wrapper:hover > span.word_label {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Spacing fix for punctuation */
|
||||
.punctuation {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
/* Colors for tags */
|
||||
.noun .pos {
|
||||
color: #003cb3;
|
||||
}
|
||||
|
||||
.stopword .wordtype {
|
||||
color: #b83e54;
|
||||
}
|
||||
|
||||
.neutral .sentiment {
|
||||
color: #8491a5;
|
||||
}
|
||||
|
||||
.negative .sentiment {
|
||||
color: #c9805b;
|
||||
}
|
||||
|
||||
.positive .sentiment {
|
||||
color: #44a889;
|
||||
}
|
||||
|
||||
.adjective .pos, .adverb .pos {
|
||||
color: #8e445e;
|
||||
}
|
||||
|
||||
.pronoun .pos, .determiner .pos, .to .pos, .preposition .pos {
|
||||
color: #2f7f40;
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reading the Structure</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
|
||||
<script type="text/javascript" src="jquery.min.js"></script>
|
||||
<script type="text/javascript" src="script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container"><p>
|
||||
{% for item, value in words_and_tags.items() %}
|
||||
|
||||
<span id="{{item}}" class="wrapper {{ words_and_tags[item]['wordtype'] }} {{ words_and_tags[item]['sentiment'] }} {{ words_and_tags[item]['POS'] }}">
|
||||
<span class ="tag wordtype invisible"> {{ words_and_tags[item]['wordtype'] }} </span>
|
||||
<span class ="tag sentiment invisible"> {{ words_and_tags[item]['sentiment'] }}</span>
|
||||
<span class ="tag pos invisible"> {{ words_and_tags[item]['POS'] }}</span>
|
||||
<span class ="word {% if words_and_tags[item]['word'] in [',','.','(',')',';',':'] %} punctuation {% else %} {{ words_and_tags[item]['word'] }} {% endif %}"> {{ words_and_tags[item]['word'] }}</span>
|
||||
</span>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
</p></div>
|
||||
|
||||
<div class="action-container">
|
||||
<p><a href="data.json" download>Export data as json</a> </p>
|
||||
<p><a href="poster.pdf" download>Print this as a poster</a> </p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,64 +0,0 @@
|
||||
$(document).ready(function(){
|
||||
var state = 0;
|
||||
|
||||
$('.noun').addClass('fade-out');
|
||||
$('.preposition').addClass('red');
|
||||
$('.verb').addClass('blue');
|
||||
$('.determiner').addClass('cyan');
|
||||
|
||||
$(document).bind('contextmenu', function(e) { return false; });
|
||||
|
||||
$( ".word" ).contextmenu(function() {
|
||||
console.log($(this).hasClass('underline'));
|
||||
$(this).hasClass('underline') == false
|
||||
? $(this).addClass('underline')
|
||||
: $(this).removeClass('underline');
|
||||
});
|
||||
|
||||
$('.word').click( function() {
|
||||
var el = $('.word');
|
||||
console.log(state);
|
||||
|
||||
if (state == 0) {
|
||||
$('.word').removeClass('fade-out red blue cyan');
|
||||
|
||||
$('.stopword').addClass('fade-out');
|
||||
}
|
||||
|
||||
else if (state == 1) {
|
||||
$('.stopword').removeClass('fade-out');
|
||||
$('.neutral').addClass('fade-out');
|
||||
}
|
||||
|
||||
else if (state == 2) {
|
||||
$('.neutral').removeClass('fade-out');
|
||||
$('.noun').addClass('fade-out');
|
||||
$('.preposition').addClass('red');
|
||||
$('.verb').addClass('blue');
|
||||
state = -1;
|
||||
}
|
||||
|
||||
$('.word').each(function() {
|
||||
var el = $(this);
|
||||
|
||||
if (state == 0) {
|
||||
el.empty();
|
||||
el.html(el.data("stopword") + " ");
|
||||
}
|
||||
|
||||
else if (state == 1) {
|
||||
el.empty();
|
||||
el.html(el.data("sentiment") + " ");
|
||||
}
|
||||
|
||||
else {
|
||||
el.empty();
|
||||
el.html(el.data("pos") + " ");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
state = state+1;
|
||||
});
|
||||
|
||||
});
|
||||
@ -1,86 +0,0 @@
|
||||
* {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #639ab2;
|
||||
font-size: 15px;
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
}
|
||||
|
||||
.prelative {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
div.container {
|
||||
width: 100%;
|
||||
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
|
||||
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
|
||||
display: -ms-flexbox; /* TWEENER - IE 10 */
|
||||
display: -webkit-flex; /* NEW - Chrome */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.word {
|
||||
font-size: 3rem;
|
||||
float: left;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
|
||||
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
|
||||
display: -ms-flexbox; /* TWEENER - IE 10 */
|
||||
display: -webkit-flex; /* NEW - Chrome */
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.word:before,
|
||||
.word:after {
|
||||
content: '';
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
font-family: 'PT Serif', serif;
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
font-style: italic;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.word:before {
|
||||
content: attr(data-txt);
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.word:hover:before,
|
||||
.word:active:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fade-out {
|
||||
color: #275152;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
color: cyan;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Wordtagger</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
|
||||
<script type="text/javascript" src="jquery.min.js"></script>
|
||||
<script type="text/javascript" src="script.js"></script>
|
||||
<!--meta name="viewport" content="width=device-width"-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container"><p>
|
||||
{% for item, value in words_and_tags.items() %}
|
||||
<span id="{{item}}" class="word {{words_and_tags[item]['sentiment']}} {{words_and_tags[item]['wordtype']}} {{words_and_tags[item]['POS']}}" data-txt="{{ words_and_tags[item]['word'] }}" data-pos="{{words_and_tags[item]['POS']}}" {% if words_and_tags[item]['word'] in [',','.','(',')'] %} data-sentiment= "{{ words_and_tags[item]['word'] }}" {% else %} data-sentiment= '{{ words_and_tags[item]['sentiment'] }}' {% endif %} {% if words_and_tags[item]['wordtype'] == 'stopword' %} data-stopword= "stopword" {% else %} data-stopword= '{{ words_and_tags[item]['word'] }}' {% endif %} >{{words_and_tags[item]['POS']}} </span>
|
||||
{% endfor %}
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue