final shift around and addition of slides

johnistan · Jan 12, 2012 · c2b0c7a · c2b0c7a
1 parent 0bcc857
commit c2b0c7a
Show file tree

Hide file tree

Showing 12 changed files with 328 additions and 27 deletions.
diff --git a/elements.html b/elements.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+    <head>
+        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
+	    <link type="text/css" rel="stylesheet" href="prettify.css">
+	    <script type="text/javascript" src="prettify.js"></script>
+	    <link type="text/css" rel="stylesheet" href="style.css">
+	    <title></title>
+    </head>
+    <body onload="prettyPrint()">
+        <div id="body">
+            <div id="header">
+                <h1>elements of a d3 viz:</h1>
+                <div style="margin-left:auto; margin-right:auto; width:850px; padding-top:0.5em">
+                    <ul>
+                        <li>json: data</li>
+                        <li>html: structure</li>
+                        <li>javascript+d3: layout</li>
+                        <li>css: teh pretty</li>
+                    </ul>
+
+                <span style="font-size:1.8em;">JSON + HTML + JS + CSS</span>
+                </div>
+
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/html_after.html b/html_after.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+    <head>
+        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
+	    <link type="text/css" rel="stylesheet" href="prettify.css">
+	    <script type="text/javascript" src="prettify.js"></script>
+	    <link type="text/css" rel="stylesheet" href="style.css">
+	    <title></title>
+    </head>
+    <body onload="prettyPrint()">
+        <div id="body">
+            <pre class="prettyprint">
+&lt;body&gt;
+    &lt;ul&gt;
+        &lt;li&gt;44 people specify 0 topics&lt;/li&gt;
+        &lt;li&gt;6 people specify 1 topic&lt;/li&gt;
+        &lt;li&gt;1 person specifies 2 topics&lt;/li&gt;
+        &lt;li&gt;3 people specify 3 topics&lt;/li&gt;
+        &lt;li&gt;1 person specifies 4 topics&lt;/li&gt;
+        ...
+    &lt;/ul&gt;
+&lt;/body&gt;          
+            </pre>
+        </div>
+    </body>
+</html>
diff --git a/html_after_bars.html b/html_after_bars.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+    <head>
+        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
+	    <link type="text/css" rel="stylesheet" href="prettify.css">
+	    <script type="text/javascript" src="prettify.js"></script>
+	    <link type="text/css" rel="stylesheet" href="style.css">
+	    <title></title>
+    </head>
+    <body onload="prettyPrint()">
+        <div id="body">
+            <pre class="prettyprint" >
+&lt;body&gt;
+   &lt;svg&gt;
+       &lt;rect y="0" width="484" height="24"&gt;&lt;/rect&gt;
+       &lt;rect y="27" width="66" height="24"&gt;&lt;/rect&gt;
+       &lt;rect y="54" width="11" height="24"&gt;&lt;/rect&gt;
+       &lt;rect y="81" width="33" height="24"&gt;&lt;/rect&gt;
+       ...
+   &lt;/svg&gt;
+&lt;/body&gt;
+            </pre>
+        </div>
+    </body>
+</html>
diff --git a/html_base.html b/html_base.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+    <head>
+        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
+	    <link type="text/css" rel="stylesheet" href="prettify.css">
+	    <script type="text/javascript" src="prettify.js"></script>
+	    <link type="text/css" rel="stylesheet" href="style.css">
+	    <title></title>
+    </head>
+    <body onload="prettyPrint()">
+        <div id="body">
+            <pre class="prettyprint">
+&lt;html&gt;
+    &lt;head&gt;   
+        &lt;script type="text/javascript" 
+        src="http://mbostock.github.com/d3/d3.js"&gt;
+        &lt;/script&gt;
+     &lt;/head&gt;
+    &lt;body&gt;
+    &lt;script&gt;
+        d3.json(
+            "http://localhost:8000/data.json", 
+            function(data){...}
+        )
+    &lt;/script&gt;
+    &lt;/body&gt;
+&lt;/html&gt;            
+            </pre>
+        </div>
+    </body>
+</html>
diff --git a/index.html b/index.html
@@ -86,18 +86,26 @@
     "JSON_3.html",
     "jsonlint.html",
     "server.html",
+    "elements.html",
     "JSON_4.html",
+    "html_base.html",
+    "list_code.html",
+    "html_after.html",
     "list.html",
     "list_code.html",
     "bar.html",
+    "html_after_bars.html",
     "bar_code.html",
     "select.html",
     "scale.html",
     "scale_1.html",
     "axes.html",
     "line.html",
+    "onmouseover.html",
+    "summary.html",
     "layout.html",
-    "summary.html"
+    "layout_1.html",
+
 ];
 
 var previous = d3.select("#previous"),

diff --git a/layout.html b/layout.html
@@ -29,11 +29,6 @@
     .attr("y", function(d) { return d.y; })
     .call(force.drag);
 
-force.on("tick", function() {
-    node.attr("transform", 
-    function(d){return "translate(" + d.x + "," + d.y + ")";});
-});
-
             </pre>
             <script>
 

diff --git a/layout_1.html b/layout_1.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+    <head>
+        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
+        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
+        <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script> 
+
+	    <link type="text/css" rel="stylesheet" href="prettify.css">
+	    <script type="text/javascript" src="prettify.js"></script>
+        <link type="text/css" rel="stylesheet" href="style.css">
+
+
+        <title>egovis</title>
+
+
+
+    </head>
+    <body onload="prettyPrint()">
+        <div id="body">
+            <div style="height:300px; width:750px; margin-left:auto; margin-right:auto; margin-top:1em" id="graph">
+            </div>
+            <pre style="font-size:0.7em" class="prettyprint">
+
+node.append('svg:image')
+    .attr('x', 0).attr('y', 0)
+    .attr('width', 40).attr('height', 40)
+    .attr('xlink:href', function(d){return d.photo_url})
+
+force.on("tick", function() {
+    node.attr("transform", 
+    function(d){return "translate(" + d.x + "," + d.y + ")";});
+});
+
+
+            </pre>
+            <script>
+
+                var w = 750,
+                    h = 300,
+                    fill = d3.scale.category20();
+
+                vis = d3.select("#graph")
+                    .append("svg")
+
+                d3.json(
+                    'http://localhost:8000/data/hackr_event.json', 
+                    function(json){
+
+
+                    var force = d3.layout.force()
+                        .charge(-50)
+                        .nodes(json.nodes)
+                        .size([w, h])
+                        .start();
+
+                    var node = vis.selectAll("g")
+                        .data(json.nodes)
+                        .enter().append("g")  
+                        .attr("id", function(d){ return d.name;})    
+                        .attr("class", "node")
+                        .attr("x", function(d) { return d.x; })
+                        .attr("y", function(d) { return d.y; })
+                        .call(force.drag);
+
+                    node.append('svg:image')
+                        .attr('x', 0)
+                        .attr('y', 0)
+                        .attr('width', 40)
+                        .attr('height', 40)
+                        .attr('xlink:href', function(d){return d.photo_url})
+
+                    force.on("tick", function() {
+                        node.attr(
+                            "transform", 
+                            function(d) { return "translate(" + d.x + "," + d.y + ")"; }
+                        );
+                    });
+
+                    d3.select("#chart").on("click", function() {
+                        console.log('click')
+                        json.nodes.forEach(function(o, i) {
+                            o.x += (Math.random() - .5) * 50;
+                            o.y += (Math.random() - .5) * 50;
+                        });
+                        force.resume();
+                    });
+
+                })
+
+            </script>
+        </div>
+    </body>
+</html>
diff --git a/line.html b/line.html
@@ -16,11 +16,9 @@
 line = d3.svg.line()
     .x(function(d){return time_scale( new Date(d.time));})
     .y(function(d){return value_scale(d.yes_rsvp_count);})
-    .interpolate("basis");
 
 svg.append("svg:path")
       .attr("class", "line")
-      .attr("clip-path", "url(#clip)")
       .attr("d", line(data));
             </pre>
         </div>
@@ -64,7 +62,6 @@
 
                 svg.append("svg:path")
                       .attr("class", "line")
-                      .attr("clip-path", "url(#clip)")
                       .attr("d", line(data));
 
                 svg.append("svg:g")

diff --git a/list_code.html b/list_code.html
@@ -12,21 +12,21 @@
 d3.json(
   "http://localhost:8000/data/num_topics.json", 
   function(num_topics){
-  d3.select("body")
-    .append("ul")
-    .selectAll("li")
-    .data(num_topics)
-    .enter()
-    .append("li")
-    .text(
-      function(d){
-        var msg = d.count;
-        msg += " people specify ";
-        msg += d.num_topics;
-        msg += " topics";
-        return msg;
-      }
-    );
+      d3.select("body")
+        .append("ul")
+        .selectAll("li")
+        .data(num_topics)
+        .enter()
+        .append("li")
+        .text(
+          function(d){
+            var msg = d.count;
+            msg += " people specify ";
+            msg += d.num_topics;
+            msg += " topics";
+            return msg;
+          }
+        );
   }
 );
     </pre>