Permalink
Browse files

README

  • Loading branch information...
1 parent 3fb6800 commit e4713903cc00aab0606ba46ab722ae271ee69da8 @benbjohnson committed Jan 7, 2014
Showing with 90 additions and 8 deletions.
  1. +12 −0 README.md
  2. +30 −6 index.html
  3. +35 −0 raft/scripts/frames/conclusion.js
  4. +3 −2 raft/scripts/frames/init.js
  5. +8 −0 raft/scripts/frames/replication.js
  6. +2 −0 raft/scripts/frames/title.js
View
@@ -11,3 +11,15 @@ The way that data flows is critical to performance and reliability.
This project seeks to spread the knowledge of our systems through interactive visualization.
If you have a system that you understand and wish to share then please add a [GitHub Issue](https://github.com/benbjohnson/thesecretlivesofdata/issues).
Data visualization knowledge is not necessary -- just the desire to spread some knowledge.
+
+
+## Visualizations
+
+Below is a list of data visualizations and their associated Github issue.
+Please report any bugs you find or any suggestions you have for how to make these visualizations more understandable.
+
+1. [Raft: Understandable Distributed Consensus](http://thesecretlivesofdata.com/raft) ([#1](https://github.com/benbjohnson/thesecretlivesofdata/issues/1))
+
+2. Apache Kafka ([#4](https://github.com/benbjohnson/thesecretlivesofdata/issues/4)) - *Planning*
+
+If you have suggestions for new topics, please submit a new Github issue.
View
@@ -1,17 +1,41 @@
<!DOCTYPE html>
-<html>
+<html lang="en">
<head>
<title>The Secret Lives of Data</title>
- <link href="styles/bootstrap-3.0.2.css" rel="stylesheet">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+ <link href="styles/bootstrap/bootstrap-3.0.2.css" rel="stylesheet">
<script src="scripts/jquery/jquery-2.0.3.min.js"></script>
<script src="scripts/bootstrap/bootstrap-3.0.2.min.js"></script>
</head>
<body>
- <main class="bs-masthead" id="content" role="main">
- <div class="container">
- <h1>The Secret Lives of Data</h1>
+ <header id="header">
+ <nav class="navbar navbar-default" role="navigation">
+ <div class="container">
+ <div class="navbar-header">
+ <a class="navbar-brand" href="/">
+ The Secret Lives of Data
+ </a>
+ </div>
+ </div>
+ </nav>
+ </header>
+
+ <div class="container">
+ <div class="row">
+ <div class="col-md-12">
+ <h2><u>Visualizations</u></h2>
+ <h3><a href="/raft">Raft: Understandable Distributed Consensus</a></h3>
+ </div>
+ </div>
+ </div>
+
+ <div class="container" style="margin-top:40px">
+ <div class="row">
+ <div class="col-md-12">
+ <em>For questions and comments please visit our <a href="https://github.com/benbjohnson/thesecretlivesofdata" target="_blank">Github page</a>.</em>
+ </div>
</div>
- </main>
+ </div>
</body>
</html>
@@ -0,0 +1,35 @@
+
+"use strict";
+/*jslint browser: true, nomen: true*/
+/*global define*/
+
+define([], function () {
+ return function (frame) {
+ var player = frame.player(),
+ layout = frame.layout();
+
+ frame.after(1, function() {
+ frame.model().clear();
+ layout.invalidate();
+ })
+
+ .after(500, function () {
+ frame.model().title = '<h1 style="visibility:visible">The End</h1>'
+ + '<br/>' + frame.model().controls.html();
+ layout.invalidate();
+ })
+ .after(500, function () {
+ frame.model().controls.show();
+ })
+
+ .after(500, function () {
+ frame.model().title = '<h2 style="visibility:visible">For more information:</h2>'
+ + '<h3 style="visibility:visible"><a href="https://ramcloud.stanford.edu/wiki/download/attachments/11370504/raft.pdf">The Raft Paper</a></h3>'
+ + '<h3 style="visibility:visible"><a href="http://raftconsensus.github.io/">Raft Web Site</a></h3>'
+ + '<br/>' + frame.model().controls.html();
+ layout.invalidate();
+ })
+
+ player.play();
+ };
+});
@@ -3,14 +3,15 @@
/*jslint browser: true, nomen: true*/
/*global define*/
-define(["./playground", "./title", "./intro", "./overview", "./election", "./replication"],
- function (playground, title, intro, overview, election, replication) {
+define(["./playground", "./title", "./intro", "./overview", "./election", "./replication", "./conclusion"],
+ function (playground, title, intro, overview, election, replication, conclusion) {
return function (player) {
// player.frame("playground", "Playground", playground);
player.frame("home", "Home", title);
player.frame("intro", "What is Distributed Consensus?", intro);
player.frame("overview", "Protocol Overview", overview);
player.frame("election", "Leader Election", election);
player.frame("replication", "Log Replication", replication);
+ player.frame("conclusion", "Other Resources", conclusion);
};
});
@@ -196,6 +196,14 @@ define([], function () {
subtitle('<h2>Both nodes A & B will roll back their uncommitted entries and match the new leader\'s log.</h2>');
})
.after(1, wait).indefinite()
+ .after(1, function () {
+ subtitle('<h2>Our log is now consistent across our cluster.</h2>', false);
+ })
+ .after(1, wait).indefinite()
+
+ .then(function() {
+ player.next();
+ })
player.play();
};
@@ -20,6 +20,8 @@ define([], function () {
layout.invalidate();
})
.after(500, function () {
+ frame.model().subtitle = '<p style="visibility:visible"><em><a href="https://github.com/benbjohnson/thesecretlivesofdata/issues/1" target="_blank">Please note: this is a working draft. Click here to provide feedback.</a></em></h1>';
+ layout.invalidate();
frame.model().controls.show();
})

0 comments on commit e471390

Please sign in to comment.