Data Viz in D3

👩🏾

Divya Sasidharan

Developer & Data connoisseur @ NU Knight Lab

Tools/Resources

https://bl.ocks.org/

https://codepen.io/

https://d3js.org/

https://developer.mozilla.org/en-US/

What is D3?

Data

Driven

Documents

Data-driven

Data

Elements

🚌

📈

🏗️

The "Data"

var dataset1 = [ 5, 10, 15, 20, 25 ];

var dataset2 = {
  [1/31/80,1],
  [2/29/80,3],
  [3/31/80,2],
  [4/30/80,3],
  [5/30/80,2]
}

var dataset3 = [
  [1/31/80,1],
  [2/29/80,3],
  [3/31/80,2],
  [4/30/80,3],
  [5/30/80,2]
]

The "Document"

Document Object Model

<html>
  <head>
    <title>Some text here</title>
  </head>
  <body>
    <h1>My Chart</h1>
    <div class="chart">  
      //chart goes here//
    </div>
  </body>
</html>

index.html

Styling 

<html>
  <head>
    <title>Some text here</title>
  </head>
  <style>
    body { background: steelblue; }
  </style>
  <body>
    <h1>My Chart</h1>
    <div class="chart">  
      //chart goes here//
    </div>
  </body>
</html>

💅

body {
  background: steelblue;
}

index.html

main.css

<html>
  <head>
    <title>Some text here</title>
  </head>
  <link href="main.css"></link>
  <body>
    <h1>My Chart</h1>
    <div class="chart">  
      //chart goes here//
    </div>
  </body>
</html>

index.html

Interaction

<html>
  <head>
    <title>Some text here</title>
  </head>
  <script>
    body.onclick = function() {
      var body = document.querySelector("body"); 
      body.style.backgroundColor = 'red';
    }
  </script>
  <body>
    <h1>My Chart</h1>
    <div class="chart">  
      //chart goes here//
    </div>
  </body>
</html>

🏋️‍♀️

body.onclick = function() {
  var body = document.querySelector("body"); 
  body.style.backgroundColor = 'red';
}

index.html

main.js

<html>
  <head>
    <title>Some text here</title>
  </head>
  <script src="main.js"></script>
  <body>
    <h1>My Chart</h1>
    <div class="chart">  
      //chart goes here//
    </div>
  </body>
</html>

index.html

The Box Model

Padding

Border

Margin

http://shoutkey.com/discreet 

Made with Slides.com