Permalink
Browse files

Major reorg + new examples of miso.dataset.

  • Loading branch information...
1 parent e3975c5 commit ef00b4f8e9d754eb82322e3c8a86be3df910dbce @iros committed Sep 28, 2012
Showing with 10,398 additions and 210 deletions.
  1. +11 −21 README.md
  2. +1 −1 code/crossfilter/visual.js
  3. +7 −2 code/json-streams/index.html
  4. +0 −19 code/miso-dataset-basics/index.html
  5. +9 −0 code/miso.dataset/README.md
  6. +23 −0 code/miso.dataset/basic.html
  7. +6 −9 code/{miso-dataset-basics/miso-dataset-basics.js → miso.dataset/basic.js}
  8. +41 −0 code/miso.dataset/cooccurance.html
  9. +233 −0 code/miso.dataset/cooccurance.js
  10. +20 −0 code/miso.dataset/customtype.html
  11. +2 −2 code/{miso-dataset-custom-type/miso-dataset-custom-type.js → miso.dataset/customtype.js}
  12. +3 −0 code/miso.dataset/index.html
  13. +156 −0 code/miso.dataset/superpowers.html
  14. +104 −0 code/miso.dataset/superpowers.js
  15. +22 −0 code/miso.dataset/superpowers_helper.js
  16. +0 −65 code/mvc-backbone/mvc-backbone.js
  17. +0 −43 code/mvc-canjs/mvc-canjs.js
  18. +6 −0 code/mvc/README.md
  19. +1 −1 code/{mvc-backbone/index.html → mvc/backbone.html}
  20. +64 −0 code/mvc/backbone.js
  21. +1 −1 code/{mvc-canjs/index.html → mvc/canjs.html}
  22. +41 −0 code/mvc/canjs.js
  23. +5 −0 code/mvc/index.html
  24. +5 −5 code/taffy-db/competencies.js
  25. +1 −1 code/underscore/README.md
  26. +1 −1 code/underscore/index.html
  27. +1 −1 code/underscore/visual.js
  28. +3 −0 code/web-workers/README.md
  29. +2 −17 code/web-workers/index.html
  30. +9 −7 code/{miso-dataset-custom-type/index.html → web-workers/web-worker.html}
  31. +1 −1 code/web-workers/worker.js
  32. +159 −0 data/superpower_edges.csv
  33. +4 −4 {code/json-streams → libs}/jsonstreams-nodedeps.js
  34. +4,460 −0 libs/lodash.js
  35. +0 −9 libs/miso.ds.deps.0.2.1.js
  36. +3,461 −0 libs/miso.ds.js
  37. +1,106 −0 libs/moment.js
  38. +429 −0 libs/underscore.deferred.js
View
@@ -1,43 +1,33 @@
Building Client-Side Data-driven applications - Talk Materials
=====================
+This repo is ever evloving in an attempt to capture the various client-side data manipulation and management libraries out there. This is a topic close to my heart and thus one that I love to tell others about as well.
+
# Contents
This repo contains:
-* code samples (/code)
+* code samples (/code) - Each section contains its own readme explaining the examples.
* data (/data)
-# How do I run this code?
+# Questions
+
+## How do I run this code?
From the root of the repo run your favorite basic http server.
I'm a fan of `python -m SimpleHTTPServer`.
-# I Don't see anything
+## Why don't I see anything?
That's because some of the output is in the console.
-You should pop that open and try again.
-
-# Do I have to run this code?
-
-No. The following examples (sorted in order of slide progression) also have jsBins you can view:
-
-* [underscore-basics](http://jsbin.com/ofoyur/3/edit)
-* [mvc-backbone](http://jsbin.com/ugedon/edit#javascript,html,live)
-* [mvc-canjs](http://jsbin.com/ayarad/edit#javascript,html,live)
-* [taffy-db](http://jsbin.com/ehakot/3/edit)
-* [crossfilter-basic](http://jsbin.com/iyabok/5/edit#javascript,html,live)
-* [crossfilter-nan](http://jsbin.com/ojuqoq/edit#javascript,html,live)
-* [miso-dataset-basics](http://jsbin.com/anodul/edit#javascript,html,live)
-* [miso-dataset-custom-type](http://jsbin.com/udikel/2/edit)
-* web-workers - Doesn't have a jsBin.
-* [json-streams](http://jsbin.com/ijitam/edit#javascript,html,live)
+You should pop that open and try again. Otherwise make sure you ran your server from
+the root of the application.
-# Is this production level code?
+## Is this production level code?
Hah! Funny. Nope. I didn't architect any proper apps here. Use these code samples as guides, but please get to know the libraries well enough to judge them yourself before you use them.
-# I have questions you haven't answered here
+## I have questions you haven't answered here
Great. Ping me at @ireneros on twitter or irene at bocoup.com.
I also idle in many places on irc: #bocoup, #misoproject.
@@ -77,7 +77,7 @@ d3.json("../../data/all.json", function(heroes) {
// The key will be the grouping function result, the value
// by default will be count. we can always return something else.
results[competency].scores = [];
- for (var i = 0; i < intervals; i++) {
+ for (i = 0; i < intervals; i++) {
var val = competency_groups[i].value;
if (val < global_min) {
global_min = val;
@@ -8,11 +8,16 @@
<body>
<h1> JSON Streams </h1>
<div id="heroes">
- Open Your Console
+ <p>JSON Streams demonstrate a technique by @maxogden that makes use of servers' chunked transfers to capture incoming data on XHR ready state 3 rather than 4 (as data is coming in, rather when it all arrived.)
+ </p>
+ <p>
+ For more info read the post here: <a href="http://substance.io/maxogden/replicating-large-datasets-into-html5">http://substance.io/maxogden/replicating-large-datasets-into-html5</a>
+ </p>
+ <h3>Open the console to see the output</h3>
</div>​
<script type="text/javascript" src="../../libs/jquery.min.js"></script>
<script type="text/javascript" src="../../libs/underscore.js"></script>
- <script type="text/javascript" src="jsonstreams-nodedeps.js"></script>
+ <script type="text/javascript" src="../../libs/jsonstreams-nodedeps.js"></script>
<script type="text/javascript" src="json-streams.js"></script>
</body>
</html>
@@ -1,19 +0,0 @@
-<html lang="en">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Miso Dataset Custom Type</title>
- <meta name="author" content="Irene Ros">
- <!-- Date: 2012-06-29 -->
-</head>
-<body>
- <h3>Top hair colors for all heroes and villains</h3>
- <ul id="heroHairColor">
- <li>Loading...</li>
- </ul>
-
- <!-- resources -->
- <script type="text/javascript" src="../../libs/jquery.min.js"></script>
- <script type="text/javascript" src="../../libs/miso.ds.deps.0.2.1.js"></script>
- <script type="text/javascript" src="miso-dataset-basics.js"></script>
- </body>
-</html>
@@ -0,0 +1,9 @@
+# Miso Dataset
+
+1. [basic.html](basic.html) - A basic example using miso dataset demonstrating finding the most popular 10 hair colors of super heroes and villains.
+
+2. [customtype.html](customtype.html) - A slightly more complex example demonstrating how one might create a custom data type (numbers with commas.)
+
+3. [superpowers.html](superpowers.html) - A collection of base Dataset functions that visually demonstrate computed columns, filtering, iteration and so on.
+
+4. [coocurance.html](cooccurance.html) - A massive visualization of the cooccurance of super powers based on @mbostock's Les Miserables example. Demonstrates adding a custom serialization method to Dataset.
@@ -0,0 +1,23 @@
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Miso Dataset Basic Example</title>
+ <meta name="author" content="Irene Ros">
+ <!-- Date: 2012-06-29 -->
+</head>
+<body>
+ <h3>Top hair colors for all heroes and villains</h3>
+ <ul id="heroHairColor">
+ <li>Loading...</li>
+ </ul>
+
+ <!-- resources -->
+ <script type="text/javascript" src="../../libs/jquery.min.js"></script>
+ <script type="text/javascript" src="../../libs/lodash.js"></script>
+ <script type="text/javascript" src="../../libs/underscore.deferred.js"></script>
+ <script type="text/javascript" src="../../libs/underscore.math.js"></script>
+ <script type="text/javascript" src="../../libs/moment.js"></script>
+ <script type="text/javascript" src="../../libs/miso.ds.js"></script>
+ <script type="text/javascript" src="basic.js"></script>
+ </body>
+</html>
@@ -7,25 +7,22 @@ var heroes = new Miso.Dataset({
// fetch data
heroes.fetch().then(function() {
- // === Products
- console.log("intelligence",
- "min", heroes.min("intelligence"),
- "max", heroes.max("intelligence"));
-
- // === derivatives + sorting
+ // Get all the hair color counts
+ // and then sort them by the actual resulting count.
var heroes_by_haircolor = heroes.countBy("Hair_color")
.sort(function(row1, row2) {
if (row1.count > row2.count) { return -1; }
if (row1.count < row2.count) { return 1; }
return 0;
});
- // ==== output colors
+ // ==== output top 10 colors as a basic list.
var list = $('ul#heroHairColor').empty();
for(var i = 0; i < 10; i++) {
var row = heroes_by_haircolor.rowByPosition(i);
$('<li>', {
- text : row.Hair_color + "(" + row.count + ")"
- }).appendTo(list);
+ text : row.Hair_color + " (" + row.count + ")"
+ })
+ .appendTo(list);
}
});
@@ -0,0 +1,41 @@
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Miso Dataset Co Occurance</title>
+ <meta name="author" content="Irene Ros">
+ <link rel="stylesheet" type="text/css" href="http://bost.ocks.org/mike/style.css?20120427">
+ <style>
+ svg {
+ font: 7px sans-serif;
+ }
+ text.active {
+ fill : red;
+ }
+ .background {
+ fill : #eee;
+ }
+ line {
+ stroke : white;
+ }
+ </style>
+
+ <!-- Date: 2012-06-29 -->
+</head>
+<body>
+ <select id="order">
+ <option value="name">by Name</option>
+ <option value="count">by Frequency</option>
+ <option value="group">by Cluster</option>
+</select>
+
+ <!-- resources -->
+ <script type="text/javascript" src="../../libs/jquery.min.js"></script>
+ <script type="text/javascript" src="../../libs/lodash.js"></script>
+ <script type="text/javascript" src="../../libs/underscore.deferred.js"></script>
+ <script type="text/javascript" src="../../libs/underscore.math.js"></script>
+ <script type="text/javascript" src="../../libs/moment.js"></script>
+ <script type="text/javascript" src="../../libs/miso.ds.js"></script>
+ <script type="text/javascript" src="../../libs/d3.v2.js"></script>
+ <script type="text/javascript" src="cooccurance.js"></script>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit ef00b4f

Please sign in to comment.