D3.js in Action: Data visualization with JavaScript

386 Pages·2017·14.68 MB·English

by  Elijah Meeks

Elijah Meeks
Data visualization with JavaScript
SECOND EDITION
M A N N I N G
Praise for the First Edition
Quicklygetsyoucodingamazingvisualizations.
—NtinoKrampis,PhD
CityUniversityofNewYork
AremarkableexplorationoftheworldofdatavizpossibilitieswithD3.
—ArunNoronha
Directworks
OneofthemostcomprehensivebooksaboutdatavisualizationIhaveeverread.
—AndreaMostosi
TheFools.r.l.
ThisbookisrequiredreadingforanyonelookingtogetusingD3.Amandatory
introductiontoaverycomplexandpowerfullibrary.
—StephenWakely
ThomsonReuters
Excellentguidewhichhandholdsthereaderforfast-trackingD3.jsexpertiseeffectively.
—PrashanthBabu
NTTDATA
AremarkableexplorationintotheworldofdatavizpossibilitieswithD3.
—ArunNoronha
Directworks
Ifoundthisbooktobeinspiring!
—M.B.,Amazonreader
Amust-havebook.
—ArifShaikh
SonyPicturesEntertainment

D3.js in Action
Second Edition
DATA VISUALIZATION WITH JAVASCRIPT
ELIJAH MEEKS
MANNING
SHELTERISLAND
ForonlineinformationandorderingofthisandotherManningbooks,pleasevisit
www.manning.com.Thepublisheroffersdiscountsonthisbookwhenorderedinquantity.
Formoreinformation,pleasecontact
SpecialSalesDepartment
ManningPublicationsCo.
20BaldwinRoad
POBox761
ShelterIsland,NY11964
Email:[e-mail]
©2018byManningPublicationsCo.Allrightsreserved.
Nopartofthispublicationmaybereproduced,storedinaretrievalsystem,ortransmitted,in
anyformorbymeanselectronic,mechanical,photocopying,orotherwise,withoutpriorwritten
permissionofthepublisher.
Manyofthedesignationsusedbymanufacturersandsellerstodistinguishtheirproductsare
claimedastrademarks.Wherethosedesignationsappearinthebook,andManning
Publicationswasawareofatrademarkclaim,thedesignationshavebeenprintedininitialcaps
orallcaps.
Recognizingtheimportanceofpreservingwhathasbeenwritten,itisManning’spolicytohave
thebookswepublishprintedonacid-freepaper,andweexertourbesteffortstothatend.
Recognizingalsoourresponsibilitytoconservetheresourcesofourplanet,Manningbooks
areprintedonpaperthatisatleast15percentrecycledandprocessedwithouttheuseof
elementalchlorine.
ManningPublicationsCo. Developmenteditor: SusannaKline
20BaldwinRoad Technicaldevelopmenteditor: JamesWomack
POBox761 Projecteditors: KevinSullivanandJanetVail
ShelterIsland,NY11964 Copyeditor: KatiePetito
Proofreader: CorbinCollins
Technicalproofreader: JonBorgman
Typesetter: DottieMarsico
Coverdesigner: MarijaTudor
ISBN9781617294488
PrintedinCanada
1 2 3 4 5 6 7 8 9 10 – TC – 22 21 20 19 18 17
contents
preface xi
acknowledgments xiii
aboutthisbook xiv
aboutthecoverillustration xvii
PART 1 D3.JS FUNDAMENTALS....................................... 1
1 An introduction to D3.js 3
1.1 WhatisD3.js? 4
1.2 HowD3works 4
Datavisualizationismorethancharts 4 ■ D3isaboutselecting
andbinding 9 ■ D3isaboutderivingtheappearanceofwebpage
elementsfrombounddata 10 ■ Webpageelementscannowbe
divs,countries,andflowcharts 11
1.3 ThepowerofHTML5 11
TheDOM 12 ■ Codingintheconsole 16 ■ SVG 17
CSS 24 ■ JavaScript 28 ■ ES2015andNode 33
1.4 Datastandards 34
Tabulardata 34 ■ Nesteddata 35 ■ Networkdata 35
Geographicdata 36 ■ Rawdata 37 ■ Objects 37
1.5 InfovizstandardsexpressedinD3 38
v
1.6 YourfirstD3app 39
Helloworldwithdivs 40 ■ HelloWorldwithcircles 41
AconversationwithD3 42
1.7 Summary 44
WhylearnD3? 45
2 Information visualization data flow 47
2.1 Workingwithdata 48
Loadingdata 49 ■ Formattingdata 52 ■ Furthermodifying
data 54 ■ Measuringdata 59
2.2 Data-binding 60
Selectionsandbinding 60 ■ Accessingdatawithinline
functions 63 ■ Integratingscales 65
2.3 Datapresentationstyle,attributes,andcontent 68
Visualizationfromloadeddata 68 ■ Settingchannels 70
Enter,update,merge,andexit 72
2.4 Summary 77
3 Data-driven design and interaction 78
3.1 Projectarchitecture 79
Data 79 ■ Resources 80 ■ Images 80 ■ Stylesheets 80
Externallibraries 81
3.2 InteractivestyleandDOM 83
Events 83 ■ Graphicaltransitions 85 ■ DOM
manipulation 87 ■ Usingcolorwisely 90
3.3 Pregeneratedcontent 97
Images 97 ■ HTMLfragments 98 ■ PregeneratedSVG 100
3.4 Summary 106
3.5 D3.jsintherealworld 107
BocoupforMeasurementLab 107
4 Chart components 109
4.1 Generalchartingprinciples 110
Generators 111 ■ Components 111 ■ Layouts 112
4.2 Creatinganaxis 112
Plottingdata 112 ■ Stylingaxes 115
4.3 Complexgraphicalobjects 117
CONTENTS vii
4.4 Linechartsandinterpolations 126
Drawingalinefrompoints 127 ■ Drawingmanylineswith
multiplegenerators 130 ■ Exploringlineinterpolation 131
4.5 Complexaccessorfunctions 132
4.6 Usingthird-partyD3modulestocreatelegends 139
4.7 Summary 141
5 Layouts 143
5.1 Histograms 144
Drawingahistogram 144 ■ Interactivity 146 ■ Drawing
violinplots 147
5.2 Piecharts 149
Drawingthepielayout 150 ■ Creatingaringchart 151
Transitioning 152
5.3 Stacklayout 154
5.4 Pluginstoaddnewlayouts 158
Sankeydiagram 158 ■ Wordclouds 165
5.5 Summary 170
5.6 D3.jsintherealworld 171
AdamPearce ■ GraphicsEditor,NewYorkTimes 171
PART 2 COMPLEX DATA VISUALIZATION......................173
6 Hierarchical visualization 175
6.1 Hierarchicalpatterns 176
6.2 Workingwithhierarchicaldata 178
HierarchicalJSONandhierarchicalobjects 179
D3.nest 179 ■ D3.stratify 180
6.3 Packlayouts 180
Drawingthecirclepack 181 ■ Whentousecirclepacking 184
6.4 Trees 184
Drawingadendrogram 184 ■ Radialtreediagrams 190
d3.clustervsd3.tree 192 ■ Whentousedendrograms 192
6.5 Partition 192
Drawinganiciclechart 192 ■ Sunburst:radialiciclechart 194
Flamegraph 196 ■ Whentousethepartitionlayout 196
viii CONTENTS
6.6 Treemaps 197
Building 197 ■ Filtering 198 ■ Radialtreemap 200
Whentousetreemaps 200
6.7 Summary 201
6.8 D3.jsintherealworld 202
NadiehBremer ■ DataVisualizationConsultant 202
7 Network visualization 204
7.1 Staticnetworkdiagrams 205
Networkdata 206 ■ Adjacencymatrix 209
Arcdiagram 214
7.2 Force-directedlayout 218
Playingwithforces 219 ■ Creatingaforce-directednetwork
diagram 221 ■ SVGmarkers 223 ■ Networkmeasures 225
Forcelayoutsettings 227 ■ Updatingthenetwork 228
Removingandaddingnodesandlinks 231 ■ Manually
positioningnodes 235 ■ Optimization 236
7.3 Summary 237
7.4 D3.jsintherealworld 238
ShirleyWu ■ DataVisualizationConsultant 238
8 Geospatial information visualization 240
8.1 Basicmapmaking 242
Findingdata 243 ■ Drawingpointsonamap 248
Projectionsandareas 249 ■ Interactivity 251
8.2 Bettermapping 253
Graticule 253 ■ Zoom 253
8.3 Advancedmapping 257
Creatingandrotatingglobes 258 ■ Satelliteprojection 261
8.4 TopoJSONdataandfunctionality 262
TopoJSONthefileformat 262 ■ RenderingTopoJSON 262
Merging 264 ■ Neighbors 266
8.5 Furtherreadingforwebmapping 267
Tilemapping 267 ■ Transformzoom 267 ■ Canvas
drawing 268 ■ Rasterreprojection 268 ■ Hexbins 268
Voronoidiagrams 268 ■ Cartograms 268
CONTENTS ix
8.6 Summary 269
8.7 D3intherealworld 270
PhilippeRivière ■ journalist/programmer 270
PART 3 ADVANCED TECHNIQUES ................................273
9 Interactive applications with React and D3 275
9.1 Onedatasource,manyperspectives 276
9.2 GettingstartedwithReact 279
WhyReact,whynotX? 279 ■ react-create-app:settingup
yourapplication 280 ■ JSX 281
9.3 TraditionalD3renderingwithReact 282
9.4 Reactforelementcreation,D3asthevisualization
kernel 284
9.5 Datadashboardbasics 286
9.6 Dashboardupgrades 292
Responsiveness 293 ■ Legends 294 ■ Cross-highlighting 295
9.7 Brushing 298
Creatingthebrush 298 ■ Understandingbrushevents 304
9.8 Showmethenumbers 304
9.9 Summary 306
9.10 D3intherealworld 307
ElijahMeeks ■ SeniorDataVisualizationEngineer 307
10 Writing layouts and components 309
10.1 Creatingalayout 310
Designingyourlayout 310 ■ Implementingyourlayout 311
Testingyourlayout 312 ■ Extendingyourlayout 313
10.2 Writingyourowncomponents 318
10.3 Loadingsampledata 318
10.4 Linkingcomponentstoscales 321
10.5 Addingcomponentlabels 326
10.6 Summary 328
10.7 D3.jsintherealworld 329
SusieLu ■ SeniorDataVisualizationEngineer 329