Big Data Introduction to D3

•

6 gostaram•8,254 visualizações

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.

Tecnologia

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

Mais conteúdo relacionado

Mais procurados

Alat dan bahan bab3Jholy Banjarnahor

제 17회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [6시내고양포CAT몬] : Cat Anti-aging Project based Style...BOAZ Bigdata

Team Kashpiers "Baja 2013"Mohit Mahaldar

Baja SAE India 2013Utsav Lall

群眾參與開源地圖到底行不行？我的OSM台灣社群經驗談Dennis Raylin Chen

Perhitungan rumah tinggal (beton1)Rojulil Fadli

Final project-of-exoskeleton-universiti-putra-malaysia-mechanical-studentMuhamad Nurizami Zolkefli

ManufacturingShiril Saju

CAD vs CAESisubalan Selvan

Virtual baja 2016 17355 alpha college of engg. and tech._presentation.pptIshan Mehta

Minimization of form errors in additive manufacturingNational Institute of Technology Warangal

Kuliah 7 rll simpang prioritasbangkit bayu

Rapidprototypingnavdeep6123

DETERMINATION OF HEAT TRANSFER COEFFICIENT OF BRAKE ROTOR DISC USING CFD SIMU...IAEME Publication

오픈소스GIS를 활용한 서버기반 공간분석과 시각화MinPa Lee

Modul 1-pengenalan-jembatan-bajaIrham AF I

Mais procurados (16)

Alat dan bahan bab3

제 17회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [6시내고양포CAT몬] : Cat Anti-aging Project based Style...

Team Kashpiers "Baja 2013"

Baja SAE India 2013

群眾參與開源地圖到底行不行？我的OSM台灣社群經驗談

Perhitungan rumah tinggal (beton1)

Final project-of-exoskeleton-universiti-putra-malaysia-mechanical-student

Manufacturing

CAD vs CAE

Virtual baja 2016 17355 alpha college of engg. and tech._presentation.ppt

Minimization of form errors in additive manufacturing

Kuliah 7 rll simpang prioritas

Rapidprototyping

DETERMINATION OF HEAT TRANSFER COEFFICIENT OF BRAKE ROTOR DISC USING CFD SIMU...

오픈소스GIS를 활용한 서버기반 공간분석과 시각화

Modul 1-pengenalan-jembatan-baja

Destaque

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

Destaque (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

Semelhante a 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

Semelhante a 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

Mais 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

Mais 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

Último

04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG

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

Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

Slack Application Development 101 Slidespraypatel2

Automating Google Workspace (GWS) & more with Apps Scriptwesley chun

2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong

Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge

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

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

Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer

🐬 The future of MySQL is Postgres 🐘RTylerCroy

Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer

A Domino Admins Adventures (Engage 2024)Gabriella Davis

The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los

Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies

08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls

08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls

[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745