Visual Storytelling with D3

Transcription

1 Visual Storytelling with D3 An Introduction to Data Visualization in JavaScript Ritchie S. King TT ArAddison-Wesley Upper Saddle River, NJ Boston Indianapolis San Francisco New York Toronto Montreal London Munich Paris Madrid Capetown Sydney Tokyo Singapore Mexico City

2 Contents Foreword Preface I Mi xl xiil Acknowledgments xvii About the Author xix Visual Storytelling and D3 Visualization, Visualized I 1 Charts Give Data a Form That Form Tells a Story Quality: It Is All about Content Design: It Is All about Form Visual Storytelling Enter D3 Things You Designers Will Love about D3 Things You Coders Will Love about D3 Things for Which You Should Not Use D3 Notes on Using D Tools You Will Need Finding a Data-Driven Story and Telling It Visually 11 Getting Started 11 Is the World Getting Older? 12 Finding and Inspecting Data 13 Honing the Concept Choosing a Form 15 1 Showing the Data as a Column Chart 1 Showing the Data as a Stacked Column Chart Showing the Data as a Line Chart 20 Showing the Data as a Pie Chart 22 Showing the Data as a Bar Chart 23 Showing the Data as a Small Multiple Bar Chart 25 Chart Suggestions A Thought Starter The Example We Will Build in This Book

3 1 U Ü jeiftasoi iiv M SuiMnj S1U9LU9I3 Maw Buipudddv luawubissv 3 qeuba pue SUJBMO SI uieuo e jo pp!w am ui suofloaias MSN Suiieajo M, ' : W spoiija^ Sujuieiio oaiieieioaa sq o; SÖAUIS 0 i sainy ajäjs pue sasseo A ddy o; () J t n e ujsn ZL OJL Oi S> JOM ( ) J ^ e «O H sajnquwv s,uoj;oa as e f u 3ueqo saiqeuba oi suoipaias SUJUSJSSV suo;;oa as jamo W04 suofloajas f UUBSJO suoii03 as aieajq oj sjoioaias SSO 3uisn 99 9 suojpaias SM^eiAj CO Ht!«d f i i a s 3u!»»9 suo^oeias Q «WIM ssgbd qam Sujdeiis frg TS it SUOflBUIJOjSUB.ll sdnojo pus japjo 3ujMejQ Sf trfr saj^iadojd a^oj^s Xouajedsueji pub JO OQ *fr saiviadojd aiäis 9AS Tfr 0* Ofr I p /Oeuiiuns 3AS "! ^BMO Jeg e BuiPlfng fr SE fr Wi OAS SMJBJ saun suo3a 0d E sesdiih saiaiio saisubpay papunoy IS S9 3upay It sadbljs JatiiO SSO mi** SJU9UJ9I3 9AS Suil^JS iopadsui qa/v\ am Uj QAS fujjoadsut 2 9AS w. sa DJjo IIJIM SwAey T T T i^tpexb 'QAS S }BU.M POOH 3MI J3pun f u^aay somdejq io)09a aiqeieo$ S}ua;uoo ill A

4 Contents Selecting Multiple Elements with d3.selectall() 0 Building a Bar Chart with Selections Use Variables Do Math Use Better Variables 95 Use a Variable for your Data 9 Make Your Constraints Explicit Use Loops Data-Joins: Enter 105 What Are Data-Joins? 105 A Conceptual Overview of Data-Joins: Enter Enter and Binding Data Using a Data-Join to Make a Bar Chart 111 Using Anonymous Functions to Access Bound Data 115 Finishing the Rest of the Chart Storing Data in Objects Sizing Charts and Adding Axes Linear Scales Using Smart Margin Conventions Adding Axes 135 Ordinal Scales and Axes Loading and Filtering External Data 15 Building a Graphic that Uses All of the Population Distribution Data 15 Data Formats You Can Use with D3 15 Creating a Server to Upload Your Data Initiating a Server on the Command Line Creating an Index File D3's Functions for Loading Data Callback Functions How D3 Interprets CSV Tables Dealing with Asynchronous Requests Creating a Bar Chart with External Data 1 ix

5 SS2 H S 3 X9pu BJBO uoi)nqjj}sia uos»b ndod ai ) 3u ueaio g III f l 2 2 a 22 tozz 22 3u 33nqaa sdoon.iog pue siuawajeis 31 LZZ suojjounj pue spoqiaiaj spafqo pue säejjv S9!J sf- pue cln^ieiai ui ;duoseaer 3UJJUM 022 sadaj. e\ea pue 'saiqeuea 'ifteiaj Ojseg T2 3 osuoo iduoseaep s.-iasmojg jnoa TZ TZ JSM9 "! JduoseAer SJauinSag JOj ^duosbabf TZ 2.T2 v Ajeujujns Buipoo ag SÄBMIV STZ vprnsun lag oj MOH 0 Buiujean JOJ uo^epunoj e s >ioog still ST2 9T2 UMO JnoA uo»no S u i w i s T2 OT Ajeujiuns IOZ aouanbas Aeid am jdnjjaiui 0} jasri su.1 3utMO iv froz uojjng Aey ai l Su^eiM 9 ed am en uoung Aey B 3u;ppv uojpury e u aseu.d aiepdn am BinddeJM uo»ng Xeid e 3u ppv T 9T TT sueno Buiiepdn ujop B}9a B 3u sn suonng 3UI>IB AJ LLT suonng aajiobjajui x l! 3 Pue aiepdfl :suiof-eiea paieiumv pue &M\oeia\u\ s^ieio 3ui> e Ai g^t LX TAT sxa» Buisn qe>13!io suonng ai j BU^BIAJ XT LLT Ajeoioins suouisueji Suippv 0T 1ST AjBiuiuns jama3oi nv J 3u nnd 19S eiea (J)33JBI e Suuaiiy pue Sinpecn sjuajuoo