Big Data Introduction to D3

•

6 j'aime•8,254 vues

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.

Technologie

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?
Crossfilter: filter 250,000 data points
Cubism: hundreds of metrics updating in real-time
Netflix analytics
Square analytics
Addepar financial tools
Open-source tools binding D3 to R, Python
Much, much more...

THANKS!
@samselikoff
www.samselikoff.com

Recommandé

PHP CRUD Database MysqlYusuf A.H.

MonotaROの基幹システムがこの先生きのこるには 2015.03.20 DevLOVE関西事業会社の現場を知ろう～モノタロウ編～株式会社MonotaRO Tech Team

Інформаційні системи в управлінні персоналомgenia94

【de:code 2020】リモートワーク中でも社員の働き方を可視化！ Workplace Analytics の概要日本マイクロソフト株式会社

Estrutura de dados - Variáveis homogêneas e HeterogêneasAdriano Teixeira de Souza

tmn - Introdução ao JavaScriptClaudio Gamboa

IT初心者の事務員さんに SharePoint を教えてみた～SharePoint ユーザー教育の事例として～Kosuke Kuromiya

プロダクトマネージャーはフレームワークを作れToshifumi Sakamoto

Recommandé

PHP CRUD Database MysqlYusuf A.H.

MonotaROの基幹システムがこの先生きのこるには 2015.03.20 DevLOVE関西事業会社の現場を知ろう～モノタロウ編～株式会社MonotaRO Tech Team

Інформаційні системи в управлінні персоналомgenia94

【de:code 2020】リモートワーク中でも社員の働き方を可視化！ Workplace Analytics の概要日本マイクロソフト株式会社

Estrutura de dados - Variáveis homogêneas e HeterogêneasAdriano Teixeira de Souza

tmn - Introdução ao JavaScriptClaudio Gamboa

IT初心者の事務員さんに SharePoint を教えてみた～SharePoint ユーザー教育の事例として～Kosuke Kuromiya

プロダクトマネージャーはフレームワークを作れToshifumi Sakamoto

Dasar pemrograman web HTMLBambang Herlandi

Proposal Sistem informasi administrasi berbasis desktopdnasty3

IoT Market in CanadaNikhil Mittal

データがない？あるある！！そこら中にあるんだぞ！～Web から取得できるデータの可能性～Yugo Shimizu

ファイルサーバーを SharePoint に移行するためのアプローチ日本マイクロソフト株式会社

Steps involved in Data Conversion Services - PPTEminenture

Segurança da Informação Aplicada a NegóciosCarlos Henrique Martins da Silva

Ppt html5rizki pradana

Toko online erd dan analisis sistem informasi penjualan berbasis web - mode...brisma pambudi

Packet switching dan routingmunir09

Linguagem PHPguest9c455546

データウェアハウスモデリング入門（ダイジェスト版）（事前公開版） Satoshi Nagayasu

「Redmine」、「Trac」から「Atlassian JIRA」への移行紹介ricksoftKK

Sistem Pakar Certainty factor Adi Ginanjar Kusuma

Aula 3 - Lógica de ProgramaçãoInstituto CENTEC

Struktur Data TreeSiti Khotijah

POO - 03 - Alocação de Memória em JavaLudimila Monjardim Casagrande

For Power BI BeginnersTomoyuki Oota

GoLang_1Dimas Prawira

35歳でDBAになった私がデータベースを壊して学んだことShinnosuke Akita

D3.js workshopAnton Katunin

A short introduction of D3jsdreampuf

Contenu connexe

Tendances

Dasar pemrograman web HTMLBambang Herlandi

Proposal Sistem informasi administrasi berbasis desktopdnasty3

IoT Market in CanadaNikhil Mittal

データがない？あるある！！そこら中にあるんだぞ！～Web から取得できるデータの可能性～Yugo Shimizu

ファイルサーバーを SharePoint に移行するためのアプローチ日本マイクロソフト株式会社

Steps involved in Data Conversion Services - PPTEminenture

Segurança da Informação Aplicada a NegóciosCarlos Henrique Martins da Silva

Ppt html5rizki pradana

Toko online erd dan analisis sistem informasi penjualan berbasis web - mode...brisma pambudi

Packet switching dan routingmunir09

Linguagem PHPguest9c455546

データウェアハウスモデリング入門（ダイジェスト版）（事前公開版） Satoshi Nagayasu

「Redmine」、「Trac」から「Atlassian JIRA」への移行紹介ricksoftKK

Sistem Pakar Certainty factor Adi Ginanjar Kusuma

Aula 3 - Lógica de ProgramaçãoInstituto CENTEC

Struktur Data TreeSiti Khotijah

POO - 03 - Alocação de Memória em JavaLudimila Monjardim Casagrande

For Power BI BeginnersTomoyuki Oota

GoLang_1Dimas Prawira

35歳でDBAになった私がデータベースを壊して学んだことShinnosuke Akita

Tendances (20)

Dasar pemrograman web HTML

Proposal Sistem informasi administrasi berbasis desktop

IoT Market in Canada

データがない？あるある！！そこら中にあるんだぞ！～Web から取得できるデータの可能性～

ファイルサーバーを SharePoint に移行するためのアプローチ

Steps involved in Data Conversion Services - PPT

Segurança da Informação Aplicada a Negócios

Ppt html5

Toko online erd dan analisis sistem informasi penjualan berbasis web - mode...

Packet switching dan routing

Linguagem PHP

データウェアハウスモデリング入門（ダイジェスト版）（事前公開版）

「Redmine」、「Trac」から「Atlassian JIRA」への移行紹介

Sistem Pakar Certainty factor

Aula 3 - Lógica de Programação

Struktur Data Tree

POO - 03 - Alocação de Memória em Java

For Power BI Beginners

GoLang_1

35歳でDBAになった私がデータベースを壊して学んだこと

En vedette

D3.js workshopAnton Katunin

A short introduction of D3jsdreampuf

Introduction to D3.jsCurran Kelleher

Stochastic Optimization: Solvers and ToolsSSA KPI

Introduction to data visualisations with d3.js — Data Driven DocumentsMichał Oniszczuk

D3 data visualizationKeenan Holloway

D3 jsYnon Perek

Linkedin Series B Pitch Deck August 2004Vishal Kumar

Uber Pitch DeckVishal Kumar

Product Brochure: Adyen Company Profile 2015: Online Payment ServicesyStats.com

Agile Data Warehouse Design for Big Data PresentationVishal Kumar

Adyen - NOAH15 BerlinNOAH Advisors

Big Data has Big Implications for Customer Experience ManagementVishal Kumar

Improving the customer experience using big data customer-centric measurement...Vishal Kumar

Customer Experience Management for StartupsVishal Kumar

A Partnership with Adyen is Equal to Exponential Growth: 17 Payments Experts ...Marcos Ortiz Valmaseda

Bobhayestcebigdatawebinar03272013 130417142258-phpapp01Vishal Kumar

Adyen mobile payment - Mobile First event Mobylizr

Airbnb Pitch DeckVishal Kumar

Sample Report: Adyen Company Profile 2015: Online Payment ServicesyStats.com

En vedette (20)

D3.js workshop

A short introduction of D3js

Introduction to D3.js

Stochastic Optimization: Solvers and Tools

Introduction to data visualisations with d3.js — Data Driven Documents

D3 data visualization

D3 js

Linkedin Series B Pitch Deck August 2004

Uber Pitch Deck

Product Brochure: Adyen Company Profile 2015: Online Payment Services

Agile Data Warehouse Design for Big Data Presentation

Adyen - NOAH15 Berlin

Big Data has Big Implications for Customer Experience Management

Improving the customer experience using big data customer-centric measurement...

Customer Experience Management for Startups

A Partnership with Adyen is Equal to Exponential Growth: 17 Payments Experts ...

Bobhayestcebigdatawebinar03272013 130417142258-phpapp01

Adyen mobile payment - Mobile First event

Airbnb Pitch Deck

Sample Report: Adyen Company Profile 2015: Online Payment Services

Similaire à 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

Similaire à 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

Plus de Vishal Kumar

Zenefits Sales DeckVishal Kumar

Reddit Sales DeckVishal Kumar

Zuora Sales DeckVishal Kumar

Talentbin Sales DeckVishal Kumar

Future datascientist0714Vishal Kumar

Here is a gift that keeps on giving in 2018 & beyond!Vishal Kumar

Make Money with Big Data (TCELab)Vishal Kumar

Total Customer Experience Management Overview #TCE #CEM -- The Why, What and HowVishal Kumar

Square Pitch DeckVishal Kumar

Global wireless network operator and mobile satisfaction / customer loyalty s...Vishal Kumar

Dropbox: Building Business Through Lean Startup PrinciplesVishal Kumar

Sample letter of intentVishal Kumar

Yammer Pitch DeckVishal Kumar

The Bootstrap Bible by Seth GodinVishal Kumar

Tce lab crdi half page handout summer 2012Vishal Kumar

Plus de Vishal Kumar (15)

Zenefits Sales Deck

Reddit Sales Deck

Zuora Sales Deck

Talentbin Sales Deck

Future datascientist0714

Here is a gift that keeps on giving in 2018 & beyond!

Make Money with Big Data (TCELab)

Total Customer Experience Management Overview #TCE #CEM -- The Why, What and How

Square Pitch Deck

Global wireless network operator and mobile satisfaction / customer loyalty s...

Dropbox: Building Business Through Lean Startup Principles

Sample letter of intent

Yammer Pitch Deck

The Bootstrap Bible by Seth Godin

Tce lab crdi half page handout summer 2012

Dernier

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

08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls

Install Stable Diffusion in windows machinePadma Pradeep

Salesforce Community Group Quito, Salesforce 101Paola De la Torre

Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski

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

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal

Slack Application Development 101 Slidespraypatel2

How to convert PDF to text with Nanonetsnaman860154

08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls

Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik

Key Features Of Token Development (1).pptxLBM Solutions

Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC

Scaling API-first – The story of a global engineering organizationRadu Cotescu

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106

My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar

Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK

Dernier (20)

Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation

08448380779 Call Girls In Diplomatic Enclave Women Seeking Men

Install Stable Diffusion in windows machine

Salesforce Community Group Quito, Salesforce 101

Integration and Automation in Practice: CI/CD in Mule Integration and Automat...

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

08448380779 Call Girls In Civil Lines Women Seeking Men

Handwritten Text Recognition for manuscripts and early printed texts

Enhancing Worker Digital Experience: A Hands-on Workshop for Partners

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service

Slack Application Development 101 Slides

How to convert PDF to text with Nanonets

08448380779 Call Girls In Greater Kailash - I Women Seeking Men

Injustice - Developers Among Us (SciFiDevCon 2024)

Key Features Of Token Development (1).pptx

Breaking the Kubernetes Kill Chain: Host Path Mount

Scaling API-first – The story of a global engineering organization

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics

My Hashitalk Indonesia April 2024 Presentation

Unblocking The Main Thread Solving ANRs and Frozen Frames

Big Data Introduction to D3

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

2. WHY DATA VIS? Communication Exploration

3. 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.

4. I get it, times are good!

7. WHAT'S D3? Data-Driven Documents

8. 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];});

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

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

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

12. What we're building

13. 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];

14. 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');

15. .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')

16. 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

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

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

19. 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

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

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

22.

23. 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');

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

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

26. 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

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

28. THANKS! @samselikoff www.samselikoff.com