Platform
Resources
Pricing
Sign in
Get started
Fabian Iwand
Web developer and autodidact with an interest in creative coding.
Workspace
Fork
Published
By
Fabian Iwand
Edited
5 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html
`<div title="${
title
}">Some text`
Insert cell
Insert cell
view
(
html
`<div title="${
title
}">Some text`
)
Insert cell
Insert cell
view
(
html
`<div title="${
DOM
.
text
(
title
)
}">Some text`
)
Insert cell
Insert cell
{
// Variant: Create element with content, then set attribute.
const
n
=
html
`<div>Some text`
;
n
.
setAttribute
(
'title'
,
title
)
;
return
view
(
n
)
;
}
Insert cell
{
// Variant: Create element with attribute, then set content.
const
n
=
DOM
.
element
(
'div'
,
{
title
}
)
;
n
.
textContent
=
'Some text'
;
return
view
(
n
)
;
}
Insert cell
Insert cell
Insert cell
Insert cell
function
safe
(
text
)
{
const
map
=
{
'&'
:
'&'
,
'<'
:
'<'
,
'>'
:
'>'
,
'"'
:
'"'
,
"'"
:
'''
}
;
return
text
.
replace
(
/[&<>"']/g
,
c
=>
map
[
c
]
)
;
}
Insert cell
Insert cell
function
attr
(
element
,
attributes
)
{
return
Object
.
entries
(
attributes
)
.
reduce
(
(
n
,
[
k
,
v
]
)
=>
(
n
.
setAttribute
(
k
,
v
)
,
n
)
,
element
)
;
}
Insert cell
Insert cell
view
(
html
`<div title="${
safe
(
title
)
}">Some text`
)
Insert cell
Insert cell
view
(
attr
(
html
`<div>Some text`
,
{
title
}
)
)
Insert cell
Insert cell
Insert cell
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