From c2b0c7ad58094ee141704a79826b130517901683 Mon Sep 17 00:00:00 2001 From: Mike Dewar Date: Wed, 11 Jan 2012 22:32:31 -0500 Subject: [PATCH] final shift around and addition of slides --- elements.html | 28 +++++++++++++ html_after.html | 26 ++++++++++++ html_after_bars.html | 25 +++++++++++ html_base.html | 31 ++++++++++++++ index.html | 10 ++++- layout.html | 5 --- layout_1.html | 93 +++++++++++++++++++++++++++++++++++++++++ line.html | 3 -- list_code.html | 30 +++++++------- onmouseover.html | 98 ++++++++++++++++++++++++++++++++++++++++++++ scale.html | 4 +- structure.html | 2 +- 12 files changed, 328 insertions(+), 27 deletions(-) create mode 100644 elements.html create mode 100644 html_after.html create mode 100644 html_after_bars.html create mode 100644 html_base.html create mode 100644 layout_1.html create mode 100644 onmouseover.html diff --git a/elements.html b/elements.html new file mode 100644 index 0000000..b6725c3 --- /dev/null +++ b/elements.html @@ -0,0 +1,28 @@ + + + + + + + + + + +
+ +
+ + diff --git a/html_after.html b/html_after.html new file mode 100644 index 0000000..83866bb --- /dev/null +++ b/html_after.html @@ -0,0 +1,26 @@ + + + + + + + + + + +
+ 
+<body>
+    <ul>
+        <li>44 people specify 0 topics</li>
+        <li>6 people specify 1 topic</li>
+        <li>1 person specifies 2 topics</li>
+        <li>3 people specify 3 topics</li>
+        <li>1 person specifies 4 topics</li>
+        ...
+    </ul>
+</body>          
+
+
+ + diff --git a/html_after_bars.html b/html_after_bars.html new file mode 100644 index 0000000..ed7b27b --- /dev/null +++ b/html_after_bars.html @@ -0,0 +1,25 @@ + + + + + + + + + + +
+ 
+<body>
+   <svg>
+       <rect y="0" width="484" height="24"></rect>
+       <rect y="27" width="66" height="24"></rect>
+       <rect y="54" width="11" height="24"></rect>
+       <rect y="81" width="33" height="24"></rect>
+       ...
+   </svg>
+</body>
+
+
+ + diff --git a/html_base.html b/html_base.html new file mode 100644 index 0000000..6029e58 --- /dev/null +++ b/html_base.html @@ -0,0 +1,31 @@ + + + + + + + + + + +
+ 
+<html>
+    <head>   
+        <script type="text/javascript" 
+        src="http://mbostock.github.com/d3/d3.js">
+        </script>
+     </head>
+    <body>
+    <script>
+        d3.json(
+            "http://localhost:8000/data.json", 
+            function(data){...}
+        )
+    </script>
+    </body>
+</html>            
+
+
+ + diff --git a/index.html b/index.html index 1350c0d..d9c37f6 100644 --- 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 index d87477e..8663849 100644 --- 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 + ")";}); -}); - + + + + + + + + + egovis + + + + + +
+
+
+ 
+
+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 + ")";});
+});
+
+
+
+ +
+ + diff --git a/line.html b/line.html index e68dbe2..d5023f9 100644 --- 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)); @@ -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 index c8748e3..100a0a0 100644 --- 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; + } + ); } ); diff --git a/onmouseover.html b/onmouseover.html new file mode 100644 index 0000000..5698fad --- /dev/null +++ b/onmouseover.html @@ -0,0 +1,98 @@ + + + + + + + + + + + + +
+
+ 
+d3.selectAll("circle")
+    .on('mouseover', function(d){
+        svg.append('text')
+        .attr("x", time_scale( new Date(d.time)) + 5)
+        .attr("y", value_scale(d.yes_rsvp_count) + 5)
+        .text(d.name)
+        .attr('class','tip')
+    })
+    .on('mouseout', function(d){
+        d3.selectAll(".tip").remove()
+    })
+
+ + + + diff --git a/scale.html b/scale.html index abca659..835b4a0 100644 --- a/scale.html +++ b/scale.html @@ -17,14 +17,14 @@ new Date(d3.min(data, function(d){return d.time})), new Date(d3.max(data, function(d){return d.time})) ]) - .range([20,730]) + .range([30,730]) value_scale = d3.scale.linear() .domain([ 0, d3.max(data, function(d){return d.yes_rsvp_count;}) ]) - .range([350, 0]) + .range([280, 20])