Platform
Resources
Pricing
Sign in
Get started
Kelsey Matsik
Workspace
Fork
Public
By
Kelsey Matsik
Edited
Mar 22, 2023
Insert cell
Insert cell
Insert cell
myLine
=
d3
.
select
(
mySVG
)
.
select
(
"line"
)
Insert cell
myLine
.
attr
(
"transform"
,
"rotate("
+
tick
+
"500,150)"
)
//will rotate about fixed point 500,150//
Insert cell
tick
=
ticker
(
10
)
//tick generates every 10 milliseconds//
Insert cell
import
{
ticker
}
from
"@emfielduva/dvlib"
Insert cell
myRectangle
=
d3
.
select
(
mySVG
)
.
select
(
"rect"
)
Insert cell
myCircle
=
d3
.
select
(
mySVG
)
.
select
(
"circle"
)
Insert cell
myCircle
.
transition
(
)
.
duration
(
1000
)
.
style
(
"fill"
,
"blue"
)
//makes the circle change from yellow to blue//
Insert cell
myCircle
.
transition
(
)
.
ease
(
d3
.
easeElastic
)
.
duration
(
1000
)
.
attr
(
"cx"
,
50
)
//add animation//
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
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
mySVG
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
myLine
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
tick
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
myRectangle
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
myCircle
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML