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
Data Viz in D3
By shortdiv
