Platform
Resources
Pricing
Sign in
Get started
Artem Metelskyi
Full Stack Developer.
Workspace
Fork
Public
By
Artem Metelskyi
Edited
Jan 17
Fork of
word cloud
1
Insert cell
result
=
DOM
.
svg
(
width
,
height
)
Insert cell
height
=
1500
Insert cell
svg
=
d3
.
select
(
result
)
.
append
(
"g"
)
.
attr
(
"transform"
,
`translate(${
width
/
2
},${
height
/
2
})`
)
Insert cell
{
const
words
=
tokenize
(
)
;
update
(
words
)
}
Insert cell
update
=
function
(
words
)
{
d3Cloud
(
)
.
words
(
words
)
.
size
(
[
width
,
height
]
)
.
font
(
'Impact'
)
.
rotate
(
0
)
.
fontSize
(
function
(
d
)
{
return
d
.
sizeFactor
*
15
;
}
)
// .padding(function(d) { return d.sizeFactor * 2; })
.
on
(
"end"
,
draw
)
.
start
(
)
;
}
Insert cell
Insert cell
tokenize
=
function
(
)
{
const
counters
=
Object
.
values
(
test
)
;
const
max
=
Math
.
max
(
...
counters
)
;
const
min
=
Math
.
min
(
...
counters
)
;
return
Object
.
entries
(
test
)
.
map
(
(
[
text
,
count
]
)
=>
(
{
text
,
sizeFactor
:
selectSizeFactor
(
min
,
max
,
count
)
}
)
)
}
Insert cell
test
=
FileAttachment
(
"test.json"
)
.
json
(
)
Insert cell
selectSizeFactor
=
function
(
min
,
max
,
value
)
{
const
a
=
(
max
-
min
)
/
(
10
-
1
)
;
const
b
=
max
-
a
*
10
return
(
value
-
b
)
/
a
;
}
Insert cell
Insert cell
Insert cell
d3Cloud
=
require
(
'd3-cloud'
)
Insert cell
d3
=
require
(
'd3'
)
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
result
Unpin
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
height
Unpin
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
svg
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
update
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
draw
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
tokenize
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
test
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
selectSizeFactor
Unpin
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
fill
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
fill2
Edit
Pin
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
d3Cloud
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
JavaScript
Markdown
HTML
JavaScript
Markdown
HTML
JavaScript
Markdown
HTML