Markov Chain Text Visualization
Take the input text and create some output text in the style of the original.
by Dan Shahin
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/vis/3.6.4/vis.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/vis/3.7.0/vis.css">
<h1>Visualizing Markov Text</h1>
<div>
<p>Transform the input text into interesting output text in the style of the original text.</p>
</div>
<textarea name="input" id="input" cols="80" rows="5">Attack of the Video Villains
Carnival of Crime
Crime in the Cards
Crime in the Kennel
Cross-Country Crime
Crusade of the Flaming Sword
Danger in the Extreme
Danger in the Fourth Dimension
Daredevils
Day of the Dinosaur
Double Jeopardy
Eye on Crime
Farming Fear
Fear on Wheels
Ghost of a Chance
Hidden Mountain
Hide-And-Sneak
High-Speed Showdown
In Plane Sight
Kickoff to Danger
Lost in Gator Swamp
Maximum Challenge
Motocross Madness
Mystery on Makatunk Island
Mystery with a Dangerous Beat
No Way Out
One False Step
Panic on Gull Island
Passport to Danger
Past and Present Danger
Racing to Disaster
Radical Moves
Reel Thrills
Rock and Roll Renegades
Sabotage at Sports City
Sidetracked to Danger
Skin and Bones
Slam Dunk Sabotage
Speed Times Five
Terminal Shock
Terror at High Tide
The Alaskan Adventure
The Baseball Card Conspiracy
The Caribbean Cruise Caper
The Case of the Cosmic Kidnapping
The Case of the Counterfeit Criminals
The Case of the Psychic Vision
The Castle Conundrum
The Chase for the Mystery Twister
The Cold Cash Caper
The Crisscross Crime
The Dangerous Transmission
The Demolition Mission
The Desert Thieves
The End of the Trail
The Giant Rat of Sumatra
The Hunt for the Four Brothers
The Hypersonic Secret
The Ice-Cold Case
The London Deception
The Lure of the Italian Treasure
The Mark of the Blue Tattoo
The Million-Dollar Nightmare
The Money Hunt
The Mystery in the Old Mine
The Mystery of the Black Rhino
The Prime Time Crime
The Robots Revenge
The Rocky Road to Revenge
The Search for the Snow Leopard
The Secret of Sigma Seven
The Secret of Skeleton Reef
The Secret of the Soldiers Gold
The Smoke Screen...CSS
body {
text-align: center;
}
#input {
font-size: 18px;
}
#output {
background-image: url("http://s25.postimg.org/tt4ml3dzj/img_noise_361x370_1.png");
background-color:white;
opacity: 1;
border: 1px solid black;
margin: 40px;
padding: 40px;
display:none;
font-family: cursive;
font-size: 24px;
-webkit-box-shadow: 10px 10px 51px 0px rgba(0,0,0,0.64);
-moz-box-shadow: 10px 10px 51px 0px rgba(0,0,0,0.64);
box-shadow: 10px 10px 51px 0px rgba(0,0,0,0.64);
}
#json{
display: none;
font-family: monospace;
font-size: 18px;
margin-top:20px;
}
#min{
width: 3em;
}
#generate{
}
.generate {
-moz-box-shadow: 0px 0px 0px 2px #9fb4f2;
-webkit-box-shadow: 0px 0px 0px 2px #9fb4f2;
box-shadow: 0px 0px 0px 2px #9fb4f2;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7892c2), color-stop(1, #476e9e));
background:-moz-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:-webkit-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:-o-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:-ms-linear-gradient(top, #7892c2 5%, #476e9e 100%);
background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7892c2', endColorstr='#476e9e',GradientType=0);
background-color:#7892c2;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px solid #4e6096;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:19px;
padding:12px 37px;
text-decoration:none;
text-shadow:0px 1px 0px #283966;
}
.generate:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #476e9e), color-stop(1, #7892c2));
background:-moz-linear-gradient(top, #476e9e 5%, #7892c2 100%);
background:-webkit-linear-gradient(top, #476e9e 5%, #7892c2 100%);
background:-o-linear-gradient(top, #476e9e 5%, #7892c2...JavaScript
var terminals = {};
var startwords = [];
var wordstats = {};
var sentences = [];
var network;
var colors = {
start : '#bfdf99',
sentence: '#df99b3',
sentenceStart : '#08DB00',
terminal: '#e2e69e'
};
nodes = new vis.DataSet();
edges = new vis.DataSet();
// create a network
var container = document.getElementById('relationships');
var data= {
nodes: nodes,
edges: edges,
};
var options = {
physics: {barnesHut: {gravitationalConstant: -10975}},
width: '100%',
configurePhysics : false,
zoomable : true,
navigation: true,
height: '500px',
edges: {
color: 'red',
width: 5
},
nodes: {
color: {
background: 'white',
border: 'gray',
highlight: {
background: 'pink',
border: 'red'
}
},
shape: 'label',
fontSize : 48,
radius: 24
}
};
network = new vis.Network(container, data, options);
$('#generate').click(function () {
var $btn = $(this).text('generating');
var input = $('#input').val();
var newText = generate(input);
$('#output').html(newText).toggle('blind');
$btn.text('generate');
});
$('#reset').click(function () {
$('#json').val('').hide();
$('#input').val($('#input').html() ).show();
$('#output').hide().html('');
nodes.clear();
edges.clear();
});
function generate(input) {
$('#output').hide();
//show the wordstats data structure
if($('#debug').is(':checked')){
$('#json').val(JSON.stringify(wordstats, null, 4)).show();
network.setOptions({configurePhysics : true});
$('div.PhysicsConfiguration').show();
}else{
network.setOptions({configurePhysics : false});
$('#json').hide();
$('div.PhysicsConfiguration').hide();
}
terminals = {}; //properties are last words in sentences
startwords = []; //values are first words in sentences
wordstats = {}; // the markov...