Platform
Docs
Resources
Blog
Pricing
Sign in
Sign up
philippkoytek
Workspace
Fork
Published
D3 Tutorial
By
philippkoytek
Edited
Dec 22, 2020
Fork of
1. Draw a flower petal on the screen
6
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html
`
<svg width=100 height=100 style='overflow: visible; margin: 5px;'>
<path d='M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0'
fill='none' stroke='#000' stroke-width=2 transform='translate(50,0)' />
</svg>
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html
`
<svg width=100 height=100 style='border: 1px dashed'>
<path d='${
smiley
}' fill='none' stroke='#000' stroke-width=2 transform='translate(50,0)' />
</svg>
<code>100px</code>
`
Insert cell
smiley
=
`
M 0 20
A 40 40 0 0 1 0 100
A 40 40 0 0 1 0 20
M 0 60
C 13 57 13 73 0 70
M 0 85
A 5 5 0 0 1 10 85
A 5 5 0 0 1 0 85
M -15 40
L -13 50
M 15 40
L 13 50
`
/*smiley = `M 0 0
a 50 50 0 0 1 0 100
a 50 50 0 0 1 0 -100
M 0 55
c 8 0 18 10 0 10
c -8 0 -8 -10 0 -10
M -20 75
q 20 15 40 0
M -20 35
a 5 5 0 0 1 0 10
a 5 5 0 0 1 0 -10
M 20 35
a 5 5 0 0 1 0 10
a 5 5 0 0 1 0 -10
M 15 40
h 10`*/
Insert cell
Insert cell
html
`
<svg width=100 height=100 style='border: 1px dashed'>
<path d='${
petalPath
}' fill='none' stroke='#000' stroke-width=2 transform='translate(50,0)' />
</svg>
<code>100px</code>
`
Insert cell
petalPath
=
`
M 0 0
C 50 55 40 90 0 100
C -40 90 -50 55 0 0`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
window
.
localStorage
.
petalPath
=
petalPath
||
'M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0'
}
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
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
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
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
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
smiley
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 comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
petalPath
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
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
tableSVG
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
colorXY
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
Platform overview
Observable Framework
Observable Cloud
Observable Notebooks
Embedded analytics
Observable
Observable Framework
Observable Plot
D3
Release notes
Examples
Data integrations
Customer stories
Community Slack
Forum