Big Data with D3js

big-data-with-d3js.markdown

Big Data with D3js

A Pen by Codemash D3 Presentation on CodePen.

License.

index.html

<div class="reveal">
  <div class="slides">
    <section>
      <section>
        <H2>Bring your Big Data to life</H2>
        <H3>	using JavaScript and a browser using D3.js</H3>
        <br>
        <aside class="notes">Well, I guess we get to say "Welcome to Codemash"!!!... It's awesome to be here and get to hang out for 4 hours a talk about and play around with charting and the d3 framework today.</aside>         </section>
      
      <section>
        <H2>Goals for today</H2>        <aside class="notes">By the end of this session, we're going to create a fairly interactive chart of meteorite strikes across the history of the world, using the D3 javascript charting framework on data that's been map-reduced and sent to the browser. But along the way, we'll have a lot of simpler exercises to just kind of build our skills. This is a 101 level session, so we're going to start with basic, basic stuff before we build up to trying to create a dashboard type screen. We have about 10? or so sections to go through - kind of lightning-talk style with some demos, and exercises we'll break for along the way. I know I have about 6, and Doug probably has that many as well.</aside>  
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-478/Data%20Flow.png"/>
        <br/>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-478/Demo-ChloroplethW.JPG" width="40%;" height="40%;">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-478/Demo-d3-dashboard.JPG
" width="50%;" height="50%;"/>


      </section>
      <section>
        <H1>Dan Shultz</H1><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-478/dan.png" style="border:none"/>
        <h4>@dshultz</h4>
        <aside class="notes">Anyway, my name is Dan Shultz, and I am the web architect at a company called Clarivoy in Columbus - we are a startup, and I spend most of my day using Angular and D3 trying to help our clients make sense of their gigantic amounts of website traffic data.  I've also been coming to CodeMash since year 1...(could see same people over and over.) In fact (Silverlight 1.0 app)... but never been to a precompiler - started? year ?3?...</aside>
      </section>
      <section><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-478/Hopkins.png" style="border:none"/>
              <aside class="notes">I got my Bachelor of Fine Arts from the Ohio State University, a little before the dawn of the web... So I have a visual background..</aside>
      </section>
      <section><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-478/CompuServe.png" style="border:none"/>
        
        <h4>@dshultz</h4>
              <aside class="notes">...but I was lucky enough to land a job at CompuServe right around the time NetScape 1.0 was released... I and I've been able to consult and build web and mobile applications ever since... </aside></section>
      <section>
        <H1>Doug Mair</H1>
        <image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-478/00-dougmair.jpg"></image>
        <p>Email: doug.mair@gmail.com</p>
        <p>Twitter: doug_mair</>
      <aside class="notes">
        and I'm Doug Mair.  I am a Principal Consultant with Improving Enterprises.  Based in Columbus, OH.  Focusing primarily on MS tech and Web frameworks. 
      </aside>
      </section>
      <section>
        <image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-478/00-OSUphoto_19210.jpg"></image>
         <aside class="notes">
           I also went to OSU and got my Bachelors.  It was an exciting time, because everything was changing very fast.
        </aside>
      </section>
      <section>
        <image src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-478/00-prevjobs.jpg"></image>
        <aside class="notes">
          I got into programming because I loved games and wanted to make some.
Data Vis is next best thing to making games!!<br>
I've programmed on many different platforms.
        </aside>
      </section>

    <section>
      <H3>Give away from Improving and Clarivoy!!</H3>
      <br>
      <H3>Drop a card in the box.</H3>
      <H3>Must be present to win.</H3>
    </section>
    
      <section>
        <H3>CodePen</H3>
        <p>www.CodePen.io</p>
        <p>Setup an account if you<br/>
          want to save your changes</p>
        <table>
          <tr>
            <td>Presentation at:</td>
            <td><a href="http://codepen.io/team/Dan/pen/ec85afedf9a8369f4254df0684927aab/" target="_blank">http://codepen.io/team/Dan/pen/<br/> ec85afedf9a8369f4254df0684927aab</a></td>
          </tr>
          <tr>
            <td>Exercises Index at:</td>
            <td><a href="http://codepen.io/team/Dan/pen/GrRJoZ" target="_blank">http://codepen.io/team/Dan/pens</a></td>
          </tr>
        </table>
        <aside class="notes">
          Please create an account, if you want to save your changes.<br>
Open CodePen site.<br>
Show how to change view.<br>
Show exercise pen
        </aside>

      </section>
    </section>
    <section id="01-datascience">     
    </section>
    <section id="02-bigdata">
    </section>
    <section id="03-d3intro">
    </section>
    <section id="04-d3selectors">
    </section>
    <section id="05-htmlsvg" >      
    </section>
    <section id="06-d3support">
      <section>
        <H1>Break 30 minutes</H1>
        <H3>Questions</H3>
      </section>
    </section>
    <section id="07-crossfilter">
    </section>
    <section id="08-lifecycle">
    </section>
    <section id="09-transitions">
    </section>
    <section id="10-dcjs">
    </section>    
    <section id="11-otheruses">
    </section>
    <section id="12-maindemo">
    </section>
    <section>
      <H1>Questions</H1>
      <H3>Thank You!!
        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-478/notes.js"></script>
      </H3>      
        <h4>@doug_mair &#160; - &#160; @dshultz</h4>
    </section>
  </div>
</div>

script.js

// Reveal Init
Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,
        transition: 'slide',
        keyboard: {
          49: function() { Reveal.slide( 1 ) },
          50: function() { Reveal.slide( 2 ) },
          51: function() { Reveal.slide( 3 ) },
          52: function() { Reveal.slide( 4 ) },
          53: function() { Reveal.slide( 5 ) },
          54: function() { Reveal.slide( 6 ) },
          55: function() { Reveal.slide( 7 ) },
          56: function() { Reveal.slide( 8 ) },
          57: function() { Reveal.slide( 9 ) },
          48: function() { Reveal.slide( 10 ) },
          81: function() { Reveal.slide( 11 ) },
          87: function() { Reveal.slide( 12 ) },
          69: function() { Reveal.slide( 13 ) },
          82: function() { Reveal.slide( 14 ) },
        },
        math: {
            src: '//cdnjs.cloudflare.com/ajax/libs/mathjax/2.5.3/MathJax.js',
            config: 'TeX-AMS_HTML-full'
        },
        dependencies: [
            {
                src: '//cdnjs.cloudflare.com/ajax/libs/reveal.js/3.2.0/lib/js/classList.min.js',
                condition: function () {
                    return document.body.classList;
                }
            },
            {
                src: '//cdnjs.cloudflare.com/ajax/libs/reveal.js/3.2.0/plugin/zoom-js/zoom.min.js',
                async: true
            },
            {
                src: '//cdnjs.cloudflare.com/ajax/libs/reveal.js/3.2.0/plugin/highlight/highlight.min.js',
                async: true,
                callback: function () {
                    return hljs.initHighlightingOnLoad();
                }
            },
            {
                src: '//cdnjs.cloudflare.com/ajax/libs/reveal.js/3.2.0/plugin/math/math.min.js',
                async: true
            }
        ]
});
  var assetUrl="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-478/"
  $(document).ready(function(){
 getSection('05-htmlsvg');
 getSection('02-bigdata');
 getSection('01-datascience'); 
 getSection('03-d3intro');
 getSection('04-d3selectors');
 getSection('06-d3support');
 getSection('08-lifecycle'); 
 getSection('07-crossfilter'); 
 getSection('09-debugging');
 getSection('09-transitions');  
 getSection('12-unittesting');
 getSection('10-dcjs');
 getSection('11-otheruses');
 getSection('12-maindemo');
}
)

var getSection = function(sectionName){
$.ajax
({
    url: assetUrl + sectionName + ".html",
    type: "GET",
    cache: false,
    data: {},
    success: function (data) {        $('#' + sectionName).html(
      '<div id="footer">' +
        'CodeMash 2017 - ' +
         sectionName.substring(3) +
      '</div>' + 
      data
    );
    },
    error: function (e) {
        alert("failed to retrieve section " + sectionName + e.responseText);
    }
});
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/reveal.js/3.2.0/js/reveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/reveal.js/3.2.0/lib/js/head.min.js"></script>

style.css

h1, h3, h4 { text-transform: none !important; }
.full { text-align: justify; }
.left { text-align: left; } 

.reveal section img{ border: none; box-shadow:none;}
.reveal.slide.center, .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6{ color: #444444 !important; background-color:#fffbec;
  font-family:"Segoe UI Light";
}
 
.reveal #footer {
  position: absolute;
  top: 37em;
  left: -1.5em;
  font-size: .5em;
  font-weight: bold;
  color: #255b65;
}

.emphasis { 
  font-size: 125% !important; 
  font-weight: bold !important;
  color: blue !important;
}

styles

<link href="//cdnjs.cloudflare.com/ajax/libs/reveal.js/3.2.0/css/reveal.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/reveal.js/3.2.0/lib/css/zenburn.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/reveal.js/3.2.0/css/theme/white.min.css" rel="stylesheet" />