Embed Size (px)
DESCRIPTION
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.
Citation preview
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
