Published
Edited
Nov 4, 2019
embedLatest({
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Plots a circle using a generated sequence.",
"width": 300,
"height": 300,
"data": {
"sequence": {
"start": -1.00,
"stop": 1.01,
"step": 0.01,
"as": "t"
}
},
"transform": [
{
"calculate": "sin(datum.t * PI)",
"as": "x"
},
{
"calculate": "cos(datum.t * PI)",
"as": "y"
}
],
"mark": "line",
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"axis": {
"title": "x",
"format": ".1f",
"offset": -150,
"titleAngle": 0,
"titleX": -10,
"titleY": -5,
"tickCount": 4
},
"scale": {
"domain": [-2, 2]
}
},
"y": {
"field": "y",
"type": "quantitative",
"axis": {
"title": "y",
"format": ".1f",
"offset": -150,
"titleAngle": 0,
"titleX": 0,
"titleY": -10,
"tickCount": 4
},
"scale": {
"domain": [-2, 2]
}
}
}
})
embedLatest({
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Plots a circle using a generated sequence.",
"width": 300,
"height": 300,
"data": {
"sequence": {
"start": -1.00,
"stop": 1.01,
"step": 0.01,
"as": "t"
}
},
"transform": [
{
"calculate": "sin(datum.t * PI)",
"as": "x"
},
{
"calculate": "cos(datum.t * PI)",
"as": "y"
}
],
"mark": "line",
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"axis": {
"title": "x",
"format": ".1f",
"offset": -150,
"titleAngle": 0,
"titleX": -10,
"titleY": -5,
"tickCount": 4
},
"scale": {
"domain": [-2, 2]
}
},
"y": {
"field": "y",
"type": "quantitative",
"axis": {
"title": "y",
"format": ".1f",
"offset": -150,
"titleAngle": 0,
"titleX": 0,
"titleY": -10,
"tickCount": 4
},
"scale": {
"domain": [-2, 2]
}
},
"order": {"field": "t", "type": "quantitative"}
}
})
embedLatest({
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "Plots a circle using a generated sequence.",
"autosize": "pad",
"padding": 5,
"width": 300,
"height": 300,
"style": "cell",
"data": [
{
"name": "source_0",
"transform": [
{
"type": "sequence",
"start": -1,
"stop": 1.01,
"step": 0.01,
"as": "t"
},
{"type": "formula", "expr": "sin(datum.t * PI)", "as": "x"},
{"type": "formula", "expr": "cos(datum.t * PI)", "as": "y"}
]
}
],
"marks": [
{
"name": "marks",
"type": "line",
"style": ["line"],
"sort": {"field": ["datum[\"t\"]"], "order": ["ascending"]},
"from": {"data": "source_0"},
"encode": {
"update": {
"stroke": {"value": "#4c78a8"},
"x": {"scale": "x", "field": "x"},
"y": {"scale": "y", "field": "y"},
"defined": {
"signal": "datum[\"x\"] !== null && !isNaN(datum[\"x\"]) && datum[\"y\"] !== null && !isNaN(datum[\"y\"])"
}
}
}
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": [-2, 2],
"range": [0, {"signal": "width"}],
"nice": true,
"zero": true
},
{
"name": "y",
"type": "linear",
"domain": [-2, 2],
"range": [{"signal": "height"}, 0],
"nice": true,
"zero": true
}
],
"axes": [
{
"scale": "x",
"orient": "bottom",
"tickCount": 4,
"gridScale": "y",
"grid": true,
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"tickCount": 4,
"gridScale": "x",
"grid": true,
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "x",
"orient": "bottom",
"grid": false,
"title": "x",
"format": ".1f",
"offset": -150,
"tickCount": 4,
"titleAngle": 0,
"titleX": -10,
"titleY": -5,
"labelFlush": true,
"labelOverlap": true,
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"grid": false,
"title": "y",
"format": ".1f",
"offset": -150,
"tickCount": 4,
"titleAngle": 0,
"titleX": 0,
"titleY": -10,
"labelOverlap": true,
"zindex": 0
}
]
})
embedLatest = require.alias({
"vega": "vega@latest",
"vega-lite": "vega-lite@latest"
})("vega-embed@latest")
eq_circle = tex`x^2 + y^2 = 1`
eq_circle_t = tex`{x \pod{t}}^2 + {y \pod{t}}^2 = 1`
eqs = tex`
\begin{cases}
-1 \le t \le 1 \\
x \pod{t} = sin(πt) \\
y \pod{t} = cos(πt)
\end{cases}`
solv_y = tex`y = ± \sqrt{1 - x^2}`
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.
