Platform
Resources
Pricing
Sign in
Get started
Eric Field
Building and Using Tools to See. UVA Architecture + Data Science. IT Director. Instructor.
Workspace
Fork
Public
misc
By
Eric Field
Edited
May 9, 2022
misc
Drag Snap to Line
Closest Point dropline
Groups and Layers in SVG
Fitness rings
Radial bar / line
Fixed location Network Graph
Rings - circle with hole mask
getting values from inputs
Get nearest data neighbors
Polygons by [lon,lat] sets on Map (geo)
Filter data on array of multiple values
geoContains
Filled Arc Polygon Bands
Add text labels to Fixed location Network Graph
Scale Date / Time on a line
Force Directed clustering along a path
D3 join, with updating data
SVG distance along path / curve
Curves / distance color gradient
"Thickened" line with SVG filled Bezier
Title from Variable Dropdown
Mousover change text
Stacked dropdown filter
Insert cell
Insert cell
<
svg
width
=
"500"
width
=
"300"
>
<
text
id
=
"title"
x
=
"100"
y
=
"50"
>
</
text
>
<
text
id
=
"otherthings"
x
=
"100"
y
=
"200"
>
other things here
</
text
>
<
style
>
#
title
{
font-size
:
24
px
;
font-weight
:
bold
;
}
</
style
>
</
svg
>
Insert cell
viewof
select
=
Inputs
.
select
(
[
"Title A"
,
"Title B"
]
,
{
label
:
"Select one"
}
)
Insert cell
viz
=
d3
.
select
(
svgContainer
)
Insert cell
viz
.
select
(
"#title"
)
.
text
(
"Title is "
+
select
)
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
svgContainer
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
select
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
viz
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML