mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
analysis design work
This commit is contained in:
Andrew Brown
parent
14bf670845
commit
9941ad2ea4
1
Gemfile
1
Gemfile
@ -35,6 +35,7 @@ gem 'paranoia'
|
||||
# Javascript
|
||||
gem 'coffee-rails'
|
||||
gem 'rails-jquery-autocomplete'
|
||||
gem 'animate-rails'
|
||||
|
||||
# SEO
|
||||
gem 'meta-tags'
|
||||
|
||||
@ -54,6 +54,8 @@ GEM
|
||||
activerecord (>= 3.0)
|
||||
addressable (2.5.2)
|
||||
public_suffix (>= 2.0.2, < 4.0)
|
||||
animate-rails (1.0.10)
|
||||
rails
|
||||
arel (9.0.0)
|
||||
ast (2.4.0)
|
||||
authority (3.3.0)
|
||||
@ -546,6 +548,7 @@ PLATFORMS
|
||||
|
||||
DEPENDENCIES
|
||||
acts_as_list
|
||||
animate-rails
|
||||
authority
|
||||
aws-sdk (~> 1.5)
|
||||
aws-sdk-s3
|
||||
@ -619,4 +622,4 @@ RUBY VERSION
|
||||
ruby 2.5.1p57
|
||||
|
||||
BUNDLED WITH
|
||||
1.16.4
|
||||
1.17.3
|
||||
|
||||
@ -13,5 +13,6 @@
|
||||
*= require font-awesome
|
||||
*= require medium-editor/medium-editor
|
||||
*= require medium-editor/themes/beagle
|
||||
*= require animate
|
||||
*= require_tree .
|
||||
*/
|
||||
|
||||
@ -9,18 +9,7 @@
|
||||
<h5>Length</h5>
|
||||
<div class="row">
|
||||
<div class="col s12 m3">
|
||||
<div class="card <%= Document.color %> lighten-3">
|
||||
<div class="card-content white-text center">
|
||||
<span class="card-title">
|
||||
<h5 class="white-text">12,235</h5>
|
||||
Characters
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m3">
|
||||
<div class="card <%= Document.color %> lighten-2">
|
||||
<div class="card <%= Document.color %>">
|
||||
<div class="card-content white-text center">
|
||||
<span class="card-title">
|
||||
<h5 class="white-text">3,400</h5>
|
||||
@ -30,17 +19,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m3">
|
||||
<div class="card <%= Document.color %> lighten-1">
|
||||
<div class="card-content white-text center">
|
||||
<span class="card-title">
|
||||
<h5 class="white-text">935</h5>
|
||||
Paragraphs
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m3">
|
||||
<div class="card <%= Document.color %>">
|
||||
<div class="card-content white-text center">
|
||||
@ -51,10 +29,52 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m2">
|
||||
<div class="card <%= Document.color %> lighten-3">
|
||||
<div class="card-content white-text center">
|
||||
<span class="card-title">
|
||||
<h5 class="white-text">12</h5>
|
||||
Chapters
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m2">
|
||||
<div class="card <%= Document.color %> lighten-3">
|
||||
<div class="card-content white-text center">
|
||||
<span class="card-title">
|
||||
<h5 class="white-text">935</h5>
|
||||
Paragraphs
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m2">
|
||||
<div class="card <%= Document.color %> lighten-3">
|
||||
<div class="card-content white-text center">
|
||||
<span class="card-title">
|
||||
<h5 class="white-text">12,235</h5>
|
||||
Characters
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Time to read</h5>
|
||||
<div class="row">
|
||||
<div class="col s12 m3">
|
||||
<div class="card orange darken-2">
|
||||
<div class="card-content white-text center">
|
||||
<span class="card-title">
|
||||
<h5 class="white-text">17 minutes</h5>
|
||||
Average reader
|
||||
<div><small>200 words per minute</small></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m3">
|
||||
<div class="card orange lighten-2">
|
||||
<div class="card-content white-text center">
|
||||
@ -67,18 +87,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m3">
|
||||
<div class="card orange lighten-1">
|
||||
<div class="card-content white-text center">
|
||||
<span class="card-title">
|
||||
<h5 class="white-text">17 minutes</h5>
|
||||
Average reader
|
||||
<div><small>200 words per minute</small></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m3">
|
||||
<div class="card orange">
|
||||
<div class="card orange lighten-2">
|
||||
<div class="card-content white-text center">
|
||||
<span class="card-title">
|
||||
<h5 class="white-text">11 minutes</h5>
|
||||
@ -89,7 +98,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m3">
|
||||
<div class="card orange darken-1">
|
||||
<div class="card orange lighten-2">
|
||||
<div class="card-content white-text center">
|
||||
<span class="card-title">
|
||||
<h5 class="white-text">8 minutes</h5>
|
||||
@ -104,7 +113,7 @@
|
||||
<h5>Ease of reading</h5>
|
||||
<div class="row">
|
||||
<div class="col s12 m6">
|
||||
<div class="green card lighten-2">
|
||||
<div class="green card">
|
||||
<div class="card-content">
|
||||
<div class="row">
|
||||
<div class="col s12 m3 white-text center">
|
||||
@ -119,7 +128,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<div class="card-action green lighten-1">
|
||||
<a class="activator blue-text text-darken-4">
|
||||
How is this calculated?
|
||||
</a>
|
||||
@ -129,14 +138,11 @@
|
||||
Readability scales
|
||||
<i class="material-icons right">close</i>
|
||||
</span>
|
||||
<p>
|
||||
Readability scales are a real thing, I promise. This is some text about
|
||||
their background that speaks to their legitimacy.
|
||||
</p>
|
||||
<p>
|
||||
In order to provide you with a generalized score in Notebook.ai, we compute
|
||||
several of the most well-known readability scores on your text and average
|
||||
them together. You can see the original scores per readability test below:
|
||||
them together. You can see the original scores per readability test by clicking
|
||||
"show more readability statistics".
|
||||
</p>
|
||||
<ul>
|
||||
<li>Flesch-Kincaid grade level: 35</li>
|
||||
@ -151,55 +157,23 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Characters</h5>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card green lighten-3">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Page presence</div>
|
||||
<%=
|
||||
timeline([
|
||||
["Alice Yellowbottom", 1, 10 + rand(10)],
|
||||
["Alice Yellowbottom", 20, 20 + rand(10)],
|
||||
["Bob Zebracakes", 1 + rand(10), 10 + rand(10)],
|
||||
["Bob Zebracakes", 20 + rand(10), 30 + rand(10)],
|
||||
["Carol Anderson", 5 + rand(10), 20 + rand(10)],
|
||||
["David Butters", 10 + rand(10), 20 + rand(10)],
|
||||
["Ethan Coolridge", 1 + rand(10), 12 + rand(7)],
|
||||
["Ethan Coolridge", 15 + rand(10), 20 + rand(10)],
|
||||
["Fred Danvers", 20 + rand(10), 35],
|
||||
["Fred Danvers", 1 + rand(10), 10 + rand(5)],
|
||||
])
|
||||
%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m6">
|
||||
<div class="card green lighten-4">
|
||||
<div class="green card lighten-3">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Number of pages each character is on</div>
|
||||
<p>
|
||||
<%=
|
||||
pie_chart({
|
||||
'Alice Yellowbottom' => 33,
|
||||
'Bob Zebracakes' => 19,
|
||||
'Carol Anderson' => 12,
|
||||
'David Butters' => 10,
|
||||
'Ethan Coolridge' => 15,
|
||||
'Fred Danvers' => 14
|
||||
})
|
||||
%>
|
||||
</p>
|
||||
To increase your readability further, try using shorter sentences.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12">
|
||||
<a href="#" class="hoverable btn btn-large teal lighten-1 white-text js-toggle-extended-readability-statistics">
|
||||
Show more readability statistics
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Word Choice</h5>
|
||||
<div class="row">
|
||||
<div class="extended-readability-statistics row animated">
|
||||
<div class="col s12 m3">
|
||||
<div class="card blue">
|
||||
<div class="card-content white-text center">
|
||||
@ -292,6 +266,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="col s12 m3">
|
||||
<div class="card <%= Document.color %> lighten-3">
|
||||
<div class="card-content white-text center">
|
||||
@ -367,6 +342,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="col s12 m6">
|
||||
<div class="card blue lighten-3">
|
||||
@ -407,33 +383,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Plot progression</h5>
|
||||
<h5>Plot</h5>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card grey lighten-3">
|
||||
<div class="card grey lighten-5">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Pages per chapter</div>
|
||||
<%=
|
||||
timeline [
|
||||
["Chapter 1", 0, 3],
|
||||
["Chapter 2", 3, 9],
|
||||
["Chapter 3", 9, 20],
|
||||
["Chapter 4", 20, 22],
|
||||
["Chapter 5", 22, 50],
|
||||
["Chapter 6", 50, 57]
|
||||
]
|
||||
%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Sentiment</h5>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card grey lighten-3">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Emotions per chapter</div>
|
||||
<div class="card-title">Emotions per page</div>
|
||||
<%= line_chart([
|
||||
{ name: 'Joy', data: (1..10).map { |i| [i, 3 * Math.sin(i).abs * rand(2)] }, color: 'green'},
|
||||
{ name: 'Anger', data: (1..10).map { |i| [i, 3 * Math.sin(1 + i).abs * rand(2)] }, color: 'red'},
|
||||
@ -444,13 +399,120 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<% 10.times do |i| %>
|
||||
<% emotion = %w(sad scary happy angry)[rand(4)] %>
|
||||
<% emotion_color = { 'sad' => 'blue', 'scary' => 'orange', 'happy' => 'green', 'angry' => 'red' } %>
|
||||
<div class="col s12 m3">
|
||||
<div class="card <%= emotion_color[emotion] %> lighten-5">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Chapter <%= 1 + i %></div>
|
||||
<%= %w(somewhat very)[rand(2)].titleize %> <%= emotion %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
-->
|
||||
|
||||
<!--
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card grey lighten-3">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Pages per chapter</div>
|
||||
<%=
|
||||
timeline [
|
||||
["Chapter 1", 0, 3],
|
||||
["Chapter 2", 3, 9],
|
||||
["Chapter 3", 9, 20],
|
||||
["Chapter 4", 20, 22],
|
||||
["Chapter 5", 22, 50],
|
||||
["Chapter 6", 50, 57]
|
||||
]
|
||||
%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<h5>Rhythm & flow</h5>
|
||||
<h5>Characters</h5>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="purple card lighten-4">
|
||||
<div class="card-content white-text">
|
||||
<div class="card green lighten-3">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Page presence</div>
|
||||
<%=
|
||||
timeline([
|
||||
["Alice Yellowbottom", 1, 10 + rand(10)],
|
||||
["Alice Yellowbottom", 20, 20 + rand(10)],
|
||||
["Bob Zebracakes", 1 + rand(10), 10 + rand(10)],
|
||||
["Bob Zebracakes", 20 + rand(10), 30 + rand(10)],
|
||||
["Carol Anderson", 5 + rand(10), 20 + rand(10)],
|
||||
["David Butters", 10 + rand(10), 20 + rand(10)],
|
||||
["Ethan Coolridge", 1 + rand(10), 12 + rand(7)],
|
||||
["Ethan Coolridge", 15 + rand(10), 20 + rand(10)],
|
||||
["Fred Danvers", 20 + rand(10), 35],
|
||||
["Fred Danvers", 1 + rand(10), 10 + rand(5)],
|
||||
])
|
||||
%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m6">
|
||||
<div class="card green lighten-5">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Number of pages each character is on</div>
|
||||
<p>
|
||||
<%=
|
||||
pie_chart({
|
||||
'Alice Yellowbottom' => 33,
|
||||
'Bob Zebracakes' => 19,
|
||||
'Carol Anderson' => 12,
|
||||
'David Butters' => 10,
|
||||
'Ethan Coolridge' => 15,
|
||||
'Fred Danvers' => 14
|
||||
})
|
||||
%>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m6">
|
||||
<div class="card green lighten-5">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Main characters</div>
|
||||
<p>
|
||||
Based on their frequency in appearing in <%= @document.title %>, the
|
||||
following characters are ordered by importance.
|
||||
</p>
|
||||
|
||||
<ul class="collection" style='border: 0'>
|
||||
<% 3.times do %>
|
||||
<li class="collection-item avatar green lighten-5">
|
||||
<i class="material-icons circle <%= Character.color %>">
|
||||
<%= Character.icon %>
|
||||
</i>
|
||||
<%= link_to 'Alice Yellowbottom', '#', class: 'title' %>
|
||||
<p>Main character</p>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Style</h5>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="purple card lighten-5">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Words per sentence</div>
|
||||
<p>
|
||||
<%= line_chart((1..100).map { |i| [i, 5 + 7 * Math.sin(i).abs * rand(3)] }) %>
|
||||
@ -480,3 +542,24 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$('.extended-readability-statistics').css('display', 'none');
|
||||
$('.extended-readability-statistics').toggleClass('fadeOut');
|
||||
$('.js-toggle-extended-readability-statistics').click(function (e) {
|
||||
var extended_section = $('.extended-readability-statistics');
|
||||
var visible = extended_section.is(':visible');
|
||||
var new_button_verb = visible ? 'Show' : 'Hide';
|
||||
|
||||
extended_section.toggleClass('fadeIn');
|
||||
extended_section.toggleClass('fadeOut');
|
||||
extended_section.css('display', visible ? 'none' : 'block');
|
||||
|
||||
$(this).text(new_button_verb + ' more readability statistics');
|
||||
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user