Platform
Resources
Pricing
Sign in
Get started
Jeffrey Morgan
Software engineering with human-centred design, visualization, GIS and data science.
Workspace
Fork
Published
By
Jeffrey Morgan
Edited
Dec 19, 2020
Fork of
Bubble Chart
Insert cell
Insert cell
Insert cell
Insert cell
scatterplotChart
.
render
(
generateData
)
Insert cell
x
=
d3
.
scaleLinear
(
)
.
domain
(
[
0
,
maxXY
]
)
.
range
(
[
0
,
chartWidth
]
)
Insert cell
y
=
d3
.
scaleLinear
(
)
.
domain
(
[
0
,
maxXY
]
)
.
range
(
[
chartHeight
,
0
]
)
Insert cell
function
renderAxes
(
svg
)
{
svg
.
append
(
"g"
)
.
attr
(
"transform"
,
`translate(${
margin
},${
height
-
margin
})`
)
.
call
(
d3
.
axisBottom
(
x
)
)
;
svg
.
append
(
"g"
)
.
attr
(
"transform"
,
`translate(${
margin
},${
margin
})`
)
.
call
(
d3
.
axisLeft
(
y
)
.
ticks
(
5
)
)
;
}
Insert cell
symbols
=
d3
.
scaleOrdinal
(
)
.
range
(
d3
.
symbols
)
Insert cell
function
symbolPath
(
symbolType
)
{
return
d3
.
symbol
(
)
.
type
(
symbolType
)
(
)
}
Insert cell
Insert cell
maxXY
=
1000
Insert cell
randomXY
=
d3
.
randomUniform
(
0
,
maxXY
)
Insert cell
randomZ
=
{
const
randomSymbolIndex
=
d3
.
randomUniform
(
0
,
d3
.
symbols
.
length
)
return
function
(
)
{
return
Math
.
floor
(
randomSymbolIndex
(
)
)
}
}
Insert cell
numberOfDataPoints
=
100
Insert cell
function
data
(
)
{
return
d3
.
range
(
0
,
numberOfDataPoints
)
.
map
(
_
=>
(
{
x
:
randomXY
(
)
,
y
:
randomXY
(
)
,
z
:
randomZ
(
)
}
)
)
}
Insert cell
generateData
=
{
while
(
true
)
{
yield
await
Promises
.
tick
(
2000
,
data
(
)
)
}
}
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Insert cell
Insert cell
d3
=
require
(
"d3@6"
)
Insert cell
import
{
chartWidth
,
chartHeight
,
height
,
margin
,
colors
}
from
"@jeffreymorganio/line-chart"
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
scatterplotChart
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
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
x
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
y
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
renderAxes
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
symbols
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
symbolPath
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
maxXY
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
randomXY
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
randomZ
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
numberOfDataPoints
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
generateData
Add comment
Copy import
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
d3
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