Jane Jacobs in the Sky
Predicting (and Showing) Urban Vitality
with Open Satellite Data
Edyta Bogucka@edytapbogucka

Team:Sanja Šćepanović, Sagar Joglekar, Stephen Law, Daniele Quercia
CSCW 2021

24 October 2023 | @LondonDataVis

We use image data to…
1

test theories with empirical studies at scale2

develop new data visualization methods

We use image data to…
1

test theories with empirical studies at scale

Jane Jacobs Urban Vitality Theory2

develop new data visualization methods

Visual storytelling from above

Jane Jacobs Urban Vitality Theory

Four conditions for the promotionof life in cities:
1

diversity of land use

2small block sizes

3

concentration of people4

mix of economic activities

Jane Jacobs Urban Vitality Theory

Four conditions for the promotionof life in cities:
1

diversity of land use

2small block sizes

3

concentration of people4

mix of economic activities

Testing thetheory withdata

1

Florence

2

Milan

3

Palermo

4

Bologna

5

Turin

6

Rome

Satellite images→ proxy for diversity ofland use and small
block sizes

Testing thetheory withdata

1

Florence2

Milan3Palermo

Satellite images→ proxy for diversity ofland use and small
block sizes
Mobile phone internet
density→ proxy for vitality

4Bologna

5Turin6Rome

Empirical framework

1px ⟶ 10m
1

Download a Sentinel-2 satellite image

Empirical framework

64 x 64px
2

Crop it into small images (imagelets)

Empirical framework

FeatureExtractor

3

Extract visual features from these imagelets
with deep learning methods

PCA

Empirical framework
4

Combine visual features into district-levelfeature vectors

Empirical framework

Vitality levels

SVR

1

5

Florence

Predict vitality levels as proxied bymobile phone internet density

Empirical framework

Vitality levels

very low vitality

very high vitality
SVR

1

5Florence

Predict vitality levels as proxied bymobile phone internet density

2MilanNavigating design constraints👩💻🤓

I have six satellite images and six vector choropleth maps
…but the images are pixelated.

Navigating design constraints👩💻🤓

I have six satellite images and six vector choropleth maps
…but the images are pixelated.

I cannot increase their resolution…but you can hide them behind other visualization and show on demand.

Navigating design constraints👩💻🤓

I have six satellite images and six vector choropleth maps
…but the images are pixelated.

I cannot increase their resolution…but you can hide them behind other visualization and show on demand.

I should show how vitality levels vary across one city
…but it would be great to compare the vitality levels between the cities.

Visualizing Satellite Data
Design choices inspired by cartography…

Image maps

Dot grid map

Dot grid map

Christian Murphy, 2014

Jacques Bertin, 1967

Richard Saul Wurman,
Joseph R. Passonneau, 1966

…and art…

petalsleavesSolar Diary, Needle Park

Color DNAs

Gene Davis, 1972
Jacob Marrel, c. 1637 - 1645

Irma Boom, 2004
Jacob Marrel, c. 1637 - 1645

…and journalism

petalsleavesThe True Colors of America’s Political
Spectrum Are Gray and Green
Tim Wallace, Krishna Karra, 2020

…and journalism

petalsleavesThe True Colors of America’s Political
Spectrum Are Gray and Green
Tim Wallace, Krishna Karra, 2020

Prototype in p5.js

Prototype in p5.js

color manage
mentntrastocevor
imp
imp
rovelightness

Roof color swatches

Residential areasIndustrial zones

Dot grid map

BolognaColor DNAFlorence

Bologna

PalermoDot grid maps

Map view

Dot grid maps

Map view

Color grid viewRoofs versus greenery
TorinoFlorencehigh vitality

low vitality

From points to color DNAs

1

cluster by color

From points to color DNAs
2

calculate average vitalityof the cluster

3.8
1.1

1

cluster by color
2.3

From points to color DNAs
2

calculate average vitalityof the cluster

3.8
1.1

1

3

order clusters byaverage vitality

cluster by color
2.3

1.1
lower

2.3

3.8
higher vitality

From points to color DNAs
2

calculate average vitalityof the cluster

3.8
1.1

1

3

order clusters by
average vitality

cluster by color
2.3

1.1

2.3

lower

3.8
higher vitality

4

sort and annotate
the colors

Sorting colors is not easy…

raw data

Florenceraw data

simple sort by hue

Florenceraw data

simple sort by hue

Florence
sort by luminosity

raw data

simple sort by hue

Florence
sort by luminosity

sort by hue and luminosity

raw data

simple sort by hue

Florence
sort by luminosity

sort by hue and luminosity

interpolate gradients, raise contrast

Color DNAsColor DNAs

Survey with 27 Earth Observation Experts from 11 countries
96%of Earth Observation experts could not name similar
visualizations in their fieldEliciting trust and transparency
The connection to real satellite images is constantly given.
Crafting delightful metaphors
The DNA concept serving as the "signature" for a place is neat.
I loved the multiple interactive methods used. I want to combine
scrolly-telling with other non-scrolling animated visualizations
in my future projects.

We use image data to…
1test theories with empirical studies at scale

If scaled across the world, our method
could help to uncover subtleties in
how vitality is expressed acrossdifferent natural and culturalenvironments and extend the theoryWe use image data to…
1

test theories with empirical studies at scale

If scaled across the world, our method
could help to uncover subtleties in
how vitality is expressed acrossdifferent natural and culturalenvironments and extend the theory2

develop new data visualization methods

Combining traditional cartographic
approaches with new EO data forengaging presentation of Digital Earthtions
atneser
ed repart-inspir

color manage
ment

prototyping with

p5.js

signednoit
nteracior
cimth d3.jsiw
gnitn
impleme?

What are the connections between the vitality levels,
unique city features and satellite imagelets?
Explore our interactive visual storywww.social-dynamics.net/vitality

Team:
Edyta Bogucka, Sanja Šćepanović, Sagar Joglekar, Stephen Law, Daniele Quercia@edytapbogucka
24 October 2023 | @LondonDataVis