Big Data Introduction to D3

•

1 like•506 views

Synopsis: D3.js is a Javascript library primarily used to create interactive data visualizations in the browser. Despite its growing popularity and warm community, getting started with D3 can be tricky. This talk covers the basics of D3 and sheds light on some of its main conceptual hurdles. It concludes by discussing some applications of D3 to big data. About the speaker: Sam Selikoff [ http://www.samselikoff.com/ | @samselikoff ] is a self-taught full-stack web developer. Formerly a graduate student of economics and finance, he unexpectedly discovered a passion for programming while doing data work for a consulting firm. He is currently focusing on client-side MVC and data visualization. Thanks to our Sponsors Microsoft [ http://microsoftnewengland.com ] for providing awesome venue for the event. Rovi [ http://rovi.com ] for providing the food/drinks. cognizeus [ http://cognizeus.com ] for hosting the event and providing books to give away as raffle.

Technology Art & Photos

INTRO TO D3
with applications to big data
Feb 2014
@samselikoff
www.samselikoff.com

Apple today announced financial results for its fiscal 2014 first
quarter ended December 28, 2013. The Company posted
record quarterly revenue of $57.6 billion and quarterly net
profit of $13.1 billion, or $14.50 per diluted share. These
results compare to revenue of $54.5 billion and net profit of
$13.1 billion, or $13.81 per diluted share, in the year-ago
quarter. Gross margin was 37.9 percent compared to 38.6
percent in the year-ago quarter. International sales accounted
for 63 percent of the quarter’s revenue.

Hypothetical bars in a document. Lets set their heights:
With JS
var data = [80, 53, 125, 200, 28, 97];
var bars = document.getElementsByTagName("rect");
for (var i = 0; i < bars.length; i++) {
var bar = bars.item(i);
bar.style.setProperty("height", data[i], null);
}
With D3
d3.selectAll('rect')
.attr('height', function(d, i) {return data[i];});

D3 IS NOT:
DOM query lib
Compatibility layer
Charting library
Easy!
Proprietary 3rd-party tech

HOW CAN D3 HELP US?
Less convenient, but more powerful

THE PATH TO LEARN
Examples
Practice
Reading
Repeat
Today, higher-level concepts

Initial document
<html>
<body>
<script src="d3.v3.min.js" charset="utf-8"></script>
<script>
// Our code
</script>
</body>
</html>
Some data
var data = [80, 53, 125, 200, 28, 97];

First, need a parent <svg>
d3.select('body').append('svg');
d3 is global object - think $ from jquery
Lets us select elements - similar to jquery
Can perform operations on these selections
like `append`, or `style`
d3.select('body').style('background-color', 'blue');

.append actually returns a new selection
var svg = d3.select('body').append('svg');
Work with local var svg
just as if we had done d3.select('svg')

Let's make the bars. We could just...
// Recall, var data = [80, 53, 125, 200, 28, 97];
svg.append('rect');
svg.append('rect');
svg.append('rect');
svg.append('rect');
svg.append('rect');
svg.append('rect');
But this falls short

d3.selectAll wraps arrays of elements
var paragraphs = d3.selectAll('p');
So what are selections?
Understanding selections is key to writing d3 code.

Selections enable declarative programming
Imperative
paragraphs.forEach(function(p) {
p.style('background-color', 'green');
});
Declarative
paragraphs.style('background-color', 'green');

We can also select no elements
<svg>
</svg>
var bars = d3.selectAll('rect');
Again, selections are higher level
In this case, `bars` doesn't refer to anything in the DOM
But it does represent an array of <rect> elements

Selections have two pieces
The key to D3's power!

The data join
var nums = [80, 53, 125, 200, 28, 97];
var bars = svg.selectAll('rect')
.data(nums)
Our representation is now explicit

var data = [80, 53, 125, 200, 28, 97];
var bars = svg.selectAll('rect')
.data(data);
But our DOM is empty
This means there are six <rect> in our enter selection
bars.enter()
.append('rect');

Where does the data actually live?
The DOM
This enables selections to be transient
d3.selectAll('rect').data()

Data-driven transformations
Let's finish up the bar chart.

What next?
Scales, axes, events, transitions...
https://github.com/mbostock/d3/wiki/Gallery
https://github.com/mbostock/d3/wiki/Tutorials
StackOverflow
d3 mailing list (google group) + IRC
Practice, inspect, examples

Can something so low-level be useful for big data?
: filter 250,000 data points
: hundreds of metrics updating in real-time
analytics
analytics
financial tools
Open-source tools binding D3 to R, Python
Much, much more...
Crossfilter
Cubism
Netflix
Square
Addepar

THANKS!
@samselikoff
www.samselikoff.com

Similar to Big Data Introduction to D3

Visualizing data with d3Punit Jajodia

Running head APPLE1APPLE 13Financial Analysis of .docxjoellemurphey

November 11th brief MSFT stock overviewLouis_Louis

Sheet1Company Selection and Stock WatchNo.DateStock NameStock Symb.docxlesleyryder69361

Y&L Data Insight ChallengeChristopher Shepard

The Street Ratings newsletterFreddy Campos

Investor Overview - March 2014investorsyume

Singapore #StartupStackStripe

3d Systems (DDD)_updated for Q32013Brian Christopher

Business intelligence: A tool that could help your businessBeyond Intelligence

Running head FINANCIAL MANAGEMENT DISCUSSION QUESTIONS .docxwlynn1

IT Consulting - M&A SummaryAlps Venture Partners

5:11SWKTECH

Online Intelligence- POLDavid Barak

FIN526 -Personal TWTR Analyst ReportMike Allen

NetSuite Q4 & FY2013 UpdateCuriousRubik

AWS #3 Storage Vendor in 2018, #1 in 2020IT Brand Pulse

John DeereOther Financial Information 2006 3rdfinance11

RingCentral (RNG) Equity ReportMike Zimmer

Increasing Sales Productivity Through Innovative TechnologyIrina Zvagelsky, MBA

Similar to Big Data Introduction to D3 (20)

Visualizing data with d3

Running head APPLE1APPLE 13Financial Analysis of .docx

November 11th brief MSFT stock overview

Sheet1Company Selection and Stock WatchNo.DateStock NameStock Symb.docx

Y&L Data Insight Challenge

The Street Ratings newsletter

Investor Overview - March 2014

Singapore #StartupStack

3d Systems (DDD)_updated for Q32013

Business intelligence: A tool that could help your business

Running head FINANCIAL MANAGEMENT DISCUSSION QUESTIONS .docx

IT Consulting - M&A Summary

5:11

Online Intelligence- POL

FIN526 -Personal TWTR Analyst Report

NetSuite Q4 & FY2013 Update

AWS #3 Storage Vendor in 2018, #1 in 2020

John DeereOther Financial Information 2006 3rd

RingCentral (RNG) Equity Report

Increasing Sales Productivity Through Innovative Technology

Recently uploaded

Understanding the Laravel MVC ArchitecturePixlogix Infotech

Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada

Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55

Presentation on how to chat with PDF using ChatGPT code interpreternaman860154

Next-generation AAM aircraft unveiled by Supernal, S-A2Hyundai Motor Group

Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited

Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK

The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad

Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your BudgetEnjoy Anytime

Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software

Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxnull - The Open Security Community

My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar

#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada

Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent

Snow Chain-Integrated Tire for a Safe Drive on Winter RoadsHyundai Motor Group

Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst

Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j

08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls

Recently uploaded (20)

Understanding the Laravel MVC Architecture

Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024

Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...

Presentation on how to chat with PDF using ChatGPT code interpreter

Next-generation AAM aircraft unveiled by Supernal, S-A2

Injustice - Developers Among Us (SciFiDevCon 2024)

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365

Unblocking The Main Thread Solving ANRs and Frozen Frames

The Codex of Business Writing Software for Real-World Solutions 2.pptx

Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget

Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation

Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx

My Hashitalk Indonesia April 2024 Presentation

#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024

Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...

Snow Chain-Integrated Tire for a Safe Drive on Winter Roads

Human Factors of XR: Using Human Factors to Design XR Systems

Maximizing Board Effectiveness 2024 Webinar.pptx

Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...

08448380779 Call Girls In Civil Lines Women Seeking Men