Platform
Resources
Pricing
Sign in
Get started
Mike Bostock
Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Workspace
Fork
Published unlisted
By
Mike Bostock
Edited
May 23, 2019
Insert cell
Insert cell
htm
`<h1 onclick=${
function
(
)
{
this
.
style
.
color
=
"red"
;
}
} style=${
{
color
:
"green"
}
}>${`<hello>`}</h1>`
Insert cell
viewof
checked
=
htm
`<input type=checkbox checked />`
Insert cell
checked
Insert cell
htm
`<p>hello ${
new
Map
(
[
[
1
,
2
]
]
)
} world</p>`
Insert cell
htm
`<table>
<thead>
<tr><th>Sport</th><th>Athletes</th></tr>
</thead>
<tbody>${
Array
.
from
(
athletesBySport
,
(
[
key
,
values
]
)
=>
html
`
<tr>
<td>${
key
}</td>
<td>${
values
.
map
(
d
=>
d
.
name
)
.
join
(
", "
)
}</td>
</tr>`
)
}</tbody>
</table>`
Insert cell
hx
`<table>
<thead>
<tr><th>Sport</th><th>Athletes</th></tr>
</thead>
<tbody>${
Array
.
from
(
athletesBySport
,
(
[
key
,
values
]
)
=>
html
`
<tr>
<td>${
key
}</td>
<td>${
values
.
map
(
d
=>
d
.
name
)
.
join
(
", "
)
}</td>
</tr>`
)
}</tbody>
</table>`
Insert cell
import
{
athletesBySport
}
from
"@d3/d3-group-d3-rollup"
Insert cell
htm
=
{
const
[
htm
,
hyperscript
]
=
await
Promise
.
all
(
[
require
(
"htm@2/mini/index.umd.js"
)
,
require
(
"https://bundle.run/hyperscript@2"
)
]
)
;
return
htm
.
bind
(
hyperscript
)
;
}
Insert cell
hx
=
{
const
[
hx
,
hyperscript
]
=
await
Promise
.
all
(
[
require
(
"https://bundle.run/hyperx@2"
)
,
require
(
"https://bundle.run/hyperscript@2"
)
]
)
;
return
hx
(
hyperscript
)
;
}
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
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
checked
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
htm
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
hx
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML