Platform
Resources
Pricing
Sign in
Get started
PolyaVerVla
Workspace
Fork
Public
By
PolyaVerVla
Edited
Mar 17, 2023
ISC
Fork of
Phases of the Moon
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
projection
=
d3
.
geoOrthographic
(
)
.
translate
(
[
0
,
0
]
)
.
scale
(
10
)
Insert cell
path
=
d3
.
geoPath
(
projection
)
Insert cell
hemisphere
=
d3
.
geoCircle
(
)
(
)
Insert cell
dayScale
=
{
const
scale
=
d3
.
scalePoint
(
)
.
domain
(
d3
.
range
(
1
,
40
)
)
.
range
(
[
margin
.
left
,
width
-
margin
.
right
]
)
.
padding
(
1
)
;
return
d
=>
{
const
start
=
d3
.
timeMonth
(
d
)
;
const
offset
=
start
.
getDay
(
)
||
7
;
return
scale
(
d
.
getDate
(
)
+
offset
)
;
}
;
}
Insert cell
monthScale
=
{
const
scale
=
d3
.
scalePoint
(
)
.
domain
(
d3
.
range
(
12
)
)
.
range
(
[
margin
.
top
,
height
-
margin
.
bottom
]
)
.
padding
(
1
)
;
return
d
=>
scale
(
d
.
getMonth
(
)
)
;
}
Insert cell
days
=
{
const
now
=
new
Date
(
year
,
0
,
1
)
;
const
start
=
d3
.
timeYear
(
now
)
;
return
d3
.
timeDays
(
start
,
d3
.
timeYear
.
offset
(
start
,
1
)
)
;
}
Insert cell
months
=
{
const
now
=
new
Date
(
year
,
0
,
1
)
;
const
start
=
d3
.
timeYear
(
now
)
;
return
d3
.
timeMonths
(
start
,
d3
.
timeYear
.
offset
(
start
,
1
)
)
;
}
Insert cell
width
=
975
Insert cell
height
=
480
Insert cell
margin
=
(
{
top
:
0
,
right
:
0
,
bottom
:
0
,
left
:
60
}
)
Insert cell
suncalc
=
require
(
"suncalc@1"
)
Insert cell
d3
=
require
(
"d3@6"
)
Insert cell
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Try it for free
Learn more
Compare fork
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
chart
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
year
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
locale
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
projection
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
path
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
hemisphere
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dayScale
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
monthScale
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
days
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
months
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
width
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
height
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
margin
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
suncalc
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML