D3 Start To Finish Learn How To Make A Custom

Data Visualisation Using D3js Peter Cook

download

https://ebookbell.com/product/d3-start-to-finish-learn-how-to-
make-a-custom-data-visualisation-using-d3js-peter-cook-49173816

Explore and download more ebooks at ebookbell.com

Here are some recommended products that we believe you will be
interested in. You can click the link to download.

D3 Start To Finish Peter Cook

https://ebookbell.com/product/d3-start-to-finish-peter-cook-47829716

D3js Quick Start Guide Create Amazing Interactive Visualizations In

The Browser With Javascript 1st Edition Matthew Huntington

https://ebookbell.com/product/d3js-quick-start-guide-create-amazing-
interactive-visualizations-in-the-browser-with-javascript-1st-edition-
matthew-huntington-23429602

D3js Quick Start Guide Create Amazing Interactive Visualizations In

The Browser With Javascript Matthew Huntington

https://ebookbell.com/product/d3js-quick-start-guide-create-amazing-
interactive-visualizations-in-the-browser-with-javascript-matthew-
huntington-46386940

D3js Quick Start Guide 1st Edition Matthew Huntington

https://ebookbell.com/product/d3js-quick-start-guide-1st-edition-
matthew-huntington-54743570
D3 Wines Of The World An Accompaniment To The Wset Level 4 Diploma In
Wines 13 Wine Spirit Education Trust

https://ebookbell.com/product/d3-wines-of-the-world-an-accompaniment-
to-the-wset-level-4-diploma-in-wines-13-wine-spirit-education-
trust-46653334

D3js In Action Third Edition Meap V14 3rd All 15 Chapters Elijah Meeks

https://ebookbell.com/product/d3js-in-action-third-edition-
meap-v14-3rd-all-15-chapters-elijah-meeks-50687340

D3js By Example 1st Edition Michael Heydt

https://ebookbell.com/product/d3js-by-example-1st-edition-michael-
heydt-51569288

D3 Datadriven Documents Pocket Primer Papdvdr Campesato Oswald

https://ebookbell.com/product/d3-datadriven-documents-pocket-primer-
papdvdr-campesato-oswald-55921416

D3 Wines Of The World An Accompaniment To The Wset Level 4 Diploma In

Wines August 2021 Wine Spirit Education Trust

https://ebookbell.com/product/d3-wines-of-the-world-an-accompaniment-
to-the-wset-level-4-diploma-in-wines-august-2021-wine-spirit-
education-trust-36428948
D3 Start to Finish
Learn how to make a custom data visualisation
using D3.js.

Peter Cook
This book is for sale at http://leanpub.com/d3-start-to-finish

This version was published on 2022-10-17

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean
Publishing process. Lean Publishing is the act of publishing an in-progress ebook using
lightweight tools and many iterations to get reader feedback, pivot until you have the
right book and build traction once you do.

© 2022 Peter Cook

Tweet This Book!
Please help Peter Cook by spreading the word about this book on Twitter!
The suggested hashtag for this book is #d3starttofinish.
Find out what other people are saying about the book by clicking on this link to search
for this hashtag on Twitter:
#d3starttofinish
Contents

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1 Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 What you’ll learn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 What you’ll build . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 Code download . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5 Where to get help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.6 Stay in touch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.7 Translators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2. Energy Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.1 Technical overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2 Overview of the Energy Explorer build . . . . . . . . . . . . . . . . . . . 8

3. Practical: Setting Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.1 What you need . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.2 Get set up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.3 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4. Introduction to D3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.1 Joining data with D3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.2 D3 modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.3 D3 versions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

5. Requesting Data with D3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

5.1 d3.csv . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.2 d3.tsv . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.3 d3.dsv . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.4 d3.json . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.5 CSV, TSV or JSON? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.6 Static resources and APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

6. Practical: Load the Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

CONTENTS

6.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.2 Inspect the data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.3 Include JavaScript files in index.html . . . . . . . . . . . . . . . . . . . . 32
6.4 Request data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
6.5 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

7. D3 Selections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
7.1 Creating a selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
7.2 Updating a selection’s elements . . . . . . . . . . . . . . . . . . . . . . . 38
7.3 Multiple updates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
7.4 Chained selections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

8. Data Joins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
8.1 Creating a data join . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
8.2 Updating the joined elements . . . . . . . . . . . . . . . . . . . . . . . . . 49
8.3 Joining arrays of objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

9. Practical: Draw the Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

9.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
9.2 Add a container for the circles . . . . . . . . . . . . . . . . . . . . . . . . 61
9.3 Join the data array to circle elements . . . . . . . . . . . . . . . . . . . . 62
9.4 Save and refresh . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

10. Scale Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

10.1 scaleLinear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
10.2 scaleSqrt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
10.3 Putting scale functions to use . . . . . . . . . . . . . . . . . . . . . . . . . 68

11. Practical: Size the Circles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

11.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
11.2 Convert indicator values from strings into numbers . . . . . . . . . . . . 70
11.3 Create a sqrtScale function and set the circle radii . . . . . . . . . . . . . 72

12. Architecture for Web-based Data Visualisation . . . . . . . . . . . . . . . . . 75

12.1 Layout functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
12.2 Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

13. Practical: Add Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

13.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
13.2 Add new modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
13.3 Add a layout function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
13.4 Move update code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
CONTENTS

13.5 Use layout function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

13.6 Save and refresh . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

14. Arranging Items in a Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

15. Practical: Arrange the Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

15.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
15.2 Add configuration object . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
15.3 Modify layout function . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
15.4 Save and refresh . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
15.5 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

16. The Build So Far . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

17. More on D3 Selections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

17.1 More selection methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
17.2 Update functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
17.3 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

18. More on D3 Joins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

18.1 Joining an array to groups of elements . . . . . . . . . . . . . . . . . . . 108
18.2 Nested joins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

19. Practical: Add Labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

19.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
19.2 Add label information to layout.js . . . . . . . . . . . . . . . . . . . . . . 122
19.3 Modify update function to join data to <g> elements . . . . . . . . . . . 123
19.4 Center the labels using CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 125
19.5 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

20. Practical: Add More Circles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

20.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
20.2 Add properties for each energy type in the layout function . . . . . . . . 129
20.3 Add four circles in the update function . . . . . . . . . . . . . . . . . . . 130
20.4 Style the circles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
20.5 Save and refresh . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
20.6 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

21. Practical: Style the Circles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

21.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
21.2 Design a colour scheme . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
21.3 Style the circles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
21.4 Center the visualisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
CONTENTS

21.5 Change the background colour . . . . . . . . . . . . . . . . . . . . . . . . 139

21.6 Save and refresh . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
21.7 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

22. D3 Event Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

22.1 Event types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
22.2 index and this . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

23. Flourish Popup Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

23.1 Installing the popup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
23.2 Initialising the popup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
23.3 Popup methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
23.4 Popup styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
23.5 Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

24. Practical: Add a Popup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

24.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
24.2 Link to the popup library . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
24.3 Add new module for popup . . . . . . . . . . . . . . . . . . . . . . . . . . 151
24.4 Add event handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
24.5 Populate popup with energy data . . . . . . . . . . . . . . . . . . . . . . 155
24.6 Offset the popup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
24.7 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

25. State Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

25.1 State management example . . . . . . . . . . . . . . . . . . . . . . . . . . 164
25.2 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

26. Practical: Add State Management . . . . . . . . . . . . . . . . . . . . . . . . . 169

26.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
26.2 Add a new module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
26.3 Add an empty state object and action function . . . . . . . . . . . . . . . 170

27. Practical: Add a Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

27.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
27.2 Add a container for the menu . . . . . . . . . . . . . . . . . . . . . . . . . 174
27.3 Add selectedIndicator state property . . . . . . . . . . . . . . . . . . . . . 175
27.4 Add a new module for the menu . . . . . . . . . . . . . . . . . . . . . . . 175
27.5 Add code to construct and manage the menu . . . . . . . . . . . . . . . . 176
27.6 Basic styling of the menu . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
27.7 Call updateMenu from update function . . . . . . . . . . . . . . . . . . . 179
27.8 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
CONTENTS

28. Data Manipulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

28.1 Installing Lodash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
28.2 Lodash syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
28.3 _.uniq . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
28.4 _.includes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
28.5 _.without . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
28.6 _.filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
28.7 _.sortBy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
28.8 _.orderBy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
28.9 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

29. Practical: Sort the Countries . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

29.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
29.2 Link to Lodash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
29.3 Sort the data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
29.4 Hide countries with a zero or missing value . . . . . . . . . . . . . . . . 194
29.5 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

30. D3 Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

30.1 Creating D3 transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
30.2 Transition duration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
30.3 Transition delay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
30.4 Key functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
30.5 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

31. Practical: Add Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

31.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
31.2 Add a key function to the data join . . . . . . . . . . . . . . . . . . . . . 207
31.3 Add transition to the country groups . . . . . . . . . . . . . . . . . . . . 208
31.4 Add transition duration and delay . . . . . . . . . . . . . . . . . . . . . . 209
31.5 Initialise the country group positions . . . . . . . . . . . . . . . . . . . . 211
31.6 Add a transition to the circle radii . . . . . . . . . . . . . . . . . . . . . . 212
31.7 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

32. Practical: Add a Legend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

32.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
32.2 Add the legend to index.html . . . . . . . . . . . . . . . . . . . . . . . . . 216
32.3 Add a function to update the radius of the legend circle . . . . . . . . . 217
32.4 Style the legend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
32.5 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

33. Practical: Finishing Touches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

CONTENTS

33.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

33.2 Add and apply Open Sans font . . . . . . . . . . . . . . . . . . . . . . . . 222
33.3 Style the menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
33.4 Add header and footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
33.5 Other CSS tweaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
33.6 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

34. Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

34.1 Where next? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
34.2 Wrapping up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

Appendix A: Tools and Set-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

Web development tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

Appendix B: Example Set-Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

Create a project directory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Install a code editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Create a minimal HTML file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Install Live Server extension . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Start Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Add CSS and JavaScript files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
1. Introduction
Welcome! First of all, I’d like to thank you for buying this book. The aim is to teach you
about D3.js and show you how to build a real-world interactive data visualisation called
Energy Explorer.

Energy Explorer

This book uses a mix of theory and practice. You’ll learn an aspect of D3 then put it into
practice during the build of Energy Explorer. The book is divided into several chapters.
Some contain theoretical information and others contain practical steps to build Energy
Explorer. Each practical chapter has the name ‘Practical’ in its title, for example ‘Practical:
What You’ll Need’.

1.1 Prerequisites
To get the most out of this book I recommend that you’re familiar with:

• HTML
• SVG
• CSS
• JavaScript

You should also be comfortable opening and editing code in a code editor (such as VS
Code, Atom or Brackets) and setting up a local web server.
Introduction 2

If you need to get up to speed on the above languages and tools I suggest reading my
Fundamentals of HTML, SVG, CSS & JavaScript for Data Visualisation1 book.

1.2 What you’ll learn

This book aims to teach you enough D3 to build a custom data visualisation from the
ground up. Broadly speaking we’ll cover:

• D3 selections and joins (these are used to update HTML and SVG elements in a
data-driven fashion).
• D3 modules (such as scale functions and transitions).
• Third party libraries such as Lodash that are useful when building data visualisa-
tions.
• General web development patterns that are helpful when building interactive data
visualisations.

1.2.1 D3 selections and joins

D3 has a powerful mechanism for adding, removing and updating HTML/SVG elements
in a data-driven fashion known as selections and joins. You’ll learn how to use selections
to select and update HTML/SVG elements. You’ll also learn how to update the elements
in a data-driven fashion using D3 joins. For example, given an array of data, you’ll learn
how to keep a group of SVG circles synchronised with the data.

1.2.2 D3 modules

D3 has a large number of modules that help you build data visualisations. We cover the
following D3 modules (and concepts) in this book:

Name Description

Scale functions Scale functions transform data values (e.g. percentages)

into visual values (e.g. position, size or colours)

Data requests Data requests let you load CSV and JSON files

Event handling Event handling lets you respond to clicks and hovers
from the user
Transitions Transitions let you animate the position, size and colour
of HTML/SVG elements
Introduction 3

1.2.3 Third party libraries

We look at a couple of JavaScript libraries in this book: Flourish’s popup library2 and
Lodash3 .
Flourish’s popup library helps you add an information popup to a web page and Lodash
provides functions for processing data (such as sorting and filtering).

Flourish’s information popup (appears when an item is hovered)

1.2.4 Web development patterns

We also cover web development techniques that are useful when building interactive data
visualisations:

Name Description

Modularisation Split your code up into separate modules rather

than having all your code in a single file.

State management Implement a state management pattern so that user

interaction can be handled in a clean and easy to
understand manner.
Data manipulation Use the lodash library to process (sort, filter etc.)
data.

The above techniques will be used during the build of Energy Explorer.

1.3 What you’ll build

In this book we’ll build an interactive data visualisation called Energy Explorer which
shows the energy mix of 141 countries. You can visit a live version at https://d3-start-to-
finish-energy-explorer.surge.sh/4 .
Each country is represented by 4 circles and each circle shows the amount of renewable,
fossil fuel, hydroelectric and nuclear energy produced by a country.
Introduction 4

Energy Explorer

The chart is interactive. When a country is hovered a popup appears showing detailed
information.
Introduction 5

Information popup when a country is hovered

The countries can be sorted by name or one of the energy types. When the circles sort they
animate into their new positions. The following image shows the view when Renewable
has been selected. The countries are sorted by the percentage of renewable energy in their
energy mix:

Countries sorted by renewable energy

The visualisation is styled to look clean, modern and fresh. Colours, fonts, line widths,
spacing etc. have been carefully selected to make the chart attractive and easy to digest.
Energy Explorer will be built using HTML, SVG, CSS, JavaScript and D3. HTML,
SVG, CSS and JavaScript are standard technologies used to build websites and web
applications. Practically every website (or web application) you visit is built from
these four technologies. D3 is a JavaScript library that helps you build interactive data
visualisations. It offers advanced functionality such as adding, removing and updating
DOM elements, transforming data into shapes and animating between application states.
This book requires that you’re reasonably proficient in HTML, SVG, CSS and JavaScript.
NOTES 6

If you think your knowledge of these technologies needs a boost I recommend reading
my Fundamentals of HTML, SVG, CSS & JavaScript for Data Visualisation5 book.

1.4 Code download

You can download the code for this book from here6 .

1.5 Where to get help

If you need help on anything in this book please tweet me at @createwithdata7 or email
me at help@createwithdata.com.

1.6 Stay in touch

I love to stay in touch with my readers. One of the best ways to do this is via my mailing
list. I send occasional messages containing useful information related to implementing
data visualisations (e.g. using JavaScript or other tools). There’ll also be discount codes
for my other books. You can sign up on my website www.createwithdata.com8 .

1.7 Translators
If you’re interested in translating D3 Start to Finish to another language contact me at
info@createwithdata.com and I’ll be happy to discuss further.

Notes

1 https://leanpub.com/html-svg-css-js-for-data-visualisation

2 https://github.com/kiln/flourish-popup

3 https://lodash.com/

4 https://d3-start-to-finish-energy-explorer.surge.sh/

5 https://leanpub.com/html-svg-css-js-for-data-visualisation

6 https://cwd-resources.netlify.app/d3starttofinish/2-6-22-3jrisb/d3-start-to-finish-code.zip

7 https://twitter.com/createwithdata

8 https://www.createwithdata.com
2. Energy Explorer
This chapter gives a technical overview of Energy Explorer and an overview of the build
steps.

2.1 Technical overview

This section gives a broad overview of Energy Explorer from a technical perspective.
There’s no need to understand this section fully, it’s just here to give you a flavour of
what you’ll be building.
Energy Explorer is built using HTML, SVG, CSS and JavaScript. It uses a few JavaScript
libraries namely D3, Lodash and Flourish’s popup library.
The data originates from the World Bank’s World Development Indicators9 database and
has been transformed into a comma separated value (CSV) file using a Node script. The
CSV file looks like:
data.csv
id,name,oilgascoal,nuclear,hydroelectric,renewable
AGO,Angola,46.8,,53.2,0.0
ALB,Albania,0.0,,100.0,0.0
ARE,United Arab Emirates,99.8,,0.0,0.2
ARG,Argentina,66.9,,26.2,1.9
ARM,Armenia,35.9,,28.3,0.1
...

This CSV file is loaded into Energy Explorer using D3. We use D3 selections and joins to
create a group of four circles that represent each country. A text label is also created for
each country.
A mouse over event handler is added to each country. This triggers a popup containing
additional information.
At the top of the visualisation is a menu which allows the user to choose how the countries
are sorted.

Energy Explorer’s sort menu

Energy Explorer 8

The menu is created using D3. When a menu item is clicked the data is sorted and D3’s
transitions are used to animate the countries into their new positions.
The application is split into a few modules. One for the main application and further
modules for computing the circle positions, for adding a popup and for adding a menu.
The final file structure looks like:

energy-explorer
├── css
│ └── style.css
├── data
│ └── data.csv
├── index.html
└── js
├── config.js
├── layout.js
├── lib
│ ├── d3.min.js
│ ├── lodash.min.js
│ └── popup-v1.1.1.min.js
├── main.js
├── menu.js
├── popup.js
├── store.js
└── update.js

This is a typical web application structure. It’s a static application, meaning there’s no
server-side code. All files are loaded into the browser when the visualisation first loads.
(In order to stay focused, this book doesn’t use any build tools such as Webpack.)
The application consists of a single HTML file (index.html). This contains a handful of
HTML elements that act as containers for the chart. The main JavaScript file is main.js
and this loads the data from data/data.csv. It transforms the data into position and radius
information using a function in layout.js. The chart is drawn in update.js.
menu.js creates the sort menu and popup.js manages the popup. store.js helps with
state management.
D3, Lodash and Flourish’s popup library live in the lib directory.

2.2 Overview of the Energy Explorer build

The build of the Energy Explorer is divided into fifteen steps. Each step focuses on a
single aspect. For example, loading the data or adding transitions.
NOTES 9

The code download includes the before and after code for each of the fifteen steps.
Therefore if you don’t complete a particular step, you can still work on the next one.
Typically in each practical session you’ll load the step’s code into your editor, edit the
code and view the result in your web browser. The steps are:

Step Description

1 Getting Started

2 Load the Data

3 Draw the Data (you’ll represent each country with a circle)

4 Size the Circles

5 Add Modules

6 Arrange the Data (in a grid formation)

7 Add Labels

8 Add More Circles (for representing each energy type)

9 Style the Circles

10 Add Popup

11 Add State Management and a Menu

12 Sort the Countries

13 Add Transitions

14 Add a Legend

15 Finishing Touches

Notes

9 http://datatopics.worldbank.org/world-development-indicators/
3. Practical: Setting Up
3.1 What you need
This section covers the tools you need to build Energy Explorer. You need three things:

• A modern web browser such as Chrome or Firefox.

• A code editor such as Brackets10 or VS Code11 .
• A web server running on your computer.

You probably already have a web browser. I recommend using Chrome or Firefox. You’re
probably fine using other browsers so long as they’re modern and up to date.
If you’re a developer and already using a preferred code editor then please stick with that.
If you don’t have a preferred code editor I recommend Brackets12 or VS Code13 . These
are covered in Appendix A.
Finally you need to have a web server running on your machine. This is so that the
data can be loaded without running into browser security restrictions. If you’re a web
developer there’s a good chance you’re familiar with setting up a server using Node,
Python or similar. If not I recommend using Brackets as your code editor as this has a
built-in server. For futher information refer to Appendix A and Appendix B.

3.2 Get set up

The aim of this section is to:

• download the code (in the form of a zip file)

• expand the zip file
• open the code in your code editor
• run a web server to serve the code
• view the page in your web browser

(If at any point you get stuck, refer to Appendix A and Appendix B for further
information.)
Practical: Setting Up 11

3.2.1 Download the code

Start by downloading the code from here14 (it’s in the form of a zip file).
Expand the zip and make sure you have a directory structure like:

d3-start-to-finish-code
├── step1
│ └── index.html
├── step10
│ ├── css
│ │ └── style.css
│ ├── data
│ │ └── data.csv
│ ├── index.html
│ └── js
│ ├── config.js
│ ├── layout.js
│ ├── lib
│ │ ├── d3.min.js
│ │ └── popup-v1.1.1.min.js
│ ├── main.js
│ └── update.js
...

Move the d3-start-to-finish-code directory somewhere convenient. Perhaps you al-

ready have a directory where you store your projects. (I have a development directory
within my home directory and have placed d3-start-to-finish-code there.) You should
aim for something like:

peter-home
├── development
│ ├── d3-start-to-finish-code
│ │ ├── step1
│ │ │ └── index.html
│ │ ├── step10
│ │ │ ├── css
│ │ │ │ └── style.css
│ │ │ ├── data
│ │ │ │ └── data.json
│ │ │ └── index.html
│ ...
├── documents
│ ...
├── music
Practical: Setting Up 12

│ ...
├── photos
│ ...

3.2.2 Open step1 in code editor

Open your text editor and open d3-start-to-finish-code/step1. In VS Code or Brack-

ets you select ‘Open Folder…’ from the ‘File’ menu and select d3-start-to-finish-
code/step1. Within the code editor’s file browser, expand step1, click on index.html
and you should see something like:

step1/index.html in the code download

3.2.3 Start web server

If you’re comfortable setting up a local web server (for example using Node or Python)
please do so by navigating to d3-start-to-finish-code within a command line interface
and starting the web server there. Here’s a screenshot of my command line after starting
http-server (a node web server):
Practical: Setting Up 13

Starting node’s http-server

Otherwise I recommend using Brackets as your code editor and using it’s Live Preview
(see next section), or using VS Code’s Live Server extension (see next section).

3.2.4 View step1 in your browser

If you’re using a Node or Python server (or similar), navigate to the URL specified by the
server and open step1. The URL should be something like localhost:8000/step1.
If you’re using Brackets, select step1/index.html in the sidebar and click the lightning
symbol (or select Live Preview from the File menu). If you’re using VS Code’s Live Server
extension, select the step1 directory in the sidebar and click the ‘Go Live’ button (usually
it’s in the footer menu). See Appendix A and Appendix B for more information.
You should now see a friendly greeting in your web browser:
Practical: Setting Up 14

step1 of the code download (viewed using Brackets’ server)

3.2.5 Edit the code

Just to check everything’s set up properly try editing the greeting in index.html and
saving.
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Energy mix by Country 2015</title>
</head>
<body>
<h1>Let's learn D3!</h1>
</body>
</html>

Refresh your browser and verify that the greeting has updated.
NOTES 15

Greeting after editing index.html

3.3 Summary
You’ve completed all the necessary set up steps and are ready to start learning and
building with D3! The next chapter introduces D3 and gives a broad overview of what it
is and what it can be used for.

Notes

10 http://brackets.io/

11 https://code.visualstudio.com/

12 http://brackets.io/

13 https://code.visualstudio.com/

14 https://cwd-resources.netlify.app/d3starttofinish/2-6-22-3jrisb/d3-start-to-finish-code.zip
4. Introduction to D3
D315 is a JavaScript library that helps you build custom, interactive and beautiful data
visualisations. Rather than providing a library of chart types (which is what libraries
like Highcharts16 and Chart.js17 do) it provides building blocks for creating custom (and
standard) charts.
D3 primarily consists of:

• a mechanism for joining (or binding) arrays of data to HTML or SVG elements
• a vast number of modules that help build data visualisations

This section gives an overview of D3 joins and some of D3’s modules. Don’t worry too
much if you don’t follow everything because we’ll cover this material in depth later on.

4.1 Joining data with D3

One of the cornerstones of D3 is its data joining. A data join creates a correspondence
between an array of data and a group of HTML or SVG elements. Specifically a data
join means that:

• each array element has a corresponding HTML/SVG element

• each HTML/SVG element may be positioned, sized and styled according to the
value(s) of its corresponding array element

Here’s an example where an array of numbers has been joined to SVG circles:

An array of numbers joined to circle elements

Introduction to D3 17

Each array element corresponds to a circle. Furthermore each circle is sized according
to its corresponding array value.
Adding a new array element causes a new circle to be created:

Adding a new array element results in a new circle

Removing array element(s) causes the corresponding circle(s) to be removed:

Removing array elements results in circle removal

Changing array value(s) causes the circles to change size accordingly:

Modifying array values results in resized circles

You can view an interactive version of this example on Codepen at:

https://codepen.io/createwithdata/pen/NWxjKVo18
The data join ensures that the circles ‘mirror’ the array. This is the basis for creating
data visualisations using D3. In effect array elements are represented by shapes (whether
circles, lines, rectangles etc.). The shapes may be sized, positioned and styled according
to the corresponding data.
We cover D3 joins in detail later in this book. For now just remember that one of D3’s
cornerstones is its ability to join arrays to HTML/SVG elements. This results in the
HTML/SVG elements mirroring the array elements.
Introduction to D3 18

4.2 D3 modules
D3 has a large number of modules that help you build interactive data visualisations.
Let’s look at some of the more commonly used ones.

4.2.1 Data requests

D3’s fetch module makes loading comma-separated value (CSV) and JSON files straight-
foward. Comma-separated value (CSV) files are text files that represent data in a tabular
format. For example:

name,indicator-1,indicator-2
Paris,4030,13.45
Tokyo,3912,45.41
New York,19481,32.53

JSON files are text files with a format closely related to JavaScript objects and arrays. For
example:

[
{
"name": "Paris",
"indicator-1": 4030,
"indicator-2": 13.45
},
{
"name": "Tokyo",
"indicator-1": 3912,
"indicator-2": 45.41
},
{
"name": "New York",
"indicator-1": 19481,
"indicator-2": 32.53
}
]

CSV files are often produced by exporting data from spreadsheets and
databases while the JSON format is often used by APIs.
Introduction to D3 19

You can use a D3 function d3.csv to request a CSV file from a given URL. When the CSV
file arrives, D3 converts it into an array of objects.
For example, suppose there’s a CSV file located at data/cities.csv:
‘data/cities.csv’

name,indicator-1,indicator-2
Paris,4030,13.45
Tokyo,3912,45.41
New York,19481,32.53

You can request this data using:

d3.csv('data/cities.csv')

and D3 converts the CSV file into an array of objects:

[
{
"name": "Paris",
"indicator-1": "4030",
"indicator-2": "13.45"
},
{
"name": "Tokyo",
"indicator-1": "3912",
"indicator-2": "45.41"
},
{
"name": "New York",
"indicator-1": "19481",
"indicator-2": "32.53"
}
]

Each object corresponds to a row from the CSV file. For example, the first object
corresponds to the first row of data (Paris). This makes working with CSV (and similar)
data very simple. We’ll take a closer look at data requests in the next section.

4.2.2 Scale functions

We’ve seen that a common pattern in D3 is the data join. For example, given the data:
Introduction to D3 20

var myData = [ 1, 4, 3 ];

we could create a rectangle for each element and set the length of the rectangle
proportionally to the value. Rarely will the data correspond exactly to screen coordinates
so we usually need to apply some scaling.
We could just multiply each value by a factor but this can make the code harder to
understand. Instead the usual approach is to create a scale function. For example you
could do this:

function barLengthScale(value) {
return value * 50;
}

barLengthScale(1); // returns 50
barLengthScale(4); // returns 200

However D3 provides a system for creating scale functions that saves you having to figure
out the underlying mathematics. It’s also expressive (it communicates to anyone reading
the code what the intention is).
For example, suppose you have some data that represents scores out of 10. This means
the data range is [0, 10]. And suppose you want the length of the bars to vary from 0 to
500, this means the output range is [0, 500].

You can create such a scale function using:

var barLengthScale = d3.scaleLinear()

.domain([0, 10])
.range([0, 500]);

barLengthScale(1); // returns 50
barLengthScale(4); // returns 200

The above makes it clear what the scale function’s intent is: its input range is 0 to 10
and its output range is 0 to 500. This makes reading and maintaining the code easier.
Furthermore you can do things like clamp the scale so that if the input exceeds the input
domain, the function clamps the output to the output range. For example:
Introduction to D3 21

barLengthScale.clamp(true);

barLengthScale(10); // returns 500

barLengthScale(100); // returns 500

You’ll learn more about scale functions later in this book and you’ll use them to size the
circles in Energy Explorer.

4.2.3 Axes

Have you ever looked closely at a chart axis and wondered how to create one?

Chart axis generated by D3

It’s probably not as easy as you might think! The axis will be different if it appears to
the left, right, top or bottom of the chart. How many tick marks should there be? Do you
want it to animate if the chart zooms in?
To save you figuring this out D3 provides an axis module. You pass a scale function and
an HTML/SVG element into the axis module and D3 figures out how to draw the axis.

4.2.4 Shapes

Imagine you were making a doughnut chart consisting of a few arc segments.

Doughnut chart

Each segment is represented by an SVG path element but figuring out the path string is
non trivial. For example the SVG code for the large segment on the left is:
Introduction to D3 22

<path d="M12.53915742027986,95.05140537899537A4,4,0,0,1,8.936653576956331,99.599880636702\
96A100,100,0,1,1,-5.208315972309041,-99.86427511744422A4,4,0,0,1,-0.9999833334166643,-95.\
86970411274646L-0.9999833334166648,-53.76802178493789A4,4,0,0,1,-4.6296141976080225,-49.7\
8520535642397A50,50,0,0,0,2.4424052633738556,49.94031093745256A4,4,0,0,1,6.59776767084554\
9,53.3710557802093Z"></path>

Fortunately D3 has a range of helper functions that create SVG path strings. Suppose you
want to create an arc segment with start angle 90, end angle 180, inner radius 50 and
outer radius 100 you can use:

var arcGenerator = d3.arc();

arcGenerator({
startAngle: 0.5 * Math.PI,
endAngle: Math.PI,
innerRadius: 50,
outerRadius: 100
});
// returns "M100,0A100,100,0,0,1,6.123233995736766e-15,
// 100L3.061616997868383e-15,50A50,50,0,0,0,50,0Z"

The angles are specified in radians, so 90 degrees corresponds to 0.5 * π radians.

This results in this path:

An arc segment generated by D3

D3 provides generators for other shapes commonly found in data visualisations. You can
find out more at D3 in Depth19 .

4.2.5 Transitions
Animations between different chart states add flair to a data visualisation but they also
achieve object constancy. Object constancy is a technique that helps someone viewing
a chart keep track of points of interest, even if they move to new positions.
For example look at these two charts containing a number of circles:
Introduction to D3 23

Before and after circles change position

The left chart is before the circles change position and the right chart is after the circles
have changed position. It’s impossible to tell which circle has moved where. However if
the circles animate to their new positions you stand a chance of following a circle as it
moves to its new position.
You can visit https://codepen.io/createwithdata/pen/pogPwOy20 to play with this exam-
ple.
D3 has a powerful system for managing transitions. You can alter things such as the
animation duration and the easing function (which lets you control how quickly things
accelerate and decelerate). You can also add delays to each element in order to achieve
staggered transitions.
Transitions are very well implemented in D3 and its one of the features that stands D3
apart. We cover transitions in more detail later and use them in Energy Explorer.

4.2.6 Summary

Hopefully this chapter has given you a flavour of what D3 is and what it can do. One of
the key takeaways is that D3 provides modules to help you build data visualisations. It
doesn’t provide ready built charts – use a library such as Chart.js for that.
This book covers a cross section of D3 functionality. It doesn’t cover everything, but it
covers enough to get you started building your own custom visualisations.

4.3 D3 versions
Since its inception in 2011, D3 has undergone a number of changes and at the time of
writing is at version 7. This book uses version 7 which was launched in June 2021, but
the content also applies to version 6.
NOTES 24

Notes

15 https://d3js.org/

16 https://www.highcharts.com/

17 https://www.chartjs.org/

18 https://codepen.io/createwithdata/pen/NWxjKVo

19 https://www.d3indepth.com/shapes/

20 https://codepen.io/createwithdata/pen/pogPwOy
5. Requesting Data with D3
This chapter covers data requests using D3. This is a nice topic to start your D3 journey
as it’s not too hard to understand and it allows you to load some data into the browser
(in order to visualise it).
First let’s look at HTTP requests. HTTP stands for Hypertext Transfer Protocol and is a
protocol (or ‘agreement’) used for communication between a web browser and web server.
Any time a web browser needs to request a resource, be it an HTML file, a JPEG image or
a CSV file, it uses an HTTP request. Typically the data (or resource) will have a URL
(Uniform Resource Locator) such as https://assets.codepen.io/2814973/my-csv.csv.
(The URL can also be relative to the index.html of your web application, so it’ll often
look like data/my-csv.csv.)

Beware that things get more complicated if the resource has a different domain
(i.e. the assets.codepen.io part) to your web application due to CORS21
restrictions. In this book, the data will be hosted on the same server so this
isn’t an issue.

D3’s request methods make the HTTP request for you and parse the incoming data so
that it’s ready to use. (Parsing CSV files is non trivial so this saves a lot of work.)
In this chapter we look at four request methods: d3.csv, d3.tsv, d3.dsv and d3.json.
These are the most common methods used when visualising data. (In fact, d3.csv and
d3.json are by far the most commonly used.)

5.1 d3.csv
d3.csv makes an HTTP request for a comma-separated value (CSV) file and converts it
into an array of objects. The syntax of d3.csv is:

d3.csv(url [, row])

urlis a string containing the URL and row is an optional function that transforms each
row of the CSV file. (The square brackets denote an optional argument.)
For example given a CSV file with URL https://assets.codepen.io/2814973/my-
csv.csv:
Requesting Data with D3 26

https://assets.codepen.io/2814973/my-csv.csv

name,indicator1,indicator2
Paris,4030,13.45
Tokyo,3912,45.41
New York,19481,32.53

use the following to load it:

function dataIsReady(data) {
console.log(data);
}

d3.csv('https://assets.codepen.io/2814973/my-csv.csv').then(dataIsReady);

d3.csv requests the CSV file. When the CSV loads, the function dataIsReady gets called.
(This is known as a callback function.) The first parameter (data) of dataIsReady is an
array of objects.

A more detailed explanation is: d3.csv evaluates to a ‘promise’. A promise22

is an object that represents an ‘asynchronous’ operation. This means d3.csv
makes the request but doesn’t wait for the resource to arrive. Instead the
program continues to execute while the resource loads. The promise object
has a method .then which lets you specify a callback function that’s called
when the CSV file loads.

D3 converts the CSV file into an array of objects and passes it into the callback function.
Each object corresponds to a row in the CSV file (excluding the header) and has properties
corresponding to each name in the CSV header:

[
{
name: "Paris",
indicator1: "4030",
indicator2: "13.45"
},
{
name: "Tokyo",
indicator1: "3912",
indicator2: "45.41"
},
{
Requesting Data with D3 27

name: "New York",

indicator1: "19481",
indicator2: "32.53"
}
]

Notice that the indicator1 and indicator2 property values are strings instead of
numbers. D3 assumes everything in the CSV file is a string and doesn’t convert anything
automatically. It’s a good idea to convert strings to numbers as soon as you can and this
can be done by providing a function as the second argument to d3.csv:

function dataIsReady(data) {
console.log(data);
}

function transformRow(row) {
var ret = {
name: row.name,
indicator1: parseFloat(row.indicator1),
indicator2: parseFloat(row.indicator2)
};

return ret;
}

d3.csv('https://assets.codepen.io/2814973/my-csv.csv', transformRow)
.then(dataIsReady);

The transformRow function gets called for each row. Its parameter is an element from
the array of objects that D3 generated from the CSV file. For example the first time
transformRow is called, row is:

{
name: "Paris",
indicator1: "4030",
indicator2: "13.45"
}

You then create a new object with any transformations you wish to apply and return it.
In our example, we convert indicator1 and indicator2 into numbers using parseFloat.
The array of objects that’s passed into dataIsReady now consists of the transformed
objects:
Requesting Data with D3 28

[
{
name: "Paris",
indicator1: 4030,
indicator2: 13.45
},
{
name: "Tokyo",
indicator1: 3912,
indicator2: 45.41
},
{
name: "New York",
indicator1: 19481,
indicator2: 32.53
}
]

Each indicator is now a number instead of a string.

To recap:

• d3.csv('my-url', transformRow) requests a CSV file located at 'my-url' and

returns a promise
• when the request fulfils, D3 converts the incoming CSV file into an array of objects
and transforms each row using the function transformRow
• D3 then calls dataIsReady, passing in the array of transformed objects

5.2 d3.tsv
d3.tsv is the same as d3.csv except it processes the incoming file as a tab-separated value
(TSV) file.

5.3 d3.dsv
d3.dsv is a generalised version of d3.csv and d3.tsv which processes the incoming
file using a specified separator character. The first argument of d3.dsv is the separator
character, so:
Requesting Data with D3 29

d3.dsv(',', 'my-url', transformRow);

is the equivalent of

d3.csv('my-url', transformRow);

5.4 d3.json
d3.json makes a request for a JSON file and parses it into a JavaScript array or object.
Given a JSON file at https://assets.codepen.io/2814973/my-json.json:
https://assets.codepen.io/2814973/my-json.json
[
{
"name": "Paris",
"indicator1": 4030,
"indicator2": 13.45
},
{
"name": "Tokyo",
"indicator1": 3912,
"indicator2": 45.41
},
{
"name": "New York",
"indicator1": 19481,
"indicator2": 32.53
}
]

You can request it using:

function dataIsReady(data) {
console.log(data);
}

d3.json('https://assets.codepen.io/2814973/my-json.json')
.then(dataIsReady);

Similarly to d3.csv, d3.json makes the request and evaluates to a promise.

.then(dataIsReady) specifies that dataIsReady is called when the JSON file arrives.
D3 converts the JSON file into a JavaScript array or object. JSON is closely related to
JavaScript’s arrays and objects so when you load a JSON file using d3.json you’re
creating an array or object that looks just like the JSON file.
NOTES 30

5.5 CSV, TSV or JSON?

What’s best: CSV, TSV or JSON? It depends. In my experience, CSV is most often used
when the data has been exported from a spreadsheet. JSON is usually used to return
results from an API call (see the next section). JSON also has the ability to represent more
complex structures than CSV files (which are basically tables). (We use CSV to represent
the data for Energy Explorer.)

5.6 Static resources and APIs

If the data your’re visualising doesn’t change very often then hosting it statically should
suffice. Static hosting is where files (be it HTML, JavaScript, CSV or JSON files) live on a
server’s hard drive and are sent to a web browser when requested. For example the CSV
file (at https://assets.codepen.io/2814973/my-csv.csv) is statically hosted.
If the data is frequently updated (or particularly complex) then it’s often served via an
API. An API (Application Programming Interface) is a program on a server that receives
an HTTP request, makes a database query and returns the result (usually as a JSON file).
Whether your data is statically hosted or comes from an API it doesn’t matter to D3. So
long as the incoming data is in the agreed format (i.e. CSV if you’re using d3.csv) D3
will load data from a static resource or an API. For simplicity the Energy Explorer will
load data from a statically hosted CSV file.

Notes

21 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

22 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
6. Practical: Load the Data
You learned about D3 requests in the previous section. In this practical we introduce the
data that Energy Explorer uses and we show how to use D3 to load this data.

6.1 Overview
Open d3-start-to-finish-code/step2 in the code download in your text editor. The
directory structure is:

step2
├── data
│ └── data.csv
├── index.html
└── js
├── lib
│ └── d3.min.js
└── main.js

New files and directories are shown in red. There are three new directories: data, js and
js/lib. data is where the data is located and js is where JavaScript files live. js/lib
contains libraries such as D3.
There are also three new files: data.csv, d3.min.js and main.js. The first is the CSV file
containing data for Energy Explorer, d3.min.js is D3 and main.js is an empty file that’ll
contain the Energy Explorer JavaScript code.
In this practical we:

1. Inspect the CSV file data/data.csv.

2. Link to js/main.js and js/lib/d3.min.js in index.html.
3. Load data/data.csv using D3.

6.2 Inspect the data

Open data/data.csv in your text editor. It should look like:
Practical: Load the Data 32

data/data.csv

id,name,oilgascoal,nuclear,hydroelectric,renewable
AGO,Angola,46.8,,53.2,0.0
ALB,Albania,0.0,,100.0,0.0
ARE,United Arab Emirates,99.8,,0.0,0.2
ARG,Argentina,66.9,,26.2,1.9
ARM,Armenia,35.9,,28.3,0.1
...

This is the data that’ll be visualised by Energy Explorer. Each row represents a country
and has an id, a name and four indicators (hydroelectric, nuclear, oilgascoal and
renewable). The indicators describe the energy mix (as a percentage) of a country. For
example, 53.2% of Angola’s electricity is provided by hydroelectrics (from water, such as
wave power or a dam).
The data originates from the World Bank’s World Development Indicators23 database.

6.3 Include JavaScript files in index.html

Now open index.html. Add the two JavaScript files d3.min.js and main.js to the page by
using the <script> element. This uses an attribute src to specify the path of the JavaScript
file:
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Energy mix by Country 2015</title>
</head>

<body>
<script src="js/lib/d3.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Now save index.html.

d3.min.js is the minified version of D3 and is located in the js/lib directory. (Minified
means that the size of the library has been reduced by, for example, shortening the names
Practical: Load the Data 33

of variables.) We use version 7 of D3 in this book. main.js is where Energy Explorer’s

code will live.

There’s a number of ways to include D3 in your project. We’ve opted for

one of the simpler approaches which is to download the library from the D3
homepage24 and link to it in index.html. When the page loads, the browser
will open each JavaScript file in turn and execute it. For larger projects you
can use ‘bundlers’ such as Webpack that can obtain library code for you and
package it all together. Such tools add a layer of complexity and to minimise
distraction I don’t use them in this book.

6.4 Request data

We now request data/data.csv using d3.csv. Open js/main.js and add the following:
js/main.js

function dataIsReady(csv) {
console.log(csv);
}

d3.csv('data/data.csv')
.then(dataIsReady);

This code is very similar to the code in the D3 Requests chapter. d3.csv requests a CSV file
at data/data.csv. (This URL is relative to index.html and it points at the data.csv file.)
D3 converts the CSV file into an array of objects then calls dataIsReady which outputs
the array to the console.
Now save index.html and js/main.js and load step2 in your browser.

Make sure your browser is showing step2. If you’re running a Node, Python,
PHP or similar server, you might need to browse back to the directory list and
open step2. If you’re using Brackets, select Live Preview from the File menu.

You’ll see a blank page in your browser. However if you open the Console within the
Developer Tools of the browser you should see something like:
Practical: Load the Data 34

Developer Tools console showing the output of dataIsReady

In Google Chrome you can open the Developer Tools by either pressing F12 or
pressing ctrl-shift-j (Windows) or cmd-option-j (Mac). (See here25 for further
information on opening the console in Chrome’s developer tools. Similar
instructions for Firefox are here26 .)

The Console allows you to inspect useful information while you develop your appli-
cation. You can write to the console using console.log. In our case, dataIsReady calls
console.log(csv) which outputs the csv variable.

Within the console, expand the array and the first few elements. You should see something
like:

Inspecting the data array

Can you see that this array corresponds to the data.csv file? (Each array object
corresponds to a row of data.)
For example the first object in the array represents Angola:
Practical: Load the Data 35

[
{
"name": "Angola",
"id": "AGO",
"hydroelectric": "53.2",
"nuclear": "",
"oilgascoal": "46.8",
"renewable": "0.0"
},
...
]

and corresponds to the first row of data in data/data.csv:

data/data.csv
id,name,oilgascoal,nuclear,hydroelectric,renewable
AGO,Angola,46.8,,53.2,0.0
ALB,Albania,0.0,,100.0,0.0
ARE,United Arab Emirates,99.8,,0.0,0.2
ARG,Argentina,66.9,,26.2,1.9
ARM,Armenia,35.9,,28.3,0.1
...

If you got this far congratulations – you’ve loaded the data into your application!
If not, check the following:

• are you definitely running a local webserver or the live server within Brackets?
• are you getting any errors on the developer tools console?
• try opening the Network tab of the developer tools and refreshing. You should see
a list of files that the browser has loaded (see below). Make sure that data.csv is
one of them
• try opening step2-complete which is the completed version of this section

Inspecting the Network tab in Chrome’s developer tools

This is one of the trickier steps to get working, so don’t worry if you’re having difficulty.
Once this has been solved the remaining practicals shouldn’t present similar issues.
NOTES 36

6.5 Summary
In this section we used D3’s d3.csv method to load the energy data. We added a function
dataIsReady that’s called when the data arrives. dataIsReady outputs the data to the
console.
In the next chapter you learn how D3 adds, removes and manipulates HTML and SVG
elements.

Notes

23 http://datatopics.worldbank.org/world-development-indicators/

24 https://d3js.org/

25 https://developers.google.com/web/tools/chrome-devtools/open

26 https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console
7. D3 Selections
D3 selections are basically arrays of HTML or SVG elements. They let you modify the
style and attributes of the HTML or SVG elements you’ve selected. For instance you can
use D3 to select some SVG circles and change their colour to red. Selections are also used
when joining an array to HTML or SVG elements (see the next chapter).

7.1 Creating a selection

D3 has two functions for making selections: d3.select and d3.selectAll.
d3.select selects a single element while d3.selectAll selects multiple elements.

7.1.1 d3.select

The syntax of d3.select is:

d3.select(selector);

where selector is a string containing a CSS selector string (for example '#chart').

If you’re not familiar with CSS selectors take a look at the CSS section in
the Fundamentals of HTML, SVG, CSS and JavaScript for Data Visualisation
book27 .

d3.select selects the first element on the page that matches the selector string. It returns
an object which has a number of methods (such as .attr and .style) that modify the
selected HTML/SVG element. (A method is a function that’s been assigned to a property
of an object.)
For example, if you have some SVG circles on the page:
D3 Selections 38

<circle></circle>
<circle></circle>
<circle></circle>

the following statement makes a selection containing just the first circle:

d3.select('circle');

You can assign a D3 selection to a variable. For example:

let s = d3.select('circle');

7.1.2 d3.selectAll

d3.selectAll is similar to d3.select but it selects all matching elements on the page. For
example, if you have some SVG circles on the page:

<circle></circle>
<circle></circle>
<circle></circle>

the following statement makes a selection containing all three circles:

d3.selectAll('circle');

d3.selectAll returns an object which has a number of methods (such as .attr and
.style)that modify all the selected HTML/SVG elements. The next section covers these
methods in detail.

7.2 Updating a selection’s elements

Once you’ve used d3.select or d3.selectAll to create a selection of HTML/SVG
elements you can modify the elements using a number of methods. Four of the most
commonly used selection methods are .style, .attr, .classed and .text.
D3 Selections 39

Method name Description

.style Adds CSS rules to the selection’s elements

.attr Adds attributes to the selection’s elements

.classed Adds a class attribute to the selection’s elements

.text Sets the text content of the selection’s elements

(If you’re not familiar with CSS, HTML or SVG you can read up on them in the
Fundamentals of HTML, SVG, CSS and JavaScript for Data Visualisation book28 .)

7.2.1 .style

The .style method sets a CSS style property on each element in a selection. The syntax
is:

s.style(property, value);

where s is a D3 selection.
property is a string representing the CSS property (such as color, fill or font-size) and
value is the value you’re setting the property to and can be any valid CSS value such as
red, #ddd or 12px.
For example suppose you have the following SVG elements:

<circle r="10"></circle>
<circle r="20"></circle>
<circle r="30"></circle>

You can update the fill style of each circle using:

let s = d3.selectAll('circle');
s.style('fill', 'red');

This will change the fill colour of each circle to red. An alternative format that omits the
variable declaration is:
D3 Selections 40

d3.selectAll('circle')
.style('fill', 'red');

Each method call is on a separate line and indented. This is the usual way of formatting
D3 code.
Under the hood, D3 adds inline CSS to the element(s). Inline CSS is where an attribute
named style is added to the element:

<circle r="10" style="fill: red;"></circle>

<circle r="20" style="fill: red;"></circle>
<circle r="30" style="fill: red;"></circle>

If you need to add more than one style rule, you can chain .style calls:

d3.selectAll('circle')
.style('fill', 'red')
.style('stroke', '#333');

Method chaining is a technique where you can make multiple method calls by writing
them one after the other. So instead of writing:

var s = d3.selectAll('circle');
s.style('fill', 'red');
s.style('stroke', '#333');

you write:

d3.selectAll('circle')
.style('fill', 'red')
.style('stroke', '#333');

Here’s a CodePen example that demonstrates .style:

https://codepen.io/createwithdata/pen/abvYowg29 .
As an exercise, try adding another .style call to change the stroke of the circles to #333.

7.2.2 .attr

.attr sets an attribute on each element in a selection. The syntax is:

D3 Selections 41

s.attr(name, value);

where s is a D3 selection.
name is a string representing the attribute name (for example id, cx or width) and value
is the value you’re setting the attribute to (for example main-menu, 10 or 100).
For example suppose you have the following SVG elements:

<circle></circle>
<circle></circle>
<circle></circle>

You can update the r attribute of every circle using:

d3.selectAll('circle')
.attr('r', 50);

This will change the radius of each circle to 50:

<circle r="50"></circle>
<circle r="50"></circle>
<circle r="50"></circle>

As with .style (and all other selection methods) you can chain method calls:

d3.selectAll('circle')
.attr('cx', 200)
.attr('cy', 100)
.attr('r', 50);

Here’s a CodePen example that uses .attr to set all the circle radii to 30:
https://codepen.io/createwithdata/pen/GRZWPjM30
As an exercise, try using .attr to change the circles’ vertical position (use the attribute
cy) to 30.

7.2.3 .classed

You can add and remove class attributes to/from a selection’s elements using .classed.
The syntax is:
Random documents with unrelated
content Scribd suggests to you:
ist die Treue,“ pflegte er in dieser Zeit zu sagen, „aber sie kostet
Nerven, mein Freund!“ Eines Tages aber übersandte das
entzückende Geschöpf ihm einen Abschiedsbrief! Voller
Zerknirschung und Tränen: sie hatte sich auf einer Bahnfahrt in
einen Offizier verliebt.
Gott sei gelobt! Glück zu, Schwedenklee!
Ja, in der Tat, es war eine furchtbare Zeit!
Schwedenklee schlief prachtvoll unter seinem hellgrünen
Seidenhimmel, obschon neben ihm noch recht gut Platz gewesen
wäre.

Wie gesagt, aber in den letzten Tagen gefiel Schwedenklee den

Kartenspielern nicht mehr! Wer sollte sich sonst um ihn kümmern,
wenn nicht sie? Etwa Augusta? Nein, Augusta wich ihm aus, floh ihn
direkt, wenn sie merkte, daß er in schlechter Laune war, mit
Rücksicht auf ihre zerstörten Nerven. Augusta hatte nur beobachtet,
daß eines Tages ein Brief mit einem schwarzen Trauerrand
angekommen war, und Schwedenklee die Augen rollte. Die
Kartenspieler aber, sie kannten ja jeden Zug in seinem feisten,
leuchtenden Gesicht. Und wenn ein gewiegter Spieler wie
Schwedenklee ein „angesagtes“ Solo verlor, soviele Buben, soviele
Asse, Könige, Damen, eine Farbe blank – was sollte man dann
sagen? Wie? Ja, nun war es offenbar, nicht mehr wegzuleugnen:
etwas war bei Schwedenklee nicht in Ordnung!
Es entstand eine solch furchtbare Aufregung, daß man eine Runde
aussetzte und die Kellner aus dem Billardsaal zusammenliefen.
Schwedenklee war sogar erbleicht, als das Solo so katastrophal
zusammenbrach! In all den Jahren hatte niemand beobachtet, daß
Schwedenklee erbleichte. Heute aber, in der Tat, war das Blut aus
seinen roten Wangen gewichen, und seine Nasenspitze war für eine
Sekunde schneeweiß geworden.
Es nützte Schwedenklee nichts, daß er seine bekannte Lachsalve
losließ. Die Ärzte, die Notare blickten prüfend und argwöhnisch in
sein Gesicht.
Schwedenklee hatte trotz der geheuchelten Heiterkeit immer noch
einen verwirrten Gesichtsausdruck. Sein Blick war flackernd, nicht
unbekümmert und etwas keck wie gewöhnlich. Nun errötete er
sogar. Er tat, als schäme er sich, ein mit solch triumphierendem
Lächeln angesagtes Solo verloren zu haben.
Die Erregung verflog. Die Kiebitze, die aufgesprungen waren,
saßen wieder ruhig auf ihren Stühlen, der Wollust hingegeben, die
Chancen des Spielers besser zu kennen als die einzelnen Spieler, die
große Überraschung, die jede Sekunde offenbar werden mußte,
schon lange vorher genießend. Hinter Schwedenklees breitem
Rücken verschanzt saßen drei Kiebitze dicht nebeneinandergedrängt.
Schwedenklees Spiel interessierte heute abend am meisten. Er
erhielt eine große Karte nach der andern, er spielte nunmehr
konzentriert, führte jedes Spiel in großem Stil durch und gewann. Er
wurde rot, sooft er die Karte aufnahm: so wie heute hatte ihn das
Glück noch nie umschmeichelt. Den Kiebitzen aber fiel es auf, daß er
gepreßt atmete, sooft er ein großes Spiel gewonnen hatte.
Plötzlich aber – mitten in der Glücksserie! – zog er die Uhr und
erhob sich ohne alle Umstände, zum Erstaunen der Spieler, zur
Enttäuschung der erregten Kiebitze. Er entschuldigte sich hastig mit
dringlichen Arbeiten. Sofort sprang ein anderer Spieler, der schon
eine Stunde lauerte, für ihn ein. Der Pikkolo lief mit seinem
Überzieher herbei.
Begleitet von einem der Kiebitze, dem bekannten Nervenarzt
Wittmann, einer Kapazität, durchschritt Schwedenklee, in Gedanken
versunken, das Billardzimmer. Und er erbleichte tatsächlich an
diesem Abend zum zweitenmal! Es war heute wirklich alles wie
verhext, es gibt solche Tage. Auf dem Mittagsspaziergang hatte er
jene ganz in sich zusammengekrümmte Bettlerin auf der Potsdamer
Brücke getroffen, die wie eine Verkünderin von Unheil an jenen
Tagen auftauchte, da irgend etwas Unangenehmes sich ereignen
würde. Nun dieses Gesicht! Es saß gegenüber der Tür des
Spielzimmers im Billardsaal an einem kleinen Marmortischchen. Das
Gesicht eines zermürbten, alternden, grauhaarigen Künstlers, eines
völlig Hoffnungslosen, eines Bittstellers, fahl, mit dunkeln,
fiebernden Augen, und diese Augen streiften seinen Blick scheu und
tastend. Vielleicht hatte dieser Hoffnungslose, Hungrige voller Neid
beobachtet, wie Schwedenklee seinen Kartengewinn in die Tasche
steckte? Jedenfalls gehörte dieses Antlitz voller Gram und Elend zur
Klasse jener Gesichter, die Schwedenklee fürchtete, denen er aus
dem Wege ging. Sie verdarben ihm die gute Laune und riefen in ihm
augenblicklich die tausend Unannehmlichkeiten wach, große und
kleine, die ihm das Leben getrübt hatten.
„Sie sind nervös, Schwedenklee“, sagte der berühmte Nervenarzt,
die Kapazität, mit einem mahnenden Blick hinter dem
schiefsitzenden Kneifer. „Sie sollten etwas für Ihre Nerven tun. Die
ganzen Tage fiel mir schon Ihr Wesen auf. Ich möchte fast
vermuten, daß irgend etwas Außergewöhnliches – ich will nicht
aufdringlich erscheinen ...“
Schwedenklee schlug den Pelzkragen hoch, um sein Frösteln –
dieser Nervenarzt! – zu verbergen. Dann reckte er sich ein wenig
und lachte laut heraus, während er stehen blieb. „Was soll ich
haben?“ rief er etwas zu laut. „Bedenken Sie, schon morgens um
sieben Uhr kommt ein falscher telephonischer Anruf. Ich hatte
nachts gearbeitet und nur wenige Stunden geschlafen. Dann
kommen allein am Vormittag drei unangenehme Besuche. Es ist ein
Wahnsinn, in dieser Stadt zu leben!“
„Ja, dieses Berlin ist eine Hölle!“
„Eine völlig sinnlose Hölle – eine Hölle ohne jeden Scharm.
Bedenken Sie dagegen, zum Beispiel, Paris, eine Hölle mit Reizen ...“
„Mit fürchterlichen Reizen, Schwedenklee! Vielleicht ist
Swedenborgs Ansicht berechtigt, daß diese Erde überhaupt nichts
anderes ist als eine Art Fegefeuer, eine Vorhölle ...?“
„Swedenborg?“
„Ja, Swedenborg.“
Schwedenklee gestand nicht ein, daß er diesen Namen heute zum
erstenmal hörte.
„Oft scheint es mir, als ob diese Großstädte Exponenten der
Swedenborgschen Hölle seien: riesenhafte Kloaken, in die Tag und
Nacht, ohne Unterbrechung, der Schmutz rinnt, Bordelle,
Mördergruben, infernalische Verneinungen des göttlichen
Gedankens!“
Der kleine Arzt fröstelte.
„Ja, in der Tat, vielleicht leben wir mitten in der Hölle, ohne es zu
wissen! Vielleicht sind all unsere Freunde, die jetzt da droben Karten
spielen, nichts als Teufel, Gespenster, Verdammte, Verfluchte ...“
Bleich und erschöpft von der Stubenluft blinzelte der berühmte
Nervenarzt in Schwedenklees rotes Gesicht.
Plötzlich lächelte Schwedenklee und streckte dem Arzt die Hand
hin. „Hölle hin, Hölle her!“ rief er mit einem sieghaften Lächeln. „Das
Leben ist doch schön! Gute Nacht, Doktor!“
„Trotzdem“ – der Arzt berührte wohlwollend Schwedenklees Ärmel
– „sollten Sie sich etwas Ruhe gönnen. Gehen Sie doch in Ihre Villa
an der Ostsee!“
„Jetzt, im April? Sie ahnen nicht, Doktor, wie entsetzlich kalt es da
oben ist. Übrigens regnet es immer. Nein, danke herzlich!“
Schwedenklee stand und sah dem kleinen, unsicher gehenden
Arzt, der Kapazität, betroffen nach. Welch eindringliche
Ermahnungen! Und „Fegefeuer, Gespenster –“?
„Ja,“ sagte Schwedenklee, „vielleicht hat er sogar recht! Aber, was
für eine Welt wäre das – ein Betrug, nichts sonst! Und doch –?“
In tiefes Nachdenken versunken ging er weiter. Es half nichts, daß
er die vorübergehenden Frauen musterte, um sich zu zerstreuen. Ein
Paar herrische, schöne Augen leuchteten aus der feuchten
Dunkelheit der Bäume – vergebens.
Schwedenklee atmete die laue Luft ein, er blickte in das
knospende Geäst der hohen Bäume empor, sah die Sterne durch das
leichte, schillernde Gewölk am Himmel jagen – aber seine Gedanken
wurden düsterer und düsterer. Immer schwerer wurde die Last auf
seinem Herzen.
Endlich blieb er stehen und holte tief Atem.
„Ja,“ sagte er halblaut vor sich hin, „vielleicht sind wir in der Tat
von Gespenstern umgeben und vielleicht ist es wahr, daß die Toten
nach mir greifen!“ Und er nickte ein paarmal schwer mit dem Kopfe.
Wie? Schwedenklee?
 Wie ist es möglich, daß gerade er, Schwedenklee, der immer gut
Gelaunte, Strahlende, der vom Glück Umschmeichelte, von der
Melancholie übermannt wird?
 4

Beruhigend brennt die grüne Schirmlampe auf dem riesigen

Diplomatenschreibtisch. Besänftigend blicken all die vertrauten Dinge
des Arbeitszimmers. Dort die Büste der Nubierin. Sie lächelt
vertraulich, fast etwas verschämt.
Schon scheint das Düstere nicht mehr so drohend.
In weichen gefütterten Hausschuhen gleitet Schwedenklee über
den Teppich, sein Blick wandert über die Decke. Schwedenklee
schüttelt abwehrend den Kopf. „Es ist ja alles Unsinn!“ sagt er zu
sich. „Diese pathetische Phrase von den Toten – und auch das mit
dem kalten Hauch!“
In der letzten Zeit war es ihm zuweilen gewesen, als ob ihm ein
kalter Hauch ins Genick blase.
„Alles Unsinn! Es sind deine Nerven, mein Freund! Wie kann ein
Brief, ein unsinniger Brief – ja, wie ist es nur möglich?“
Schwedenklee bleibt stehen und mustert entschlossen den
riesigen Diplomatenschreibtisch. Plötzlich steuert er mit zwei, drei
großen Schritten auf den Schreibtisch zu und zieht, etwas
asthmatisch atmend, die unterste Schublade heraus.
Es ist das beste! Er war entschlossen, der Sache auf den Grund zu
gehen, da es sich als unmöglich herausstellte, darüber
hinwegzugleiten. Es war feige, keine Worte, nicht nachzuforschen!
Nein, heute hatte es ihm bei den Karten keine Ruhe mehr gelassen
...
Diese Schublade stellte er auf einen niedrigen Rauchtisch und
betrachtete, schon wieder etwas mutlos, den Wust von Karten,
Bildern, Briefen, Theaterzetteln. Sogar eine graue Seidenschleife
befand sich darunter.
 Schwedenklee warf sich in einen Sessel und streckte die Hand
nach einem der vergilbten Briefe aus. Aber schon erhob er sich
wieder. Er entkorkte eine Flasche Bordeaux und zündete sich
umständlich – um Zeit zu gewinnen – eine Zigarre an.
Ja, nun war er bereit!
„Eine von euch weilt also nicht mehr unter den Lebenden!“ sagte
er laut, um sich Mut zu machen, und blies heftig in die Zigarre. Eine
leise, aber nicht quälende, ja fast angenehme Trauer überkam ihn.
Ja, es ist sonderbar, er fühlte sich sogar als eine gewissermaßen
wichtige Persönlichkeit, weil eine jener Frauen, die er geliebt hatte,
schon ins Reich der Schatten entwichen war.
„Und sie gedachte meiner noch in ihrer letzten Stunde!“ Wieder
schwebte Schwedenklee in den gefütterten Hausschuhen hin und
her. Dann aber warf er sich in den Sessel und griff entschlossen
mitten in die vergilbten Briefe hinein.
Dieses graue Seidenband – o, so deutlich erinnerte er sich – vor
Jahren schmückte es Lissis blonden lockeren Haarschopf. Und es fiel
ihm ein: wie sie einmal unerwartet in sein Zimmer stürmte, es war
im Winter, Schneegestöber. Ihr Pelz war dick mit Schnee bedeckt –
und so, wie sie war, im beschneiten Pelz, schloß er sie in die Arme.
Noch heute fühlte er die stechende Kälte der einzelnen
Schneekristalle ... Und hier ist eine Karte von Lissi, aus Oberhof, Lissi
im Skikostüm.
Nein, Lissi, die Heitere, war es gewiß nicht! Lissi kann nicht
sterben! Sie saß jetzt irgendwo in Nizza oder Gardone in der Diele
eines Hotels und blies lächelnd den Rauch der Zigarette in die Luft.
Schwedenklee zog einen vergilbten Brief aus der Lade und begann
ihn mit hochgezogenen Brauen zu lesen. Er erinnerte sich an diesen
Brief nicht mehr! Wie? Er erinnerte sich auch nicht, jemals auf der
Rennbahn in Karlshorst gewesen zu sein? Der Brief war signiert: M.
Z.? Wer war M. Z.? Vorwürfe, Beteuerungen, Verdächtigungen,
Küsse – voller Interesse las er den Brief vom Anfang bis zum Ende.
Aber wie merkwürdig – und er erinnerte sich gar nicht mehr!
Schwedenklee schlug die Schenkel behaglich übereinander und
machte es sich im Sessel bequem: Diese Briefe, diese Erinnerungen
waren weder so langweilig, noch so erschreckend, noch so
unangenehm, wie er es befürchtet hatte.
Wo mochte, zum Beispiel, jetzt diese Martha sein, die ihn
Sonnabend ein Viertel vor acht im Foyer des Lessingtheaters
erwartete? Sie hatte wohl einen kleinen Beamten geheiratet und
schlief jetzt Seite an Seite mit ihrem Gatten. Breit und weich waren
ihre Hüften, eine schneeweiße, etwas volle Büste hatte sie, und
plötzlich erinnerte er sich an den Geruch ihres Körpers: süße,
frischgemolkene Milch. Martha schwärmte fürs Theater, wöchentlich
zweimal führte er sie aus. Dann soupierten sie irgendwo, um bei ihm
noch eine Tasse Kaffee zu trinken. Nie hatte er eine bescheidenere,
sanftere Frau gekannt.
„So geht das Leben dahin!“ sagte Schwedenklee und legte die
Karte zur Seite.
Wer war Otti? Unmöglich, sich rasch an alles zu erinnern. Sie
schrieb etwas von Halensee – ja, o richtig, es war Otti mit der
Matrosenbluse! Eine zierliche Stenotypistin, mit der er vor Jahren
eine kleine Liebelei unterhielt. Otti liebte es, in zweitklassigen
Lokalen zu tanzen und sich den frechen Blicken der Männer
preiszugeben, die sie erregten. Sie war eitel auf ihre Beine, edle,
rassige Beine, glatt und hart wie Elfenbein, und diese Beine stellte
sie gern zur Schau. Auf Zurufe antwortete sie mit seltener
Schlagfertigkeit, wobei sie das Stupsnäschen keck in die Luft warf.
Unaufhörlich wanderten die Blicke ihrer großen blassen Augen,
unausgesetzt auf der Suche nach neuen Abenteuern, neuen
Erregungen. Sobald aber er auch nur einen Seitenblick wagte –!
Verwirrend süß, die Ungerechtigkeit der Frauen!
Ihre Lippen waren breit und weich, dachte Schwedenklee, und sie
standen immer vor Erregung etwas offen. Ihre Brüste aber waren
klein und spitz, die Knospen waren deutlich unter der Bluse zu
erkennen und gerade darauf war Otti stolz.
„Hoffentlich aber haben wir Ottis Abschiedsbrief noch!“ Ja, er
erinnerte sich jetzt plötzlich, daß sie ihm einen solch amüsanten
Abschiedsbrief geschrieben hatte, seinerzeit, und er suchte ihn
hastig in heiterster Laune.
 Er hatte damals, als er mit dem Kompagnon das Haus am
Kurfürstendamm baute, das ihn beinahe ruiniert hätte, Otti in sein
Bureau genommen. Ein unverzeihlicher Fehler! Otti erschien, wann
es ihr behagte, saß rauchend bald auf diesem, bald auf jenem
Zeichentisch, kokettierte mit dem Kompagnon, zeigte allen
Besuchern ihre schönen Beine – kurz und gut, er mußte, so leid es
ihm tat, eines Tages ein offenes Wort mit ihr reden. Es gab eine
schreckliche Szene, an die er sich jetzt voller Behagen erinnerte.
Diese kleine Otti bebte vor Wut, und ehe er es sich versah, schlug
sie ihm mit ihrer kleinen, festen Hand ins Gesicht. Ja, tatsächlich!
Und dann schrieb sie ihm einen Brief, er entsann sich genau, einen
äußerst drolligen Brief.
Hier ist er!
Laut auflachend las Schwedenklee diesen Brief.
Ja, sie, Otti, wußte es schon vom ersten Tage an, daß sein Wesen
im Grunde genommen ordinär war, obgleich er sich immer so
aufspiele. Und wie geizig er doch sei: welche Vorwürfe – ein Dutzend
Seidenstrümpfe, zwei Paar Tanzschuhe, ein Sommerhut – nein, nicht
geizig, einfach schmutzig war er! Ja, sie, Otti, würde wohl nicht so
verrückt sein und ihm die tausend Mark, die er ihr geliehen hatte,
zurückzahlen, nein, für so wahnsinnig werde er sie gewiß nicht
halten. „Was die Ohrfeige betrifft,“ schloß Otti, „so wird es mir noch
in meiner letzten Stunde eine Befriedigung sein, daß ich Dich in Dein
hochmütiges, aufgeblasenes Gesicht geschlagen habe, auf das Du
Dir so viel einbildest.“
Noch in ihrer letzten Stunde! Schwedenklee lachte so laut, daß er
husten mußte und seine rote Zunge herausfuhr. „Auf deine
Gesundheit, Otti!“
Schwedenklee hatte nie Mangel an Frauen gelitten. Er war wohl
keine Schönheit, aber er war auch nicht häßlich, und wenn er
lächelte – seine Lippen waren voll und schön geschwungen –, so
erhielt sein Gesicht sogar einen angenehmen Ausdruck. Er war
elegant und er hatte stets Geld. Er besaß eine schöne, behagliche
Wohnung und er war gesund. In der Tat, Schwedenklee konnte den
Frauen etwas bieten. Schon als Student hatte er vor den Kameraden
einen nicht zu unterschätzenden Vorsprung gehabt. Er verstand es ja
ebenso gut wie sie, schöne Worte zu machen und schlagfertig zu
antworten, aber es reichte bei ihm noch etwas weiter: zu einem
kleinen Blumenstrauß, zu einer Einladung in eine Konditorei – siehst
du!
Schwedenklee wählte für gewöhnlich die Frauen aus der sozialen
Schicht, die gerade etwas unter der seinen lag. Diese Frauen
schienen ihm am umgänglichsten. Natürlich gab es auch
Ausnahmen, und zuweilen mußte er alle seine Energie aufbieten, um
sich nicht zu verlieren. Man denke an die Base!
Nein, nein, Schwedenklee hatte geschworen, seine Freiheit nie
aufzugeben! Man konnte als Junggeselle tun und lassen, was man
wollte. Willst du ein Theater besuchen, so gehst du, ziehst du im
letzten Augenblick doch das Café vor, nun so wendest du noch im
Foyer um. Du willst ein paar Tage reisen, gut, du reisest, du wählst
Reisetag und Zug ganz nach deinem Belieben. Einmal verheiratet, ist
es mit aller Freiheit vorbei. Jeder deiner Schritte wird beobachtet,
wann du dich niederlegst, wann du aufstehst, alles. Deine Frau
erkrankt, das Kind hustet, schon telephonierst du erschrocken nach
dem Arzt. Es könnte ein Unglück geschehen – nein, daran wollte er
gar nicht denken! Als er die Mutter verlor, war er ein leichtsinniger
Student, der es nicht allzu schwer nahm – als sein Vater starb, war
er schon gereift genug, um sich zu beherrschen. Es war sein letzter
wirklicher Schmerz. Nein, nein, Schwedenklee hatte alles genau
durchdacht, es war am besten so, wie es war, und damit genug! Er
wollte keine Aufregungen, keine Spannungen, keine Qualen.
Konnte man – um nur etwas zu sagen – als Ehemann mitten in
der Nacht in einem bequemen Sessel sitzen, bei einer Flasche Wein
und einer Zigarre, und in alten Liebesbriefen und Erinnerungen
wühlen?
Wie? Versuch’ es. Und dazu, solange man wollte, es konnte
Morgen werden ...
Da war noch diese und jene Freundin – diese und andere, in Rom,
in Paris, in Wien – alle zogen sie vorüber: jung, heiter, strahlend.
Tanzfeste, Ausflüge, eine Reise im Schlafwagen, eine Dampferfahrt
nach Kopenhagen, ein kleiner Abstecher ins Holländische ...
 Alle diese Freundinnen gehörten mit wenigen Ausnahmen jener
bequemen sozialen Schicht an, die um ein Etwas tiefer lag als
Schwedenklees Gesellschaftsklasse. Es waren Stenotypistinnen,
Modistinnen, Erzieherinnen, kleine Schauspielerinnen, Tänzerinnen,
sogar eine Dame vom Varieté war dabei. Sie alle waren gierig nach
dem Leben, wollten zuweilen in einem eleganten Restaurant
dinieren, wie feine Damen, wollten zu einem Rennen fahren, im Auto
über den Kurfürstendamm rollen, wollten eine Oper besuchen, um
vor ihren Freundinnen damit prahlen zu können. Eine kleine Reise,
lieber Himmel, wie wunderbar, ein Paar Sommerschuhchen mit
Seidenstrümpfen, herrlich! Ein Ausflug aufs Land, mein Gott, sie
wurden sofort um Jahre jünger, dreizehn, plapperten wie Kinder. Sie
genossen jede Kleinigkeit, das Nichts selbst, diese guten Geschöpfe,
schlürften, waren berauscht. Sie schrien vor Erregung, wenn das
Pferd, auf das sie gesetzt hatten, mit einer vollen Länge in den
Einlauf einbog, und zerbrachen den Sonnenschirm, wenn es knapp
vor dem Ziel noch geschlagen wurde.
Es war nicht schwierig, ihre Bekanntschaft zu machen.
Schwedenklee war, es ist die Wahrheit, in gewissem Sinne
schüchtern, und das Herz schlug ihm im Halse vor jedem Abenteuer,
aber es gelang fast immer. Schwieriger war es schon, sie, wie er es
nannte, „in der rechten Distanz zu halten“. O, oft war es eine Kunst!
Sie durften in ihren Gefühlen und Ansprüchen niemals eine gewisse
Linie überschreiten, die Beziehungen mußten leicht und immer
unverbindlich bleiben. Und doch lag es im Wesen dieser
Sehnsüchtigen, diese Linie stündlich, in jeder Minute zu verletzen.
Das schwierigste aber war es, sie zu verabschieden! Ein
unerfreuliches Kapitel. Wirkliches oder geheucheltes Erkalten der
Empfindungen, eine vorgebliche Geschäftsreise, etwas
Schauspielerei – und, wenn es sein mußte, sogar Härte! Es fiel
Schwedenklee nicht leicht, Härte zu zeigen. Zorn, Tränen,
verzweifelte Briefe, Drohungen. Nein, nicht immer ging es so leicht
und einfach wie bei Otti, die einfach auf ihn einschlug und einen
rasenden Brief schrieb.
Schwedenklee saß hingestreckt in dem bequemen Ledersessel, die
Beine übereinandergeschlagen, die Zigarre im Mund, und sah zur
Decke empor. Der Wein ging zur Neige, er war in eine warme,
heitere Laune geraten. Die Stunden flogen. Lächelnd, träumerisch
war Schwedenklees Miene.
Gestehen wir es nur, er hatte es verstanden, sein Leben zu
genießen! Seine Freundinnen waren alle gute, liebe Geschöpfe
gewesen, auch Otti natürlich, er hatte wenige, fast keine
Enttäuschungen mit ihnen erlebt.
Sonderbar, er hatte sie fast alle vergessen! Er erinnerte sich kaum
noch an ihr Aussehen, die Züge waren in seinem Gedächtnis
verblaßt. Welche Farbe hatten, zum Beispiel, ihre Augen? Die Farbe
der Haare war einigermaßen haften geblieben, ähnlich wie die Haare
sich in den Gräbern am längsten erhalten, wenn alles andere längst
vermodert ist. Einzelne hatten nicht den geringsten Eindruck
hinterlassen, von anderen wußte er nur, daß sie groß oder daß sie
klein und zierlich waren. Von Otti hatte er am klarsten die
Matrosenbluse in Erinnerung und, wie gesagt, die herrlichen Beine.
Von einer Tänzerin wußte er noch, daß sie hohe Straßenstiefelchen
trug, aus einem Leder wie graue rauhe Glacéhandschuhe. Von einer
Französin war kaum mehr in seinem Gedächtnis verblieben, als daß
sie einen Bleistift mit den nackten Zehen hochheben konnte.
Für eine gewisse Ellen, eine Schauspielerin, hatte er fortwährend
Villen und Landhäuser entwerfen müssen, mit einem
Schwimmbassin, das in ein Palmenhaus eingebaut war. Er erinnerte
sich an Ellens zarte Fingerspitzen, die leise bebten, wenn sie ihn
berührte. Diese Ellen errötete leicht und sehr merkwürdig. Ihre Haut
war sehr zart, und die Röte überflog ganz unvermittelt wie ein
Gluthauch ihr Gesicht und bedeckte auch Hals und Nacken. Nichts
sonst fiel ihm in dieser Sekunde von Ellen ein.
Eine andere quälte ihn eifersüchtig, und ihre schwarzen Augen
funkelten. Die Tänzerin sah er vor sich, wie sie im Varieté auftrat,
abwechselnd kalkgrün und korallenrot beleuchtet. Ihre Züge waren
ihm entfallen, aber er erinnerte sich, daß sie beim Souper nach dem
Theater immer noch etwas Farbe von der Schminke um die
Augenlider hatte. Das sah ungeheuer interessant aus.
Berta mit dem pechschwarzen, schnurgeraden Scheitel hatte die
Unart an sich, in den Restaurants unbemerkt kleine Brotkugeln nach
den Nachbartischen zu werfen. Sie trug eine Narbe von einer
Blinddarmoperation am Leibe, und diese silbrige Narbe sah er ganz
scharf vor sich. Die Dame vom Varieté, die er bald verabschiedete,
weil sie täglich größere Ansprüche stellte, liebte es, eine
schwermütige Miene anzunehmen, während sie ihn mit ihren glasig-
glänzenden braunen Tieraugen ansah, um dann seufzend zu lächeln
und ihr herrliches Gebiß zu zeigen.
Hier, siehst du, Schwedenklee, ist ein kleines, von schwarzen
Haaren umflattertes Gesichtchen, das große Tränen in den schönen
Augen hat. Und hier, Schwedenklee, da ist sie, wie hieß sie doch
gleich, sie konnte so wunderbar lachen! Sie war eine Virtuosin im
Lachen, sie steckte die Nachbartische an, sie gab Gastspiele im
Lachen – ach Gott, wie hieß sie denn? Sie ging von dir zu einem
Karikaturenzeichner über, der sie dann hundertmal zeichnete, in
allen Witzblättern war sie zu sehen. Es wird ihr wohl nicht schlecht
ergangen sein – wir wünschen es ihr.
Und da: Hanny im Schlafwagen – mit der kleinen blauseidenen
Nachthaube ...
Schwedenklee saß und träumte. Er war so tief in Gedanken
versunken, daß er regungslos zur Decke blickte und in der Tat mehr
schlief als wachte. Aus seinem vollen, satten Gesicht stieg
kerzengerade der Rauch der Zigarre.
Die Gesichte glitten ineinander; ein Rücken wie aus
frischgefallenem Schnee geformt, ein Haarschopf, der im Nacken
funkelt, rasche, flüchtende nackte Füße, ein Knie, wie aus der Hand
Rodins, zitternde Hände, die das Haar aufstecken ...
Sonderbar! Schwedenklee sah fast keine seiner Freundinnen
wieder, sobald er sich von ihnen getrennt hatte. Berlin verschlang
sie, die Welt, das große Leben verschlang sie, ohne daß sie je wieder
auftauchten. Sie verwehten wie die Blätter im Walde.
Schwedenklee sitzt inmitten einer Wolke von Träumen, der Zauber
versunkener Herrlichkeiten hat ihn gebannt. Das Leben! Gab es
etwas Wunderbareres als dieses verwirrende, unverständliche,
dreimal verfluchte, dreimal gepriesene Leben? Er lächelt, und sein
Lächeln verändert sich nicht mehr. Er ist glücklich.
 5

Aber Rosa?“
Plötzlich sprang Schwedenklee auf und ging mit erregten Schritten
in den gefütterten Hausschuhen hin und her. Es war schon zwei Uhr
morgens. Erst in diesem Augenblick war ihm wieder eingefallen, aus
welchem Anlaß er nach den verblaßten Briefen gegriffen hatte.
„Aber Rosa? Wer ist diese Rosa?“
Unter all den Frauen gab es ja keine Rosa weit und breit! Wer war
also diese Rosa, von der ihm dieser Unbekannte geschrieben hatte?
Geschrieben hatte –? Also hatte Augusta, die sonst wenig scharf
beobachtete, doch recht, daß ein Brief – irgendein sonderbarer Brief
– die Veränderung in Schwedenklees Laune hervorgerufen hatte!
„Wie kommt dieser Unglückselige überhaupt dazu, mir, einem
Unbekannten, zu schreiben?“ fuhr Schwedenklee fast drohend fort.
In großer, ja förmlich unbegreiflicher, krankhafter Erregung eilte
Schwedenklee im Zimmer auf und ab.
„Wie kommt dieser Unbekannte dazu?“
„Vielleicht aber hat diesen Unglückseligen der Verlust seiner Gattin
um den Verstand gebracht – wie?“
„Rosa? Rosa? Aber, zum Satan, es gibt ja keine Rosa!“
„Vielleicht habe ich sie einmal gekannt, möglich – ganz flüchtig,
vielleicht gab sie einen falschen Namen an – alles ist möglich!“
„Möglich, ja, natürlich! Was sollte sie dann aber bewegen, sich
nach Jahren, in der Stunde ihres Todes, meiner zu erinnern –?“
Ja, unbegreiflich, unverständlich, ganz unerklärlich!
„Oder –?“ Schwedenklee blieb mit einem triumphierenden Lächeln
stehen.
O ja! Auch das war recht gut denkbar!
 Vielleicht war dieser Unglückselige gar kein fassungsloser
Ehemann, der seine Frau betrauerte? Wie? Vielleicht war er nicht
mehr und nicht weniger als ein Schwindler, der einen Pumpversuch
schlau einleitete? Ein Erpresser? Schwedenklee war geneigt, sich
wegen seines Scharfsinns selbst zu bewundern. „Man braucht nur
die Zeitungen zu öffnen, beim großen Gott, welche Sorte von
Spitzbuben haust in diesem Berlin! Sie simulieren epileptische Anfälle
in der Untergrundbahn, um die mitleidigen Reisenden ungestört
ausplündern zu können – sie verfallen auf die unmöglichsten Dinge!
Ein Freund übersendet dir ein Billett zur Oper, du gehst hin, und
unterdessen plündern sie dir die Wohnung aus.“
„Nein, mein Freund, du bist an den Unrechten gekommen. So
einfach ist die Sache mit mir nicht!“ rief Schwedenklee mit
überlegenem Lächeln aus. Aber schon klang sein Lachen wieder
unsicher, schon wurde er wieder nachdenklich.
Der Ton dieser Briefe! Denn Schwedenklee hatte ja nicht einen, er
hatte eine Reihe von Briefen erhalten – seit Wochen erhielt er Briefe!
Und diese Briefe waren es ja, die in der letzten Zeit seinen
Gemütszustand so sehr beeinflußten. Der Ton dieser Briefe war ohne
Zweifel – echt!
„Prüfen wir, überlegen wir,“ rief Schwedenklee eifrig, schon etwas
berauscht – „weshalb diese unsinnige Beunruhigung? Wir werden,
wenn es nicht anders geht, den Unglückseligen selbst aufsuchen. Ja,
selbst, das wird das allerbeste sein!“
In dieser Minute war Schwedenklee außergewöhnlich mutig und
entschlossen. Er kam sich in seiner Entschlossenheit fast verwegen
vor – beinahe wie Don Juan, der mitten in der Nacht im Friedhof das
Standbild des Comturs zu Tische lädt.
„Gehen wir der Sache auf den Grund!“
Aus einem Winkel der Bibliothek zog er einen Stoß Briefe hervor.
Fast überkam ihn wieder Kleinmut. Wozu schließlich? Was
kümmerte ihn das Schicksal dieses Unbekannten?
Schwedenklee hatte diese Briefe nie richtig gelesen – nur
durchflogen, unwillig, ungehalten – und doch im Tiefsten, ohne
ersichtlichen Grund! erschrocken. Drohung des Schicksals ging von
diesen Blättern aus und dumpfe Traurigkeit. Sie rochen nach welken
Kränzen, und diesen Geruch hatte er noch deutlich in der Erinnerung
von der Beerdigung des alten Schwedenklee her. Er haßte diesen
Geruch von Moder, er haßte diese Kränze in den Blumengeschäften,
mit den Aufschriften in bleicher Silberschrift auf den schwarzen
Seidenbändern. Er schloß sogar die Augen, wenn er an einem jener
Geschäfte mit den häßlichen plumpen Särgen vorbeiging, deren
öffentliche Ausstellung die Polizei, die sich sonst in alles mischt,
verbieten sollte. Diese Särge waren in der Tat solch unglaubliche
Monstrositäten, daß Schwedenklee sich einmal die Mühe genommen
hatte, einige Särge zu entwerfen, die nobel und würdig aussahen,
wie sie eigentlich sein sollten. Er haßte wie gesagt alles, was mit
dem Tode und den Zeremonien der Bestattung zusammenhing. Vor
zwei Jahren war einer der Kartenspieler gestorben, der Doktor Helm,
ein Landgerichtsrat, ein sympathischer Mann – einige der Spieler
waren zur Beerdigung gegangen, aber Schwedenklee hatte sich wohl
gehütet.
Er liebte es nicht, an den Tod zu denken, nein, ganz im Gegenteil,
diese Gedanken haßte er! Manchmal erwachte er mitten in der Nacht
und mußte daran denken, daß auch er einmal sterben mußte! Diese
entsetzliche Stunde wird kommen, so sicher wie etwas – er sah sich
liegen, er röchelte noch, eine Pflegerin stand am Bett mit einer
Kompresse. Oh, es konnte auch ganz anders sein! Zum Beispiel, ein
Autobus konnte ihn auf der Potsdamer Straße zermalmen. Diese
Gedanken folterten ihn zuweilen derart, daß er Licht machen mußte.
Und doch, die Menschen lebten dahin, lachten, rauchten Zigarren,
spielten Billard, tanzten – unbegreiflich!
Aus all diesen Gründen machte er sich hart und gefühllos gegen
das Geschick dieses Unglücklichen, den der Schmerz gezwungen
hatte, an ihn, Schwedenklee, zu schreiben.
„Nun wohl“, sagte Schwedenklee und setzte sich, ergeben in sein
Schicksal, zurecht. „Dieser hier, ohne Trauerrand, war der erste!“
Schwedenklee holte tief Atem.
„Mein Herr!“ Schon diese fahrige Schrift, diese Gespenster von
Buchstaben! „Ich fühle mich gedrängt, Ihnen mitzuteilen, daß eine
Frau, die wir beide geliebt haben – heute abend nach langem
Krankenlager zur ewigen Ruhe heimgegangen ist. Das edelste
Frauenherz hat aufgehört zu schlagen. Rosa hielt ein Leben lang die
Freundschaft, die sie einst mit Ihnen verband, hoch in Ehren. Es
wird Ihnen gewiß ein Bedürfnis sein, der edlen Verblichenen die
letzte Ehre zu erweisen. Die Beisetzung findet am Freitag, den 21.,
statt ... In tiefstem Schmerz – Edgar Blank, ehemaliger
Hofopernsänger.“
Schwedenklee las den Brief mit fast der gleichen Verwunderung,
Verblüffung, dem gleichen leisen Grauen, wie vor Wochen, da er ihn
erhalten hatte. In einer Art von leichter Lähmung hielt ihn der Sessel
fest.
Was sagt man dazu? Er war natürlich nicht zur Beerdigung
gegangen, wie sollte es ihm in den Sinn kommen – eine ihm völlig
Unbekannte! Als er seinen Vater begraben hatte, hatte er sich
geschworen, nie mehr einer solchen Zeremonie beizuwohnen, wenn
es sich irgendwie vermeiden ließ. Unvergeßlich war ihm dieser
schreckliche Vormittag. Der alte Schwedenklee ließ sich verbrennen.
Im Krematorium warteten schon mehrere Parteien, und
Schwedenklee geriet, noch heute empfand er die Peinlichkeit, zuerst
in eine falsche Gruppe von Seidenhüten. Alle hatten Eile. Dann sank
der Sarg in die Versenkung. Der alte Schwedenklee hatte noch im
Alter den typischen Kopf eines Maurers gehabt, mit etwas zu langem
Schnurrbart, etwas abstehenden Ohren und verwittertem Gesicht.
Als der Sarg sank, verwandelte sich, so schien es Schwedenklee, der
ganze Sarg in den Kopf des Vaters. Schwedenklee jagte voller
Schrecken nach Hause, und noch heute sah er, wie der langsam
sinkende Sarg sich in den Kopf des Vaters verwandelte, noch heute
hörte er das fürchterliche kalte Klirren der sich schließenden
Eisenplatten.
Der zweite Brief des Unglücklichen schilderte ausführlich die
Beerdigung der Unbekannten. „Wir haben heute Rosa zu Grabe
getragen. Sie sind nicht gekommen! Es hätte die Tote geehrt. Aber
vielleicht sind Sie gar nicht in Berlin. Vielleicht hat mein erster Brief
Sie überhaupt nicht erreicht! Wir waren nur zwei im Trauergefolge,
von den Trägern abgesehen. Ein jämmerliches Trauergefolge – und
doch jubelten Rosa früher auf der Bühne Tausende zu – vergessen
und einsam ging sie zur Ruhe, und selbst Sie, den sie ihren Freund
nannte, sind nicht gekommen ...“
Diesen Brief hatte Schwedenklee vor Wochen, als er ihn empfing,
entsetzt zur Seite gelegt, ohne ihn zu Ende zu lesen. Der
Briefschreiber verlor sich selbstquälerisch in all die traurigen
Einzelheiten: der Regen, der Schmutz, die Grabsteine, der Trott der
Sargträger, das lehmige Grab –.
„– ich schäme mich nicht, Ihnen zu bekennen, daß mich der
Schmerz übermannte, als der Sarg hinabglitt. Ich schrie und fiel zu
Boden ...“
Schwedenklee war erbleicht und wischte sich die Stirn ab. Er ging
auf und ab in seinen weichen Schuhen und suchte Beruhigung bei
einer neuen Zigarre. Man durfte nicht vergessen, daß ein
Unglücklicher diesen Brief schrieb!
Aber Rosa? Ja, bei Gott, wer sollte –?
Vielleicht war es ein Mißverständnis, eine Verwechselung –? Aber
nein, nein, in einem der Briefe schrieb der Unglückliche, daß Rosa
mit Schwedenklee in dem und dem Jahre in Paris
zusammengetroffen sei. Er, Schwedenklee, habe damals im Hotel
Panthéon gewohnt. Alles stimmte.
In einem der zuletzt eingetroffenen Briefe drückte der Unbekannte
seine Verwunderung darüber aus, daß Schwedenklee sich in
Stillschweigen hülle. „Ich habe mir in meinem letzten Brief“, schrieb
er, „die Freiheit genommen, anzudeuten, daß ich glücklich wäre – so
weit ich es in dieser Zeit sein kann – wenn ich Sie aufsuchen dürfte.
Ich habe zwei Wochen vergebens gewartet. Sie zögern, aus
welchem Grund? Ich weiß, daß Sie in Berlin sind. Vielleicht erscheine
ich aufdringlich. Befürchten Sie nichts. Ich befinde mich in tiefer Not,
ich bin ein Bettler, aber nichts läge mir ferner, als Rosas
freundschaftliche Beziehung zu Ihnen zu beflecken. Was ich
wünsche, ist, einen Menschen zu sprechen, der Rosa kannte, den
Rosa liebte – ich wiederhole: liebte!“
Schwedenklee schüttelte den Kopf. Immer wirrer, dunkler schien
das Labyrinth. Ein Unglücklicher wollte sich in seinem Schmerze an
ihm aufrichten!
 Den Rosa liebte –? War es möglich, daß eine der vielen, die durch
sein Leben gegangen waren, noch nach zwanzig Jahren seiner
gedachte? Daß eine der vielen, die er „in der nötigen Distanz hielt“,
für ihn eine wirkliche Liebe empfunden haben sollte?
„Ich werde ihn besuchen“, beschloß Schwedenklee mit feierlichem
Ernst. „Morgen – und wenn es morgen nicht geht, spätestens
übermorgen.“ Er war plötzlich von schwerer Müdigkeit überwältigt
worden. Der Wein, die Zigarren ...
Fast augenblicklich schlief Schwedenklee hinter den hellgrünen
Seidenvorhängen ein.
 6

Schwedenklee hatte in dieser Nacht verworrene, aber angenehme

Träume: Fremde, phantastische Landschaften, transparente Wälder,
glühende Meere, fremde, bezaubernd schöne Städte, unwirklich, wie
aus Alabaster geschnitten, sonderbare Begegnungen, seltsame
Abenteuer, Frauen, bekannte und fremde, eigenartig, aber alle in
Tun und Gefühl nach ihm, Schwedenklee, strebend. Er war umdrängt
von Zuneigung, von Bewunderung, von Liebe, es war ein großer und
einziger Reichtum, man verschwendete sich an ihn. Er genoß diese
Bevorzugung, sie schien ihm selbstverständlich, und gerade der
Umstand, daß sie selbstverständlich schien, erfüllte seine Seele mit
Ruhe und Heiterkeit.
Trotz der angenehmen Träume erwachte Schwedenklee spät am
Morgen in gereizter Laune und mit schmerzenden Schläfen. Er nahm
sein Bad, und von der Badewanne aus gab er das dreimalige
Klingelzeichen zum Frühstück, so scharf und hart, daß Augusta
genau wußte, woran sie war. In grau- und weißgestreiftem seidenen
Pyjama betrat Schwedenklee das Speisezimmer. Beschwörend hatte
Augusta den Frühstückstisch gedeckt: Lachs und Appetitsild, Oliven
und gekochte Eier.
Schwedenklee näherte sich dem Tisch mit gerunzelten Brauen. Ein
Brief! Wieder ein Brief mit den Gespensterbuchstaben! Mit zitternder
Hand nahm ihn Schwedenklee auf.
„Sie verschmähen es, mir zu antworten. Sie ahnen wohl kaum,
daß ich Ihnen unter Umständen Mitteilungen machen könnte, die für
Sie von Wichtigkeit wären. Ich werde mir die Freiheit nehmen, bei
Ihnen anzurufen, und hoffe, daß Sie einer Begegnung nicht länger
ausweichen.“
 Schwedenklee war an diesem Morgen schonungsbedürftig. Er
hatte in der Nacht eine Flasche schweren Bordeaux getrunken –
hingerissen von den Erinnerungen, er hatte ein halbes Dutzend
Zigarren geraucht. Er war übernächtig, abgespannt, und seine
Schläfe schmerzten.
Ohne zu denken, ohne die Herrlichkeiten des Frühstückstisches zu
beachten: Lachs, Appetitsild, Oliven, stürzte er an den Schreibtisch
und schrieb mit wütender Hand, ihn endlich gefälligst mit diesen
sinnlosen Zuschriften verschonen zu wollen. „Sie mögen der Ansicht
sein, daß Sie mir wichtige Mitteilungen zu machen haben, behalten
Sie diese Mitteilungen für sich, ich lege nicht den geringsten Wert
darauf.“
Fort, Rohrpost – augenblicklich!
Augusta zitterte, sie hatte ihren Gebieter nie mit solch zornrotem
Gesicht gesehen.
„Das überschreitet doch alle Grenzen!“ schrie Schwedenklee
wütend.
„Welche unverschämte Zudringlichkeit! Besuchen, habe ich gesagt,
ich will ihn besuchen? – Aber ich bin doch kein Narr!“
Nun, nachdem er seinem Herzen Luft gemacht hatte, schmeckten
all die Leckerbissen des Frühstückstisches plötzlich wunderbar. Der
Ärger verflog, und Schwedenklee vertiefte sich in die Zeitung.
Sein Unmut verrauchte vollends. Der Ausbruch von Raserei kam
ihm nun selbst lächerlich vor. Als er das Frühstückszimmer verließ,
hatte er sich soweit wiedergefunden, daß es ihn befriedigte, den
zudringlichen Brief noch einmal in die Hand zu nehmen. Offenbar
hatte der Unbekannte dieses letzte Schreiben in der größten
Erregung hingeworfen. Die Buchstaben waren kaum zu entziffern.
Mit einem verächtlichen Lächeln riß Schwedenklee den Brief mitten
durch – die Antwort würde ihre Wirkung nicht verfehlen, er hätte
schon lange Schluß machen sollen.
Zu seinem Erstaunen entdeckte er aber plötzlich auf der Rückseite
des Briefbogens eine Nachschrift!
„Ihr mir so unverständliches Verhalten, Ihre unbegreifliche
Gleichgültigkeit kann ich mir nur so erklären, daß Sie sich offenbar
nicht mehr entsinnen, wer Rosa ist – oder leider – war, dieser
Gedanke zuckt eben durch mein krankes Gehirn! Rosa, meine
geliebte Frau, die ich, selbst dem Tode nahe, betrauere, war eine
geborene Rosa Ellen Fröhlich, ihr Bühnenname lautete Rosa Froh.“

Eine leise Lähmung befiel die Hand, die den Brief hielt. „Ellen
Fröhlich!“ sagte Schwedenklee leise. „Dieses reizende Geschöpf! Sie
also ...“
Ein leises flüchtiges Bedauern, andere Empfindungen der Trauer
löste diese Mitteilung nicht aus. Diese lebenslustige Frau, für die er
Villen und das berühmte Schwimmbassin entwerfen mußte! Sie, die
so sonderbar rasch errötete, die Röte überzog sogar den Nacken –
diese Arme, sie schien nicht glücklich geworden zu sein ...
Und er, dieser Törichte, der sein Gehirn selbst ein krankes Gehirn
nannte, hätte er ihm nicht schon früher sagen können, wer sich
hinter dieser Frau Rosa Blank versteckte?
Schwedenklee fühlte sich ordentlich erleichtert. Die Ungewißheit,
das Grübeln wider Willen hatten ihn gemartert. Was hatte er weiter
mit der ganzen Sache zu schaffen? Er hatte vier Wochen lang, oder
vielleicht sechs, eine Liebschaft mit dieser Frau gehabt, eine kleine
reizende Liebelei, vor achtzehn, zwanzig Jahren – damals in Paris –
das war alles.
Er instruierte Augusta, daß heute vormittag ein gewisser Herr
Blank anrufen werde. Sie möge sagen, er sei auf unbestimmte Zeit
verreist.
In bester Laune kleidete er sich an, um auszugehen. Seit langen
Tagen kam endlich die Sonne wieder durch.
Schwedenklee war gerade mit der Toilette fertig, als das Telephon
klingelte.
Er öffnete die Türe und hörte Augusta mit weinerlicher Stimme
einigemal wiederholen, daß der Herr Oberbaurat verreist sei.
Offenbar gab sich Blank mit dieser Auskunft nicht zufrieden.
Augusta geriet in große Erregung. „Unverschämte Leute gibt es
schon!“ rief sie aus, als sie abgehängt hatte.
 „So und damit ist die Sache erledigt“, dachte Schwedenklee und
begab sich in ausgezeichneter Laune zu seinem Schneider in der
Charlottenstraße.
Bei diesem Schneider in der Charlottenstraße – einer großen Firma
– war eine junge Dame, ein Fräulein Wiedehopf, als Buchhalterin
tätig. Die dicken, glänzend braunen Flechten turmartig über dem
heiteren, offenen Gesicht aufgebaut, die Fingernägel glänzend
poliert, duftend nach Frische, wie aus dem Ei geschält, ohne das
kleinste Staubkörnchen – auf diese junge Dame hatte Schwedenklee
seit einiger Zeit ein Auge geworfen.
„Ich lebe zu stumpfsinnig“, sagte er zu sich, als er
dahinschlenderte. „Immer das ewige Kaffeehaus. Dieses Leben
bekommt dir nicht, Schwedenklee. Wir werden diese kleine
Wiedehopf heute abend zu ‚Figaros Hochzeit‘ einladen.“
Unterwegs löste er Karten zur Oper, und obwohl die Schar der
Verkäufer und Zuschneider diesen weiblichen Schatz mit
eifersüchtigen Blicken bewachte, hatte er Fräulein Wiedehopf, ohne
daß es irgendwie auffiel, beim Hinausgehen zu ‚Figaros Hochzeit‘
eingeladen. Man mußte es nur verstehen.
 7

Eine ganze Woche blieb Schwedenklee dem Kaffeehause fern.

Theater, Ballhäuser, Bars, sogar in ein Kino führte er die junge Dame
mit den turmartig aufgebauten Haaren und den glänzenden
Fingernägeln.
Diese kleine Wiedehopf war verlobt, nahezu verlobt, der
Auserwählte war zur Zeit auf Reisen – wie oft hatte er das schon
gehört! Sie spielte die Dame, ließ sich verwöhnen, lockte an, wehrte
ab – sie tat, bei Gott, wie eine Generalstochter ...
Als Schwedenklee nach so langer Abwesenheit wieder das
Kaffeehaus aufsuchte, fand er die Spielergesellschaft von einer
neuen Spielwut besessen wieder. Man hatte die Karten verlassen und
war zum Billard übergegangen.
Man spielte „vom roten“. Jeder Billardspieler kennt dieses Spiel.
Die Karambolage wird nur dann gezählt, wenn der rote Ball zuerst
getroffen wurde. Es spielten drei bis vier der besten Spieler, und auf
sie wurde gesetzt wie auf Pferde.
Die Ärzte, die Rechtsanwälte, die Kaufleute, Spieler und Kiebitze,
Kellner saßen und standen in dichten Reihen um das Matchbillard
herum, in atemloser Spannung jeden Stoß verfolgend.
Schwedenklee wurde freudig begrüßt.
„Wie gut Sie aussehen, Schwedenklee!“ rief der Nervenarzt
Wittmann. „Sie waren also doch verreist!“
„Nein, ich war hier, habe gearbeitet und abends ein bißchen
Zerstreuung.“
„Sie haben Ihr altes Aussehen wiederbekommen, prächtig!“
„Ah, der Herr Oberbaurat. Nun wird es interessant! Kellner, das
Queue des Herrn Oberbaurat!“
 Sofort stiegen die Einsätze ums Dreifache.
Einige Abende hintereinander spielte Schwedenklee hier vier, fünf
Stunden „vom roten“. Es wurden hohe Summen umgesetzt. Seine
Kopfstöße, Rückzieher, Zwei- und Dreibänder riefen lautes
Händeklatschen hervor.
Schwedenklee war bei bester Laune. Selbst das graue kreidige
Antlitz des alternden Künstlers, der nun häufiger ins Café kam,
störte ihn in seinem jetzigen Gemütszustande nicht mehr. Er genoß
den Triumph. Nach dem dritten Abend ließ er seinen
schwarzseidenen weitärmeligen Billardkittel von Augusta ins
Kaffeehaus bringen, und nun konnte man fast meinen, es mit einem
Billardchampion zu tun zu haben. Er mußte seinen Gegnern zuerst
zwei Points auf zehn vorgeben, sodann drei. Je länger er spielte,
desto vollendeter wurde sein Spiel.
„Schwedenklee ist in großer Form!“ Man tuschelte.
Es war Schwedenklee äußerst angenehm, für einige Abende
Zerstreuung gefunden zu haben: es war gewiß das beste Mittel, den
Hochmut der kleinen Wiedehopf zu beugen, wenn er eine Woche
lang nichts von sich hören ließ. Diese Methode nannte er die
Methode des „Aushungerns“, im Gegensatz zur Methode der
„Belagerung“, die darin besteht, ununterbrochen um die geliebte
Frau zu werben, so daß sie – wie Schwedenklee sich ausdrückte –
überhaupt „nicht mehr zur Besinnung kam“.
In der Tat, die Methode des Aushungerns schien Erfolg zu
versprechen. Fräulein Wiedehopf wurde mürbe, schrieb ein violettes
Kärtchen: Weshalb hört man nichts mehr von Ihnen? Sind Sie
verstimmt?
O nein, nein, gar nicht verstimmt, gnädiges Fräulein Wiedehopf.
Ganz im Gegenteil! In vorzüglicher – ich wiederhole: vorzüglicher
Laune.
Zwei Tage beantwortete Schwedenklee das Billett gar nicht. Dann
schrieb er einige höfliche Zeilen: gesellschaftliche Verpflichtungen –
in einigen Tagen aber würde er wieder zur Verfügung sein.
„Sonderbare Wesen sind doch diese Frauen!“ dachte
Schwedenklee, als er nach dem Billardspiel nach Hause ging und den
gleißenden Vollmond über den Dächern betrachtete. „Zeigt man
ihnen seine Verliebtheit, so neigen sie augenblicklich dazu, ihre
Macht zu mißbrauchen, zeigt man Zurückhaltung, so lassen sie
sofort wieder alle ihre Künste spielen. Merken sie, daß man sich
zurückziehen will, so entdecken sie plötzlich ihre große Liebe. Ja, wie
soll man sich bei ihnen zurechtfinden?“
„Heiratet man sie, so ist man vollkommen verloren! Sieh dich doch
um, Schwedenklee – die Ehen all deiner Bekannten und Freunde, mit
ganz vereinzelten Ausnahmen? Gleichgültigkeit, Untreue, Kampf bis
aufs Messer, Lüge.
Ja, wie soll man es anstellen? Etwas ist hier sicher nicht in
Ordnung, das Leben ist zu kompliziert.“
Es war gegen Abend etwas Schnee gefallen – der Vollmond
brachte die Kälte mit – Schwedenklee steckte das rasierte Kinn
wohlig in den Pelzkragen, während er langsam zwischen den hohen
Bäumen am Kanal dahinschlenderte. Die Straße war fast
menschenleer, nur hinter ihm, in einiger Entfernung, kroch eine
hagere, zusammengekrümmte Gestalt, die zuweilen scharf hüstelte.
Die dünne Schneeschicht war an den Sohlen der Passanten haften
geblieben, so daß eine Anzahl geisterhafter schwarzer Fußspuren
kreuz und quer über die Straße lief, aus dem Unbekannten
kommend, ins Unbekannte verschwindend, verwirrend, wenn man
sie lange betrachtete.
Plötzlich blies ein kalter Hauch in Schwedenklees Genick, ja, so
schien es ihm wenigstens. Er blieb erschrocken stehen und fröstelte.
Kalte Schauer überrieselten seinen Rücken. Weshalb mußte er
gerade in diesem Augenblick an die tote Ellen Fröhlich denken? Und
weshalb hatte die Erinnerung an diese Frau den Beigeschmack einer
leisen, unerklärlichen Scham?
Unergründlich ist das Leben, und auch sein Herz, Schwedenklees
Herz, war ein unerforschtes Labyrinth. Weshalb? Weil die Fußspuren
schwarz kreuz und quer liefen? Ja, nur aus diesem Grunde! In Paris
fällt selten Schnee – aber einmal hatte er Ellen abends nach Hause
gebracht, und durch ihre verschneite einsame Straße liefen genau
dieselben schwarzen verwirrenden Fußstapfen. Er sah sie in dieser
Sekunde, zierlich, in ihren weiten Mantel eingehüllt, klar vor sich,
Schneekristalle glitzerten auf ihren Haaren, und aus dem dunklen
Gesicht glänzten heiter und lebensfreudig die Augen. Fast zwanzig
Jahre lang hatte diese Erinnerung in seinem Kopfe geschlummert.
Fragend, lauschend waren diese Augen gewesen, sie waren
bernsteingelb, wenn das Licht voll in sie fiel, dunkel, fast schwarz,
wenn sie beschattet waren – Schwedenklee gab sich mit einer
gewissen Wehmut der Erinnerung hin, obgleich ihn dieses
unerklärliche Schamgefühl im Innersten peinigte. Er hatte sich
jedoch nichts vorzuwerfen, o nein, er erinnerte sich sogar, daß er ihr
später zwei- oder dreimal noch geholfen hatte, als sie sich an ihn
wandte. Sie war damals Anfängerin und hatte noch zu kämpfen.
Plötzlich kroch eisige Kälte an ihm empor. Vielleicht – wer weiß es
– schritt ihr Geist in der Tat neben ihm? Schwedenklee war sehr
abergläubisch.
„Ellen Fröhlich!“ sagte er leise zu sich, etwas betreten. „Ich habe
keine Furcht, an dich zu denken!“
Klar bis in die kleinsten und unscheinbarsten Einzelheiten stand
vor ihm die erste Begegnung mit Ellen. Er sitzt an einem kleinen
Marmortisch auf den großen Boulevards, zwei Damen, Mädchen,
nehmen neben ihm Platz. Sie sprechen deutsch, sie sprechen
ungeniert und vergessen ganz oder wissen es nicht, daß auf den
großen Boulevards in Paris jeder vierte Mensch deutsch versteht.
Ihre Ungezwungenheit entzückt Schwedenklee: die jungen Damen
sprechen mit einer gewissen Kühnheit von unschuldigen
Liebesabenteuern. Eine hat wunderbar warme und weiche Augen,
die offenbar die Farben wechseln, von hell zu dunkel leuchten.
Zuweilen streifen diese fragenden Augen, lächelnd, voller Übermut,
Schwedenklees absichtlich kühl beobachtenden Blicke. Das ist Ellen
Fröhlich! Die Freundin ist eine Schwedin, eine Bildhauerin.
Die jungen Damen gehen. Sie wandern zu Fuß durch die
wimmelnden Straßen bis zum Boulevard Raspail. Die Schwedin
verabschiedet sich von der Freundin, die in ein kleines Hotel
verschwindet. Es ist sieben Uhr. Als sie um neun Uhr das Hotel
wieder verläßt – wer tritt ihr in den Weg? Schwedenklee.
„Ein Landsmann, der das Vergnügen hatte, Ihr Gespräch heute
nachmittag im Café zu belauschen, bittet tausendmal um
Entschuldigung –“
 Ihr Blick gesteht, daß sie ihn wiedererkennt. Sie ist verwirrt. Er
habe also alles gehört? Ja. Sie bricht in Lachen aus.
„Aber,“ sagt sie – „wie kommt es, daß Sie hier sind?“
„Ich wartete auf Sie!“
„Es ist nicht schön von Ihnen, so etwas zu sagen, selbst wenn Sie
es getan haben sollten. Sie hätten sagen sollen: zufällig!“
„Gut – also zufällig!“
Schwedenklee war ja nicht zwei Stunden auf und ab gegangen, so
war es nicht gerade. Gegenüber lag eine kleine Speisewirtschaft, und
hier aß er zu Abend; dann trank er Kaffee, und gerade als er gezahlt
hatte, war sie wieder aus dem Hotel getreten.
Jedenfalls aber – sie verzieh – sie hatte nichts vor, und er brachte
sie in ein Tanzlokal, das er als äußerst anständig kannte.
Museen, Ausstellungen, Ausflüge, Tanzlokale – wie Ellen Fröhlich
genoß! Sie saugte die Eindrücke in sich, sie staunte, wunderte sich,
bewunderte. Ellen sprühte auf, berauscht, verwandelt,
verhundertfacht.
Und Schwedenklee, obgleich weniger schwärmerisch, lebt und
atmet leichter und heiterer in ihrer Nähe.
Ja, es war die Jugend, nichts sonst. Die Sonne schien, man fuhr
auf dem Dach des Omnibusses, unvergleichlich, herrlich, als sei man
nie auf dem Omnibus im Sonnenschein gefahren.
„Die Jugend, nichts anderes!“ dachte Schwedenklee. „Wie herrlich!
Ein Zauber! Ist die Jugend ein Zauber?“
Ein Ausflug nach St. Cloud. Vorfrühling. Das erste Grün, einige
versteckte Blümchen, die Knospen glänzen, die schwarzen
Baumstämme schwitzen Feuchtigkeit. Rasch schnellen die hohen
Wasser der Seine dahin. Auf dem Dampfer einige Pärchen – er und
Ellen unter ihnen, zu den „Pärchen“ gehören sie! Ein junger Geck mit
einem dünnen Spazierstöckchen amüsiert sämtliche Passagiere. Ellen
klemmt zu ihrem Vergnügen ein Monokel ins Auge, der junge Geck
macht ihr den Hof, und Ellen mustert ihn durchs Monokel und spielt
etwas Theater. Wie sie lachten, die „Pärchen“. Ja, worüber lachten
sie so furchtbar? Und damals gehörten sie zu den „Pärchen“ und
waren jung wie die anderen.
 Der frische Wind hat ihre Gesichter gerötet, die reine Luft hat den
Glanz in ihren Augen entfacht. Ihre Stimmen sind klar und laut
geworden. Ellen wirbelt und tanzt. Sie kriecht in die triefenden
Büsche und findet unter dem faulenden Laub Veilchen und gelbe
Sternblumen. Sie steht auf einem Stein und spricht voller Inbrunst
ein paar wundervolle Verse, die er vergessen hat. Sie essen zu
Abend in einer kleinen Wirtschaft mit fleckigen Tischtüchern und
feuchter Tapete. Der Kellner bringt eine verstaubte Macon in einem
Körbchen.
Sie plaudern. Ellens schöner frischer Mund steht nicht eine
Sekunde still. Sie lachen den ganzen Abend. Worüber? Wie herrlich
war dieser Tag, wie lang! War es nicht sonderbar, die Tage der
Jugend schienen so lang, sie nahmen kein Ende. Was war heute ein
Tag? Nichts. Kaum hatte er begonnen, war er schon zu Ende.
„Es ist die Jugend, nichts anderes! Es gibt keine andere Erklärung
dafür“, rief Schwedenklee aus. „Sie verleiht dem Unscheinbarsten
einen zauberhaften Glanz. Ja, wie lang war dieser Tag doch. Reich
an Erlebnissen, an guten Einfällen, an schönen Gefühlen. Und Ellen
mit dem Monokel auf dem Dampfer! Ja, die Jugend! Und das da,
was dahinten keift und hustet“ – Schwedenklee drehte sich um,
empört, daß man ihn in seiner Träumerei störte – „das ist das Alter!
Das häßliche Alter!“
Die hagere, zusammengekrümmte Gestalt, die den ganzen Weg
hinter ihm herkroch, stand wenige Schritte hinter ihm, mit der Hand
an einen Baum gestützt, geschüttelt von einem Hustenanfall.
„Das abscheuliche Alter! In zwanzig Jahren wirst du auch so
häßlich husten, und die Jüngeren, die nicht gestört werden wollen,
werden dich verfluchen. Oh, wie boshaft und grausam ist dieses
Leben eingerichtet!“
Aber Schwedenklee schüttelte die düsteren Gedanken ab. Ellen!
Wo waren wir doch gleich geblieben?
Ellen klagte über ihr Hotel. Schwedenklee, befreundet mit dem
Pförtner, Kellner und der Besitzerin seines Hotels, arrangierte alles
aufs vorzüglichste. Er trat Ellen sein großes bequemes Zimmer ab
und bezog eine kleine danebenliegende Kammer. Ellen staunte, wie
billig ihr schönes Zimmer war! Ja, man mußte nur Freunde und
Beziehungen haben!
„Wir werden Ihren Einzug feiern, Ellen, und heute abend zu Hause
speisen. Sie sollen sehen. Lassen Sie mich nur machen.“
Schwedenklee besorgt den ganzen Nachmittag lang alles, was
Paris an leckeren Dingen zu bieten vermag. Geröstete Hähnchen und
Hummer, Vorspeisen und Nachtisch, Früchte. Auch Blumen vergißt er
nicht.
„Muß man in Abendtoilette kommen?“
„Es wird gebeten, Ellen!“
Von sieben bis acht ist Schwedenklee fieberhaft tätig. Punkt acht
Uhr klopft Ellen – herein! Ellen ist im Abendkleid, er im Frack – und
schon lachen sie, daß sie kaum die Tür zu schließen vermögen.
Der Hausknecht, der im Kamin nachlegte – Ellen sollte es recht
behaglich haben – wird von der Heiterkeit mit fortgerissen. Der
Kellner, der den Wein angeschleppt bringt, wird ebenfalls angesteckt,
und so lachen sie alle – weshalb? Gott allein weiß es.
Ellen steht und staunt: „Jetzt sehe ich, daß Sie ein Künstler sind,
Schwedenklee!“ ruft sie aus. „Mein Gott, wir sind ja Hunderte von
Personen!“
„Sie sind in großer Gesellschaft, Ellen!“
Dank Schwedenklees Freundschaft mit dem Pförtner und
Hausknecht war es ihm möglich gewesen, einige große Spiegel und
Leuchter aus anderen Zimmern des Hotels auszuleihen für den
Abend. Die Kerzen blendeten, und infolge der Spiegelung glaubte
man in einem langen, sonderbar gebauten Saale voller Lichter und
Blumen zu sein. Schwedenklee führte seine Dame zum Sessel – und
im gleichen Augenblick geleiteten Dutzende von befrackten
Kavalieren ihre Dame in heller Seide zu Tisch. Er sah Ellen
gleichzeitig von allen Seiten, und nie kam ihr herrlicher schmaler
Nacken mit dem braunroten Haarknoten reizvoller zur Geltung ...
Ellens Augen richteten sich blitzend im Schein der Kerzen auf ihn,
und augenblicklich funkelten Dutzende von gleichen Augen von allen
Seiten ihm entgegen.
„Das Diner kann beginnen, Ellen – aber ich habe vergessen“ – und
er erhebt sich und küßt Ellen auf den Mund.
Welcome to our website – the perfect destination for book lovers and
knowledge seekers. We believe that every book holds a new world,
offering opportunities for learning, discovery, and personal growth.
That’s why we are dedicated to bringing you a diverse collection of
books, ranging from classic literature and specialized publications to
self-development guides and children's books.

More than just a book-buying platform, we strive to be a bridge

connecting you with timeless cultural and intellectual values. With an
elegant, user-friendly interface and a smart search system, you can
quickly find the books that best suit your interests. Additionally,
our special promotions and home delivery services help you save time
and fully enjoy the joy of reading.

Join us on a journey of knowledge exploration, passion nurturing, and

personal growth every day!

ebookbell.com