Platform
Resources
Pricing
Sign in
Get started
Justin Gosses
JavaScript | Python | Data Visualization | Web Development | Geology | Space | Analytics | IoT | Learn, Build Stuff, and Figure Things Out
Workspace
Fork
Public
By
Justin Gosses
Edited
Dec 12, 2023
Fork of
Surfline API exploration
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
url_example_1
=
"https://corsproxy.io/?https://services.surfline.com/kbyg/spots/forecasts/wave?spotId="
+
spotid
Insert cell
Insert cell
wave_data_example_1
=
(
await
fetch
(
url_example_1
)
)
.
json
(
)
Insert cell
Insert cell
Insert cell
Insert cell
just_data_plus_date
=
add_formatted_date
(
wave_data_example_1
,
"wave"
)
Insert cell
Insert cell
number_of_forecast_instances
=
wave_data_example_1
.
data
.
wave
.
length
Insert cell
last_item_in_array_numb
=
number_of_forecast_instances
-
1
Insert cell
timestamp
=
wave_data_example_1
.
data
.
wave
[
0
]
.
timestamp
Insert cell
wave_data_example_1
.
data
.
wave
[
0
]
.
timestamp
Insert cell
Insert cell
first_forecast
=
new
Date
(
wave_data_example_1
.
data
.
wave
[
0
]
.
timestamp
*
1000
)
Insert cell
last_forecast
=
new
Date
(
wave_data_example_1
.
data
.
wave
[
last_item_in_array_numb
]
.
timestamp
*
1000
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
L
=
{
const
L
=
await
require
(
"leaflet@1/dist/leaflet.js"
)
;
if
(
!
L
.
_style
)
{
const
href
=
await
require
.
resolve
(
"leaflet@1/dist/leaflet.css"
)
;
document
.
head
.
appendChild
(
L
.
_style
=
html
`<link href=${
href
} rel=stylesheet>`
)
;
}
return
L
;
}
Insert cell
Insert cell
Insert cell
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
last_month_chart
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
map
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
spotid
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
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
url_example_1
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
wave_data_example_1
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
add_formatted_date
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
just_data_plus_date
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
number_of_forecast_instances
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
last_item_in_array_numb
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
timestamp
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Difference_dates
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
first_forecast
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
last_forecast
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
location
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
forecastLocation
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
offshoreLocation
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
L
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
d3
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
vegalite
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML