The avatar for @nyuvis
EBVL
Enrico Bertini's Visualization Lab
Public
Guides and Examples
Edited
Jan 10
5 forks
1 star
Guides and Examples
Introduction
JavaScript BasicsData TransformationSVG and D3 BasicsBar Chart Walk-throughLine and Area ChartsSelections and JoinsMapsChoropleth Color SchemesFundamental Graphs with D3Graphical Encoding ExamplesContextual Elements, Aesthetics, and ClaritySmall MultiplesSmall Multiples with Different AxesNetworksInteractionSocrata Open Data API & NYC Open DataStarting a sequential color scale at a darker color
Insert cell
Insert cell
Insert cell
1 + 2
Insert cell
Insert cell
num = 1 + 2
Insert cell
num * 4
Insert cell
Insert cell
newNum = {
const a = 5;
const b = 6;
return a * b;
}
Insert cell
newNum * 2
Insert cell
Insert cell
<p>This is <b>HTML</b></p>
Insert cell
<svg width="200" height="100">
<rect fill="red" width="200" height="100">
</svg>
Insert cell
This **Markdown**
Insert cell
Insert cell
md`This is also *Markdown*`
Insert cell
tex`E = mc^2`
Insert cell
Insert cell
b = a * 2
Insert cell
a = 30
Insert cell
Insert cell
viewof radius = Inputs.range([0, 100], {label: "Radius", step: 1})
Insert cell
radius
Insert cell
viewof color = Inputs.color({label: "Color", value: "#4682b4"})
Insert cell
<svg width="200" height="200">
<circle
cx=100
cy=100
r=${radius}
fill=${color}
/>
</svg>
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.
Learn more