diff --git a/public/people/kw/bok-slack/css/main.css b/public/people/kw/bok-slack/css/main.css
index 0c223e3..7107a6a 100644
--- a/public/people/kw/bok-slack/css/main.css
+++ b/public/people/kw/bok-slack/css/main.css
@@ -37,6 +37,11 @@ html {
   text-shadow: none;
 }
 
+::selection_3 {
+  background: #b3d4fc;
+  text-shadow: none;
+}
+
 /*
  * A better looking default horizontal rule
  */
@@ -138,7 +143,6 @@ textarea {
   white-space: inherit;
   width: auto;
 }
-
 /*
  * Hide visually and from screen readers, but maintain layout
  */
@@ -300,11 +304,10 @@ body {
   stroke: #000;
 }
 
-.tooltip-date, .tooltip-likes {
+.tooltip-date, .tooltip-messages {
   font-weight: bold;
 }
 
-
 .line {
   fill: none;
   stroke: steelblue;
@@ -315,3 +318,56 @@ body {
   fill: none;
   pointer-events: all;
 }
+
+.line_3 {
+  fill: none;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+.zoom_3 {
+  cursor: move;
+  fill: none;
+  pointer-events: all;
+}
+
+.axis_3 path,
+.axis_3 line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.x.axis_3 path {
+  display: none;
+}
+
+.line_3 {
+  fill: none;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+
+.overlay_3 {
+  fill: none;
+  pointer-events: all;
+}
+
+.focus_3 circle {
+  fill: steelblue;
+}
+
+.focus_3 text {
+  font-size: 10px;
+}
+
+.tooltip_3 {
+  fill: white;
+  stroke: #000;
+}
+
+.tooltip-date_3, .tooltip-messages_3 {
+  font-weight: bold;
+}
+
+
+
diff --git a/public/people/kw/bok-slack/doc/html.md b/public/people/kw/bok-slack/doc/html.md
index 629fe0e..e7fd4d4 100644
--- a/public/people/kw/bok-slack/doc/html.md
+++ b/public/people/kw/bok-slack/doc/html.md
@@ -168,8 +168,7 @@ it before the other scripts in the bottom of the page:
     <script src="js/vendor/modernizr-3.10.0.min.js"></script>
     <script src="https://polyfill.io/v3/polyfill.min.js"></script>
     <script src="js/plugins.js"></script>
-    <script src="js/basic-tooltip-brushzoom.js"></script>
-
+    <script src="js/linegraph-tooltip-brush.js"></script>
 </body>
 ```
 
diff --git a/public/people/kw/bok-slack/doc/js.md b/public/people/kw/bok-slack/doc/js.md
index 9e92d38..ce12526 100644
--- a/public/people/kw/bok-slack/doc/js.md
+++ b/public/people/kw/bok-slack/doc/js.md
@@ -5,7 +5,7 @@ table of contents](TOC.md)
 
 Information about the default JavaScript included in the project.
 
-## basic-tooltip-brushzoom.js
+## linegraph-tooltip-brush.js
 
 This file can be used to contain or reference your site/app JavaScript code. If
 you're working on something more advanced you might replace this file entirely.
diff --git a/public/people/kw/bok-slack/doc/usage.md b/public/people/kw/bok-slack/doc/usage.md
index abeda8e..b6ed315 100644
--- a/public/people/kw/bok-slack/doc/usage.md
+++ b/public/people/kw/bok-slack/doc/usage.md
@@ -35,7 +35,7 @@ A basic HTML5 Boilerplate site initially looks something like this:
 ├── doc
 ├── img
 ├── js
-│   ├── basic-tooltip-brushzoom.js
+│   ├── linegraph-tooltip-brush.js
 │   ├── plugins.js
 │   └── vendor
 │       └── modernizr.min.js
diff --git a/public/people/kw/bok-slack/index.html b/public/people/kw/bok-slack/index.html
index fc0d9d1..b1c338a 100644
--- a/public/people/kw/bok-slack/index.html
+++ b/public/people/kw/bok-slack/index.html
@@ -8,7 +8,7 @@
 <!--  <meta name="viewport" content="width=device-width, initial-scale=1">-->
   <!-- Place favicon.ico in the root directory -->
 
-  <link rel="stylesheet" href="css/normalize.css">
+<!--  <link rel="stylesheet" href="css/normalize.css">-->
   <link rel="stylesheet" href="css/main.css">
 
   <meta name="theme-color" content="#fafafa">
@@ -18,9 +18,9 @@
 
   <!-- Add your site or application content here -->
 <!--  <p>Hello world! This is HTML5 Boilerplate.</p>-->
-
 <!--  <div id="my_dataviz"></div>-->
   <div id="v2"></div>
+  <div id="v3"></div>
 
 <!--  <script src="js/vendor/modernizr-3.11.2.min.js"></script>-->
 <!--  <script src="js/plugins.js"></script>-->
@@ -28,11 +28,10 @@
   <script src="https://d3js.org/d3.v4.js"></script>
   <script src="https://d3js.org/d3-time.v1.min.js"></script>
   <script src="https://d3js.org/d3-time-format.v2.min.js"></script>
-<!--  <script src="js/basic-tooltip-brushzoom.js"></script>-->
+<!--  <script src="js/linegraph-tooltip-brush.js"></script>-->
   <script src="js/version2-brushzoom-timeline.js"></script>
+  <script src="js/version3.js"></script>
 
-
-  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
 </body>
 
 </html>
diff --git a/public/people/kw/bok-slack/js/basic-tooltip-brushzoom.js b/public/people/kw/bok-slack/js/basic-tooltip-brushzoom.js
index d498503..1c50422 100644
--- a/public/people/kw/bok-slack/js/basic-tooltip-brushzoom.js
+++ b/public/people/kw/bok-slack/js/basic-tooltip-brushzoom.js
@@ -32,28 +32,28 @@ d3.csv("data/bokcenter-slack.csv", function(data) {
     // console.log(data.Date)
     // Now I can use this dataset:
 
-        // console.log(data)
-        // Add X axis --> it is a date format
-        var x = d3.scaleTime()
-            .domain(d3.extent(data, function(d) {
-                // console.log(d.Date);
-                return (d.Date); }))
-            .range([ 0, width ]);
-        var xAxis = svg1.append("g")
-            .attr("transform", "translate(0," + height + ")")
-            .call(d3.axisBottom(x)
-                .tickFormat(dateFormatter));
-
-        // Add Y axis
-        var y = d3.scaleLinear()
-            .domain([0, d3.max(data, function(d) {
-                // console.log(+d["Messages posted"]);
-                return +d["Messages posted"];
-                // return 40000;
-            })])
-            .range([ height, 0 ]);
-        var yAxis = svg1.append("g")
-            .call(d3.axisLeft(y));
+    // console.log(data)
+    // Add X axis --> it is a date format
+    var x = d3.scaleTime()
+        .domain(d3.extent(data, function(d) {
+            // console.log(d.Date);
+            return (d.Date); }))
+        .range([ 0, width ]);
+    var xAxis = svg1.append("g")
+        .attr("transform", "translate(0," + height + ")")
+        .call(d3.axisBottom(x)
+            .tickFormat(dateFormatter));
+
+    // Add Y axis
+    var y = d3.scaleLinear()
+        .domain([0, d3.max(data, function(d) {
+            // console.log(+d["Messages posted"]);
+            return +d["Messages posted"];
+            // return 40000;
+        })])
+        .range([ height, 0 ]);
+    var yAxis = svg1.append("g")
+        .call(d3.axisLeft(y));
 
     // Add the line
     svg1.append("path")
@@ -70,8 +70,97 @@ d3.csv("data/bokcenter-slack.csv", function(data) {
                 return y(d["Messages posted"]) })
         );
 
+
+
+    //Brushing
+
+    // Add a clipPath: everything out of this area won't be drawn.
+    var clip = svg1.append("defs").append("svg1:clipPath")
+        .attr("id", "clip")
+        .append("svg1:rect")
+        .attr("width", width )
+        .attr("height", height )
+        .attr("x", 0)
+        .attr("y", 0);
+
+    // Add brushing
+    var brush = d3.brushX()                   // Add the brush feature using the d3.brush function
+        .extent( [ [0,0], [width,height] ] )  // initialise the brush area: start at 0,0 and finishes at width,height: it means I select the whole graph area
+        .on("end", updateChart)               // Each time the brush selection changes, trigger the 'updateChart' function
+
+    // Create the line variable: where both the line and the brush take place
+    var line = svg1.append('g')
+        .attr("clip-path", "url(#clip)")
+
+    // Add the line
+    line.append("path")
+        .datum(data)
+        .attr("class", "line")  // I add the class line to be able to modify this line later on.
+        .attr("fill", "none")
+        .attr("stroke", "steelblue")
+        .attr("stroke-width", 1.5)
+        .attr("d", d3.line()
+            .x(function(d) {
+                // console.log((d.Date));
+                return x(d.Date) })
+            .y(function(d) {
+                // console.log(d["Messages posted"]);
+                return y(d["Messages posted"]) })
+        );
+
+    // Add the brushing
+    line
+        .append("g")
+        .attr("class", "brush")
+        .call(brush);
+
+    // A function that set idleTimeOut to null
+    var idleTimeout
+    function idled() { idleTimeout = null; }
+
+    // A function that update the chart for given boundaries
+    function updateChart() {
+
+        // What are the selected boundaries?
+        extent = d3.event.selection
+
+        // If no selection, back to initial coordinate. Otherwise, update X axis domain
+        if(!extent){
+            if (!idleTimeout) return idleTimeout = setTimeout(idled, 350); // This allows to wait a little bit
+            x.domain([ 4,8])
+        }else{
+            x.domain([ x.invert(extent[0]), x.invert(extent[1]) ])
+            line.select(".brush").call(brush.move, null) // This remove the grey brush area as soon as the selection has been done
+        }
+
+        // Update axis and line position
+        xAxis.transition().duration(1000).call(d3.axisBottom(x).tickFormat(dateFormatter))
+        line
+            .select('.line')
+            .transition()
+            .duration(1000)
+            .attr("d", d3.line()
+                .x(function(d) { return x(d.Date) })
+                .y(function(d) { return y(d["Messages posted"]) })
+            );
+    }
+
+    // If user double click, reinitialize the chart
+    svg1.on("dblclick",function(){
+        x.domain(d3.extent(data, function(d) { return d.Date; }))
+        xAxis.transition().call(d3.axisBottom(x).tickFormat(dateFormatter))
+        line
+            .select('.line')
+            .transition()
+            .attr("d", d3.line()
+                .x(function(d) { return x(d.Date) })
+                .y(function(d) { return y(d["Messages posted"]) })
+            )
+    });
+
     //Tooltip
 
+    //New svg grouping to formulate the tooltip on
     var focus = svg1.append("g")
         .attr("class", "focus")
         .style("display", "none");
@@ -96,11 +185,11 @@ d3.csv("data/bokcenter-slack.csv", function(data) {
     focus.append("text")
         .attr("x", 18)
         .attr("y", 18)
-        .text("Likes:");
+        .text("Messages:");
 
     focus.append("text")
         .attr("class", "tooltip-messages")
-        .attr("x", 60)
+        .attr("x", 70)
         .attr("y", 18);
 
     svg1.append("rect")
@@ -121,90 +210,4 @@ d3.csv("data/bokcenter-slack.csv", function(data) {
         focus.select(".tooltip-date").text(dateFormatter(d.Date));
         focus.select(".tooltip-messages").text(d["Messages posted"]);
     }
-
-    //Brushing
-
-    // Add a clipPath: everything out of this area won't be drawn.
-    // var clip = svg1.append("defs").append("svg1:clipPath")
-    //     .attr("id", "clip")
-    //     .append("svg1:rect")
-    //     .attr("width", width )
-    //     .attr("height", height )
-    //     .attr("x", 0)
-    //     .attr("y", 0);
-    //
-    // // Add brushing
-    // var brush = d3.brushX()                   // Add the brush feature using the d3.brush function
-    //     .extent( [ [0,0], [width,height] ] )  // initialise the brush area: start at 0,0 and finishes at width,height: it means I select the whole graph area
-    //     .on("end", updateChart)               // Each time the brush selection changes, trigger the 'updateChart' function
-    //
-    // // Create the line variable: where both the line and the brush take place
-    // var line = svg1.append('g')
-    //     .attr("clip-path", "url(#clip)")
-    //
-    // // Add the line
-    // line.append("path")
-    //     .datum(data)
-    //     .attr("class", "line")  // I add the class line to be able to modify this line later on.
-    //     .attr("fill", "none")
-    //     .attr("stroke", "steelblue")
-    //     .attr("stroke-width", 1.5)
-    //     .attr("d", d3.line()
-    //         .x(function(d) {
-    //             // console.log((d.Date));
-    //             return x(d.Date) })
-    //         .y(function(d) {
-    //             // console.log(d["Messages posted"]);
-    //             return y(d["Messages posted"]) })
-    //     );
-    //
-    // // Add the brushing
-    // line
-    //     .append("g")
-    //     .attr("class", "brush")
-    //     .call(brush);
-    //
-    // // A function that set idleTimeOut to null
-    // var idleTimeout
-    // function idled() { idleTimeout = null; }
-    //
-    // // A function that update the chart for given boundaries
-    // function updateChart() {
-    //
-    //     // What are the selected boundaries?
-    //     extent = d3.event.selection
-    //
-    //     // If no selection, back to initial coordinate. Otherwise, update X axis domain
-    //     if(!extent){
-    //         if (!idleTimeout) return idleTimeout = setTimeout(idled, 350); // This allows to wait a little bit
-    //         x.domain([ 4,8])
-    //     }else{
-    //         x.domain([ x.invert(extent[0]), x.invert(extent[1]) ])
-    //         line.select(".brush").call(brush.move, null) // This remove the grey brush area as soon as the selection has been done
-    //     }
-    //
-    //     // Update axis and line position
-    //     xAxis.transition().duration(1000).call(d3.axisBottom(x).tickFormat(dateFormatter))
-    //     line
-    //         .select('.line')
-    //         .transition()
-    //         .duration(1000)
-    //         .attr("d", d3.line()
-    //             .x(function(d) { return x(d.Date) })
-    //             .y(function(d) { return y(d["Messages posted"]) })
-    //         );
-    // }
-    //
-    // // If user double click, reinitialize the chart
-    // svg1.on("dblclick",function(){
-    //     x.domain(d3.extent(data, function(d) { return d.Date; }))
-    //     xAxis.transition().call(d3.axisBottom(x).tickFormat(dateFormatter))
-    //     line
-    //         .select('.line')
-    //         .transition()
-    //         .attr("d", d3.line()
-    //             .x(function(d) { return x(d.Date) })
-    //             .y(function(d) { return y(d["Messages posted"]) })
-    //         )
-    // });
 });
diff --git a/public/people/kw/bok-slack/js/version2-brushzoom-timeline.js b/public/people/kw/bok-slack/js/version2-brushzoom-timeline.js
index 32f35de..882e781 100644
--- a/public/people/kw/bok-slack/js/version2-brushzoom-timeline.js
+++ b/public/people/kw/bok-slack/js/version2-brushzoom-timeline.js
@@ -112,60 +112,6 @@ d3.csv("data/bokcenter-slack.csv", type, function (error, data) {
 
     console.log(data);
 
-
-    // //Tooltip
-    // var bisectDate = d3.bisector(function(d) { return d.Date; }).left;
-    //
-    // var focus2 = svg2.append("g")
-    //     .attr("class", "focus")
-    //     .style("display", "none");
-    //
-    // focus2.append("circle")
-    //     .attr("r", 5);
-    //
-    // focus2.append("rect")
-    //     .attr("class", "tooltip")
-    //     .attr("width", 100)
-    //     .attr("height", 50)
-    //     .attr("x", 10)
-    //     .attr("y", -22)
-    //     .attr("rx", 4)
-    //     .attr("ry", 4);
-    //
-    // focus2.append("text")
-    //     .attr("class", "tooltip-date")
-    //     .attr("x", 18)
-    //     .attr("y", -2);
-    //
-    // focus2.append("text")
-    //     .attr("x", 18)
-    //     .attr("y", 18)
-    //     .text("Messages: ");
-    //
-    // focus2.append("text")
-    //     .attr("class", "tooltip-messages")
-    //     .attr("x", 70)
-    //     .attr("y", 18);
-    //
-    // svg2.append("rect")
-    //     .attr("class", "overlay")
-    //     .attr("width", width)
-    //     .attr("height", height)
-    //     .on("mouseover", function() { focus2.style("display", null); })
-    //     .on("mouseout", function() { focus2.style("display", "none"); })
-    //     .on("mousemove", mousemove);
-    //
-    // function mousemove() {
-    //     var x0 = x.invert(d3.mouse(this)[0]),
-    //         i = bisectDate(data, x0, 1),
-    //         d0 = data[i - 1],
-    //         d1 = data[i],
-    //         d = x0 - d0.date > d1.date - x0 ? d1 : d0;
-    //     focus2.attr("transform", "translate(" + x(d.Date) + "," + y(d["Messages posted"]) + ")");
-    //     focus2.select(".tooltip-date").text(dateFormatter(d.Date));
-    //     focus2.select(".tooltip-messages").text(d["Messages posted"]);
-    // }
-
     //Tooltip
     var bisectDate = d3.bisector(function(d) { return d.Date; }).left;
 
@@ -226,7 +172,6 @@ d3.csv("data/bokcenter-slack.csv", type, function (error, data) {
         focus2.select(".tooltip-messages").text(d["Messages posted"]);
     }
 
-
 });
 
 function brushed() {
@@ -238,6 +183,14 @@ function brushed() {
     svg2.select(".zoom").call(zoom.transform, d3.zoomIdentity
         .scale(width / (s[1] - s[0]))
         .translate(-s[0], 0));
+
+    var s = d3.event.selection || x_3_2.range();
+    x_3.domain(s.map(x_3_2.invert, x_3_2));
+    Line_chart_3.select(".line_3").attr("d", line_3);
+    focus_3.select(".axis--x_3").call(xAxis_3);
+    svg_3.select(".zoom_3").call(zoom_3.transform, d3.zoomIdentity
+        .scale(width_3 / (s[1] - s[0]))
+        .translate(-s[0], 0));
 }
 
 function zoomed() {
@@ -247,6 +200,12 @@ function zoomed() {
     Line_chart.select(".line").attr("d", line);
     focus.select(".axis--x").call(xAxis);
     context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
+
+    var t = d3.event.transform;
+    x_3.domain(t.rescaleX(x_3_2).domain());
+    Line_chart_3.select(".line_3").attr("d", line_3);
+    focus_3.select(".axis--x_3").call(xAxis_3);
+    context_3.select(".brush_3").call(brush_3.move, x_3.range().map(t.invertX, t));
 }
 
 function type(d) {
diff --git a/public/people/kw/bok-slack/js/version3.js b/public/people/kw/bok-slack/js/version3.js
new file mode 100644
index 0000000..8d06e3a
--- /dev/null
+++ b/public/people/kw/bok-slack/js/version3.js
@@ -0,0 +1,204 @@
+var svg_3 = d3.select("#v3")
+    .append("svg")
+    .attr("width", 960)
+    .attr("height", 500);
+
+var margin_3 = {top_3: 20, right_3: 20, bottom_3: 110, left_3: 40},
+    margin_3_2 = {top_3: 430, right_3: 20, bottom_3: 30, left_3: 40},
+    width_3 = 960 - margin_3.left_3 - margin_3.right_3,
+    height_3 = 500 - margin_3.top_3 - margin_3.bottom_3,
+    height_3_2 = 500 - margin_3_2.top_3 - margin_3_2.bottom_3;
+
+
+var parseDate = d3.timeParse("%Y-%m-%d");
+var dateFormatter = d3.timeFormat("%m/%d/%y");
+
+var x_3 = d3.scaleTime().range([0, width_3]),
+    x_3_2 = d3.scaleTime().range([0, width_3]),
+    y_3 = d3.scaleLinear().range([height_3, 0]),
+    y_3_2 = d3.scaleLinear().range([height_3_2, 0]);
+
+var xAxis_3 = d3.axisBottom(x_3).tickFormat(dateFormatter),
+    xAxis_3_2 = d3.axisBottom(x_3_2).tickFormat(dateFormatter),
+    yAxis_3 = d3.axisLeft(y_3);
+
+var brush_3 = d3.brushX()
+    .extent([[0, 0], [width_3, height_3_2]])
+    .on("brush end", brushed_3);
+
+var zoom_3 = d3.zoom()
+    .scaleExtent([1, Infinity])
+    .translateExtent([[0, 0], [width_3, height_3]])
+    .extent([[0, 0], [width_3, height_3]])
+    .on("zoom", zoomed_3);
+
+var line_3 = d3.line()
+    .x(function (d) { return x_3(d.Date); })
+    .y(function (d) { return y_3(d["Messages posted"]); });
+
+var line_3_2 = d3.line()
+    .x(function (d) { return x_3_2(d.Date); })
+    .y(function (d) { return y_3_2(d["Messages posted"]); });
+
+var clip_3 = svg_3.append("defs_3").append("svg_3:clipPath_3")
+    .attr("id", "clip_3")
+    .append("svg_3:rect")
+    .attr("transform", "translate(" + margin_3.left_3 + "," + margin_3.top_3 + ")")
+    .attr("width", width_3)
+    .attr("height", height_3)
+    .attr("x", 0)
+    .attr("y", 0);
+
+
+var Line_chart_3 = svg_3.append("g")
+    .attr("class", "focus_3")
+    .attr("transform", "translate(" + margin_3.left_3 + "," + margin_3.top_3 + ")")
+    .attr("clip-path", "url(#clip)");
+
+
+var focus_3 = svg_3.append("g")
+    .attr("class", "focus_3")
+    .attr("transform", "translate(" + margin_3.left_3 + "," + margin_3.top_3 + ")");
+
+var context_3 = svg_3.append("g")
+    .attr("class", "context_3")
+    .attr("transform", "translate(" + margin_3_2.left_3 + "," + margin_3_2.top_3 + ")");
+
+d3.csv("data/bokcenter-slack.csv", type, function (error, data_3) {
+    if (error) throw error;
+
+    x_3.domain(d3.extent(data_3, function(d) { return d.Date; }));
+    y_3.domain([0, d3.max(data_3, function (d) { return d["Messages posted"]; })]);
+    x_3_2.domain(x_3.domain());
+    y_3_2.domain(y_3.domain());
+
+
+    focus_3.append("g")
+        .attr("class", "axis_3 axis--x_3")
+        .attr("transform", "translate(0," + height_3 + ")")
+        .call(xAxis_3);
+
+    focus_3.append("g")
+        .attr("class", "axis_3 axis--y_3")
+        .call(yAxis_3);
+
+    Line_chart_3.append("path")
+        .datum(data_3)
+        .attr("class", "line_3")
+        .attr("d", line_3);
+
+    context_3.append("path")
+        .datum(data_3)
+        .attr("class", "line_3")
+        .attr("d", line_3_2);
+
+
+    context_3.append("g")
+        .attr("class", "axis_3 axis--x_3")
+        .attr("transform", "translate(0," + height_3_2 + ")")
+        .call(xAxis_3_2);
+
+    context_3.append("g")
+        .attr("class", "brush_3")
+        .call(brush_3)
+        .call(brush_3.move, x_3.range());
+
+    svg_3.append("rect")
+        .attr("class", "zoom_3")
+        .attr("width", width_3)
+        .attr("height", height_3)
+        .attr("transform", "translate(" + margin_3.left_3 + "," + margin_3.top_3 + ")")
+        .call(zoom_3);
+
+
+    console.log(data_3);
+
+    //Tooltip
+    var bisectDate = d3.bisector(function(d) { return d.Date; }).left;
+
+    focus_3_2 = svg_3.append("g")
+        .attr("class", "focus_3_2")
+        .attr("transform", "translate(" + margin_3.left_3 + "," + margin_3.top_3 + ")")
+        .style("display", "none");
+
+    focus_3_2.append("circle")
+        .attr("transform", "translate(" + margin_3.left_3 + "," + margin_3.top_3 + ")")
+        .attr("r", 3);
+
+    focus_3_2.append("rect")
+        .attr("class", "tooltip_3")
+        .attr("width", 100)
+        .attr("height", 50)
+        .attr("transform", "translate(" + margin_3.left_3 + "," + margin_3.top_3 + ")")
+        .attr("x", 10)
+        .attr("y", -22)
+        .attr("rx", 4)
+        .attr("ry", 4);
+
+    focus_3_2.append("text")
+        .attr("class", "tooltip-date_3")
+        .attr("transform", "translate(" + margin_3.left_3 + "," + margin_3.top_3 + ")")
+        .attr("x", 18)
+        .attr("y", -2);
+
+    focus_3_2.append("text")
+        .attr("transform", "translate(" + margin_3.left_3 + "," + margin_3.top_3 + ")")
+        .attr("x", 18)
+        .attr("y", 18)
+        .text("Messages: ");
+
+    focus_3_2.append("text")
+        .attr("transform", "translate(" + margin_3.left_3 + "," + margin_3.top_3 + ")")
+        .attr("class", "tooltip-messages_3")
+        .attr("x", 70)
+        .attr("y", 18);
+
+    svg_3.append("rect")
+        .attr("class", "overlay_3")
+        .attr("width", width_3)
+        .attr("height", height_3)
+        .attr("transform", "translate(" + margin_3.left_3 + "," + margin_3.top_3 + ")")
+        .on("mouseover", function() { focus_3_2.style("display", null); })
+        .on("mouseout", function() { focus_3_2.style("display", "none"); })
+        .on("mousemove", mousemove_3);
+
+    function mousemove_3() {
+        var x0 = x_3.invert(d3.mouse(this)[0]),
+            i = bisectDate(data_3, x0, 1),
+            d0 = data_3[i - 1],
+            d1 = data_3[i],
+            d = x0 - d0.date > d1.date - x0 ? d1 : d0;
+        focus_3_2.attr("transform", "translate(" + x_3(d.Date) + "," + y_3(d["Messages posted"]) + ")");
+        focus_3_2.select(".tooltip-date_3").text(dateFormatter(d.Date));
+        focus_3_2.select(".tooltip-messages_3").text(d["Messages posted"]);
+    }
+
+});
+
+function brushed_3() {
+    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
+    var s = d3.event.selection || x_3_2.range();
+    x_3.domain(s.map(x_3_2.invert, x_3_2));
+    Line_chart_3.select(".line_3").attr("d", line_3);
+    focus_3.select(".axis--x_3").call(xAxis_3);
+    svg_3.select(".zoom_3").call(zoom_3.transform, d3.zoomIdentity
+        .scale(width_3 / (s[1] - s[0]))
+        .translate(-s[0], 0));
+}
+
+function zoomed_3() {
+    if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
+    var t = d3.event.transform;
+    x_3.domain(t.rescaleX(x_3_2).domain());
+    Line_chart_3.select(".line_3").attr("d", line_3);
+    focus_3.select(".axis--x_3").call(xAxis_3);
+    context_3.select(".brush_3").call(brush_3.move, x_3.range().map(t.invertX, t));
+}
+
+function type(d) {
+    d.Date = parseDate(d.Date);
+    d["Messages posted"] = +d["Messages posted"];
+    return d;
+}
+
+
diff --git a/public/people/kw/bok-slack/tutorial/css/main.css b/public/people/kw/bok-slack/tutorial/css/main.css
new file mode 100644
index 0000000..7107a6a
--- /dev/null
+++ b/public/people/kw/bok-slack/tutorial/css/main.css
@@ -0,0 +1,373 @@
+/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
+
+/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+   Base styles: opinionated defaults
+   ========================================================================== */
+
+html {
+  color: #222;
+  font-size: 1em;
+  line-height: 1.4;
+}
+
+/*
+ * Remove text-shadow in selection highlight:
+ * https://twitter.com/miketaylr/status/12228805301
+ *
+ * Vendor-prefixed and regular ::selection selectors cannot be combined:
+ * https://stackoverflow.com/a/16982510/7133471
+ *
+ * Customize the background color to match your design.
+ */
+
+::-moz-selection {
+  background: #b3d4fc;
+  text-shadow: none;
+}
+
+::selection {
+  background: #b3d4fc;
+  text-shadow: none;
+}
+
+::selection_3 {
+  background: #b3d4fc;
+  text-shadow: none;
+}
+
+/*
+ * A better looking default horizontal rule
+ */
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 1em 0;
+  padding: 0;
+}
+
+/*
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+/*
+ * Remove default fieldset styles.
+ */
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+
+textarea {
+  resize: vertical;
+}
+
+/* ==========================================================================
+   Author's custom styles
+   ========================================================================== */
+
+/* ==========================================================================
+   Helper classes
+   ========================================================================== */
+
+/*
+ * Hide visually and from screen readers
+ */
+
+.hidden,
+[hidden] {
+  display: none !important;
+}
+
+/*
+ * Hide only visually, but have it available for screen readers:
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ *
+ * 1. For long content, line feeds are not interpreted as spaces and small width
+ *    causes content to wrap 1 word per line:
+ *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ */
+
+.sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+  /* 1 */
+}
+
+/*
+ * Extends the .sr-only class to allow the element
+ * to be focusable when navigated to via the keyboard:
+ * https://www.drupal.org/node/897638
+ */
+
+.sr-only.focusable:active,
+.sr-only.focusable:focus {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  white-space: inherit;
+  width: auto;
+}
+/*
+ * Hide visually and from screen readers, but maintain layout
+ */
+
+.invisible {
+  visibility: hidden;
+}
+
+/*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    `contenteditable` attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+
+.clearfix::before,
+.clearfix::after {
+  content: " ";
+  display: table;
+}
+
+.clearfix::after {
+  clear: both;
+}
+
+/* ==========================================================================
+   EXAMPLE Media Queries for Responsive Design.
+   These examples override the primary ('mobile first') styles.
+   Modify as content requires.
+   ========================================================================== */
+
+@media only screen and (min-width: 35em) {
+  /* Style adjustments for viewports that meet the condition */
+}
+
+@media print,
+  (-webkit-min-device-pixel-ratio: 1.25),
+  (min-resolution: 1.25dppx),
+  (min-resolution: 120dpi) {
+  /* Style adjustments for high resolution devices */
+}
+
+/* ==========================================================================
+   Print styles.
+   Inlined to avoid the additional HTTP request:
+   https://www.phpied.com/delay-loading-your-print-css/
+   ========================================================================== */
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    background: #fff !important;
+    color: #000 !important;
+    /* Black prints faster */
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+  }
+
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+
+  /*
+   * Don't show links that are fragment identifiers,
+   * or use the `javascript:` pseudo protocol
+   */
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  /*
+   * Printing Tables:
+   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
+   */
+  thead {
+    display: table-header-group;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}
+
+body {
+  font: 10px "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.x.axis path {
+  display: none;
+}
+
+.line {
+  fill: none;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+
+.overlay {
+  fill: none;
+  pointer-events: all;
+}
+
+.focus circle {
+  fill: steelblue;
+}
+
+.focus text {
+  font-size: 10px;
+}
+
+.tooltip {
+  fill: white;
+  stroke: #000;
+}
+
+.tooltip-date, .tooltip-messages {
+  font-weight: bold;
+}
+
+.line {
+  fill: none;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+.zoom {
+  cursor: move;
+  fill: none;
+  pointer-events: all;
+}
+
+.line_3 {
+  fill: none;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+.zoom_3 {
+  cursor: move;
+  fill: none;
+  pointer-events: all;
+}
+
+.axis_3 path,
+.axis_3 line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.x.axis_3 path {
+  display: none;
+}
+
+.line_3 {
+  fill: none;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+
+.overlay_3 {
+  fill: none;
+  pointer-events: all;
+}
+
+.focus_3 circle {
+  fill: steelblue;
+}
+
+.focus_3 text {
+  font-size: 10px;
+}
+
+.tooltip_3 {
+  fill: white;
+  stroke: #000;
+}
+
+.tooltip-date_3, .tooltip-messages_3 {
+  font-weight: bold;
+}
+
+
+
diff --git a/public/people/kw/bok-slack/tutorial/css/normalize.css b/public/people/kw/bok-slack/tutorial/css/normalize.css
new file mode 100644
index 0000000..192eb9c
--- /dev/null
+++ b/public/people/kw/bok-slack/tutorial/css/normalize.css
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/public/people/kw/bok-slack/tutorial/index.html b/public/people/kw/bok-slack/tutorial/index.html
new file mode 100644
index 0000000..cea9999
--- /dev/null
+++ b/public/people/kw/bok-slack/tutorial/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <title></title>
+
+    <link rel="stylesheet" href="css/main.css">
+
+</head>
+
+<body>
+
+<!--Add div with id so you can select it in your js code later and add the visualization elements.-->
+<div id="my_dataviz"></div>
+
+<!--Import d3 and time formatting libraries.-->
+<script src="https://d3js.org/d3.v4.min.js"></script>
+<script src="https://d3js.org/d3.v4.js"></script>
+<script src="https://d3js.org/d3-time.v1.min.js"></script>
+<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
+
+<!--Now add your own js files after all external libraries.-->
+<script src="js/linegraph-tooltip-brush.js"></script>
+
+</body>
+
+</html>