Published
Edited
Apr 29, 2020
1 fork
1 star
md`# Using Vega-Lite`
vegalite = require("@observablehq/vega-lite@0.2")
data = FileAttachment("ufo-scrubbed-geocoded-time-standardized@1.csv").text()
md`## 3) Call the visualization
In Vega-Lite, every feature of the graph is set by updating the parameters. These parameters appear below within the \`data\`, \`mark\`, and \`encoding\` keys that appear below.
`
md`## Currently Selected Shape: ${shape}`
viewof shape = html`<select>
<option>other</option>
<option>cylinder</option>
<option>disk</option>
<option>light</option>
<option>oval</option>
<option>cigar</option>
<option>sphere</option>
<option>fireball</option>
</select>`
vegalite({
data: { values: data, format: { type: 'csv' } },
width: 750,
height: 500,
layer: [
{
mark: {
type: "line",
interpolate: "monotone"
},
/* ADD A TRANSFORM */
transform: [
/* ADD A FILTER */
{ filter:
{
/* CHOOSE A FIELD TO FILTER */
field: "shape",
/*
- CHOOSE A FILTER FUNCTION (filter whether equal, `gt` (greater than), `lt` (less than), `gte` (greater than or equal to), `lte` (less than or equal to).)
- PASS A VARIABLE TO THE FILTER FUNCTION
*/
/* CHOOSE A FILTER FUNCTION */ equal: /* PASS A VARIABLE */ shape
}
}
],
encoding: {
x: {
timeUnit: "year",
field: "date",
axis: { title: "Time of Day" }
},
y: { aggregate: "count", axis: { title: "Sightings" } },
color: {
type: "nominal",
field: "country"
}
}
}
]
})
md`## ${scale}`
viewof scale = html`<input type=range min=100 max=500 step=50>`
projectionParams = ({
type: "orthographic",
scale: scale,
rotate: [90, -15, 0]
})
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.
