Platform
Resources
Pricing
Sign in
Get started
Liquid Heart 💜
Workspace
Fork
Public
By
Mattias Petter Johansson
Edited
Feb 15, 2024
Fork of
3D scatterplot using ECharts
1
Insert cell
Insert cell
img3D
=
{
let
div
=
d3
.
create
(
"div"
)
.
style
(
"width"
,
"1000px"
)
.
style
(
"height"
,
"800px"
)
;
let
chart
=
echarts
.
init
(
div
.
node
(
)
)
;
chart
.
setOption
(
option
)
;
return
div
.
node
(
)
;
}
Insert cell
option
=
{
let
symbolSize
=
2.5
;
return
{
grid3D
:
{
}
,
xAxis3D
:
{
type
:
"category"
}
,
yAxis3D
:
{
}
,
zAxis3D
:
{
}
,
dataset
:
{
dimensions
:
[
"Income"
,
"Life Expectancy"
,
"Population"
,
"Country"
,
{
name
:
"Year"
,
type
:
"ordinal"
}
]
,
source
:
data
}
,
series
:
[
{
type
:
"scatter3D"
,
symbolSize
:
symbolSize
,
encode
:
{
x
:
"Country"
,
y
:
"Life Expectancy"
,
z
:
"Income"
,
tooltip
:
[
0
,
1
,
2
,
3
,
4
]
}
}
]
}
;
}
Insert cell
data
=
FileAttachment
(
"life-expectancy-table.csv"
)
.
csv
(
)
Insert cell
echarts
=
require
(
"echarts"
,
"echarts-gl"
)
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
img3D
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
option
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
data
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
echarts
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML