Platform
Solutions
Resources
Pricing
Sign in
Sign up
Marilyn Waldman
Workspace
Fork
Public
By
Marilyn Waldman
Edited
Mar 28, 2023
Fork of
Geo Mark / Observable Plot
4
Insert cell
Insert cell
Plot
.
geo
(
counties
,
{
fill
:
(
d
)
=>
d
.
properties
.
unemployment
}
)
.
plot
(
{
projection
:
"albers-usa"
,
color
:
{
type
:
"quantile"
,
n
:
8
,
scheme
:
"blues"
,
label
:
"Unemployment (%)"
,
legend
:
true
}
}
)
Insert cell
Insert cell
Insert cell
land
=
FileAttachment
(
"land.json"
)
.
json
(
)
// multi-polygon representing land area
Insert cell
beagle
=
FileAttachment
(
"beagle.json"
)
.
json
(
)
// line representing the Beagle’s route
Insert cell
london
=
(
{
type
:
"Point"
,
coordinates
:
[
-
0.13
,
51.5
]
}
)
// London’s longitude and latitude
Insert cell
Plot
.
geo
(
[
land
,
beagle
,
london
]
)
.
plot
(
{
projection
:
"equirectangular"
}
)
Insert cell
Insert cell
Plot
.
plot
(
{
projection
:
"equal-earth"
,
marks
:
[
Plot
.
geo
(
land
,
{
fill
:
"currentColor"
}
)
,
Plot
.
graticule
(
)
,
Plot
.
line
(
beagle
.
coordinates
,
{
stroke
:
(
d
,
i
)
=>
i
,
z
:
null
,
strokeWidth
:
2
}
)
,
Plot
.
geo
(
london
,
{
fill
:
"red"
,
r
:
5
}
)
,
Plot
.
sphere
(
)
]
,
caption
:
htl
.
html
`The voyage of Charles Darwin aboard HMS <i>Beagle</i>, 1831–1836.`
}
)
Insert cell
Insert cell
Insert cell
Plot
.
plot
(
{
inset
:
4
,
height
:
400
,
projection
:
{
type
:
"orthographic"
,
rotate
:
[
0
,
-
35
,
20
]
}
,
marks
:
[
Plot
.
graticule
(
{
strokeOpacity
:
0.5
}
)
,
Plot
.
sphere
(
)
]
}
)
Insert cell
Insert cell
Insert cell
earthquakes
=
(
await
fetch
(
"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson"
)
)
.
json
(
)
Insert cell
Plot
.
plot
(
{
projection
:
"equirectangular"
,
marks
:
[
Plot
.
graticule
(
)
,
Plot
.
geo
(
land
,
{
fill
:
"#ccc"
}
)
,
Plot
.
geo
(
earthquakes
,
{
r
:
d
=>
Math
.
exp
(
d
.
properties
.
mag
)
}
)
,
Plot
.
sphere
(
)
]
}
)
Insert cell
Insert cell
Insert cell
Plot
.
plot
(
{
projection
:
{
type
:
"equal-earth"
,
rotate
:
[
90
,
0
]
}
,
color
:
{
legend
:
true
,
label
:
"Distance from Tonga (km)"
,
transform
:
(
d
)
=>
111.2
*
d
,
// degrees to km
nice
:
true
}
,
marks
:
[
Plot
.
geo
(
land
,
{
fill
:
(
d
)
=>
palette2
[
9
]
}
)
,
Plot
.
geo
(
radii
,
{
geometry
:
d3
.
geoCircle
(
)
.
center
(
tonga
)
.
radius
(
(
r
)
=>
r
)
,
stroke
:
(
r
)
=>
palette2
[
r
%
9
]
,
strokeWidth
:
2
}
)
,
Plot
.
geo
(
{
type
:
"Point"
,
coordinates
:
tonga
}
,
{
fill
:
"red"
,
r
:
4
}
)
,
Plot
.
sphere
(
)
]
}
)
Insert cell
chartTmp
=
Plot
.
plot
(
{
projection
:
{
type
:
"albers-usa"
,
rotate
:
[
96
,
0
]
,
domain
:
counties
,
}
,
color
:
{
type
:
"ordinal"
,
legend
:
true
,
}
,
marks
:
[
Plot
.
geo
(
counties
,
{
fill
:
(
d
,
i
)
=>
palette3
[
i
%
palette3
.
length
]
}
)
,
]
}
)
Insert cell
chartTmp4
=
Plot
.
plot
(
{
projection
:
{
type
:
"albers-usa"
,
rotate
:
[
96
,
0
]
,
domain
:
counties
,
}
,
marks
:
[
Plot
.
geo
(
counties
,
{
fill
:
(
d
,
i
)
=>
palette5
[
i
%
palette5
.
length
]
}
)
,
]
}
)
Insert cell
// Manually set the colors using the `range`
Plot
.
legend
(
{
color
:
{
type
:
"categorical"
,
domain
:
d3
.
range
(
palette5
.
length
)
.
map
(
d
=>
`Category ${
d
+
1
}`
)
,
range
:
palette5
}
}
)
Insert cell
palette2
=
[
"rgb(158, 1, 66)"
,
"rgb(214, 66, 75)"
,
"rgb(244, 125, 77)"
,
"rgb(253, 190, 112)"
,
"rgb(254, 237, 161)"
,
"rgb(240, 248, 169)"
,
"rgb(190, 229, 160)"
,
"rgb(119, 198, 167)"
,
"rgb(67, 143, 180)"
,
"rgb(94, 79, 162)"
]
Insert cell
viewof
nb
=
Inputs
.
range
(
[
2
,
100
]
,
{
label
:
"nb"
,
step
:
1
,
value
:
10
}
)
Insert cell
viewof
color1
=
Inputs
.
color
(
{
label
:
"color1"
,
value
:
"#f4e153"
}
)
Insert cell
viewof
color2
=
Inputs
.
color
(
{
label
:
"color2"
,
value
:
"#38134e"
}
)
Insert cell
palette5
=
d3
.
quantize
(
d3
.
interpolateHcl
(
color1
,
color2
)
,
nb
)
Insert cell
palette3
=
d3
.
quantize
(
d3
.
interpolateHcl
(
"#bb1b2b"
,
"#2f65bc"
)
,
nb
)
Insert cell
{
const
h
=
30
;
const
boxw
=
width
/
nb
;
const
svg
=
d3
.
create
(
"svg"
)
.
attr
(
"viewBox"
,
[
0
,
0
,
width
,
h
]
)
;
svg
.
selectAll
(
"rect"
)
.
data
(
palette5
)
.
join
(
"rect"
)
.
attr
(
"x"
,
(
d
,
i
)
=>
i
*
boxw
)
.
attr
(
"y"
,
0
)
.
attr
(
"height"
,
h
)
.
attr
(
"width"
,
boxw
)
.
attr
(
"fill"
,
(
d
)
=>
d
)
.
attr
(
"stroke"
,
"black"
)
.
attr
(
"stroke-width"
,
0.1
)
;
return
svg
.
node
(
)
;
}
Insert cell
radii
=
d3
.
range
(
10
,
171
,
10
)
// degrees radii of circles to be centered around Tonga
Insert cell
tonga
=
[
-
175.38
,
-
20.57
]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
us
=
FileAttachment
(
"us-counties-10m.json"
)
.
json
(
)
Insert cell
nation
=
topojson
.
feature
(
us
,
us
.
objects
.
nation
)
Insert cell
statemesh
=
topojson
.
mesh
(
us
,
us
.
objects
.
states
,
(
a
,
b
)
=>
a
!==
b
)
Insert cell
counties
=
{
const
rate
=
new
Map
(
unemployment
.
map
(
(
{
id
,
rate
}
)
=>
[
id
,
rate
]
)
)
;
const
counties
=
topojson
.
feature
(
us
,
us
.
objects
.
counties
)
;
for
(
const
county
of
counties
.
features
)
county
.
properties
.
unemployment
=
rate
.
get
(
county
.
id
)
;
return
counties
;
}
Insert cell
Insert cell
unemployment
=
(
await
FileAttachment
(
"us-county-unemployment.csv"
)
.
csv
(
)
)
.
map
(
(
{
rate
,
...
rest
}
)
=>
(
{
...
rest
,
rate
:
+
rate
}
)
)
Insert cell
Insert cell
One platform
to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Try it for free
Learn more
Compare fork
Fork
View
Export
geo
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
channels
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
features
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
land
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
beagle
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
london
Unpin
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
earthquakes
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
chartTmp
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
chartTmp4
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
palette2
Unpin
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
nb
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
color1
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
color2
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
palette5
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
palette3
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
radii
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
tonga
Unpin
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
appendix
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
us
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
nation
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
statemesh
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
counties
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
unemployment
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
JavaScript
Markdown
HTML
JavaScript
Markdown
HTML
JavaScript
Markdown
HTML