Date post: | 01-Nov-2014 |
Category: |
Technology |
Upload: | analyticsweek |
View: | 169 times |
Download: | 1 times |
INTROTOD3withapplicationstobigdata
Feb2014
@samselikoffwww.samselikoff.com
WHYDATAVIS?CommunicationExploration
Appletodayannouncedfinancialresultsforitsfiscal2014firstquarterendedDecember28,2013.TheCompanypostedrecordquarterlyrevenueof$57.6billionandquarterlynetprofitof$13.1billion,or$14.50perdilutedshare.Theseresultscomparetorevenueof$54.5billionandnetprofitof$13.1billion,or$13.81perdilutedshare,intheyear-agoquarter.Grossmarginwas37.9percentcomparedto38.6
percentintheyear-agoquarter.Internationalsalesaccountedfor63percentofthequarter’srevenue.
Igetit,timesaregood!
WHAT'SD3?Data-DrivenDocuments
Hypotheticalbarsinadocument.Letssettheirheights:
WithJSvardata=[80,53,125,200,28,97];
varbars=document.getElementsByTagName("rect");for(vari=0;i<bars.length;i++){varbar=bars.item(i);bar.style.setProperty("height",data[i],null);}
WithD3d3.selectAll('rect').attr('height',function(d,i){returndata[i];});
D3ISNOT:DOMquerylibCompatibilitylayerChartinglibraryEasy!Proprietary3rd-partytech
HOWCAND3HELPUS?Lessconvenient,butmorepowerful
THEPATHTOLEARNExamplesPracticeReadingRepeat
Today,higher-levelconcepts
Whatwe'rebuilding
Initialdocument<html><body><scriptsrc="d3.v3.min.js"charset="utf-8"></script><script>//Ourcode</script></body></html>
Somedata
vardata=[80,53,125,200,28,97];
First,needaparent<svg>
d3.select('body').append('svg');
d3isglobalobject-think$fromjqueryLetsusselectelements-similartojqueryCanperformoperationsontheseselectionslike`append`,or`style`
d3.select('body').style('background-color','blue');
.appendactuallyreturnsanewselection
varsvg=d3.select('body').append('svg');
Workwithlocalvarsvgjustasifwehaddoned3.select('svg')
Let'smakethebars.Wecouldjust...
//Recall,vardata=[80,53,125,200,28,97];
svg.append('rect');svg.append('rect');svg.append('rect');svg.append('rect');svg.append('rect');svg.append('rect');
Butthisfallsshort
d3.selectAllwrapsarraysofelements
varparagraphs=d3.selectAll('p');
Sowhatareselections?
Understandingselectionsiskeytowritingd3code.
Selectionsenabledeclarativeprogramming
Imperativeparagraphs.forEach(function(p){p.style('background-color','green');});
Declarativeparagraphs.style('background-color','green');
Wecanalsoselectnoelements
<svg></svg>
varbars=d3.selectAll('rect');
Again,selectionsarehigherlevel
Inthiscase,`bars`doesn'trefertoanythingintheDOMButitdoesrepresentanarrayof<rect>elements
Selectionshavetwopieces
ThekeytoD3'spower!
Thedatajoin
varnums=[80,53,125,200,28,97];
varbars=svg.selectAll('rect').data(nums)
Ourrepresentationisnowexplicit
vardata=[80,53,125,200,28,97];
varbars=svg.selectAll('rect').data(data);
ButourDOMisempty
Thismeanstherearesix<rect>inourenterselection
bars.enter().append('rect');
Wheredoesthedataactuallylive?
TheDOM
Thisenablesselectionstobetransient
d3.selectAll('rect').data()
Data-driventransformations
Let'sfinishupthebarchart.
Whatnext?
Scales,axes,events,transitions...
https://github.com/mbostock/d3/wiki/Galleryhttps://github.com/mbostock/d3/wiki/TutorialsStackOverflowd3mailinglist(googlegroup)+IRC
Practice,inspect,examples
Cansomethingsolow-levelbeusefulforbigdata?
:filter250,000datapoints:hundredsofmetricsupdatinginreal-timeanalyticsanalyticsfinancialtools
Open-sourcetoolsbindingD3toR,PythonMuch,muchmore...
CrossfilterCubismNetflixSquareAddepar
THANKS!@samselikoff
www.samselikoff.com