VegaLite({
data: {values: Cereals},
transform:[{
window: [{op: "rank", as: "id"}],
groupby: ["Type"]
}],
mark: "circle",
encoding: {
y: {field: "Type", type: "nominal"},
x: {field: "id", type: "ordinal"},
}
})
md `Let's look at the cereal data using a dot plot. It has strings that we need to convert to numbers. we can do that in vega-lite using the \`\`\`transform\`\`\` operator. We reference the object we are converting using the keyword \`\`\` datum\`\`\`. This is clearly not the right way to use colour!`
VegaLite({
data: {values: Cereals},
width: 600,
height: 400,
"transform": [
{"calculate": "+datum.calories", "as": "cal"},
{"calculate": "+datum.rating", "as": "rat"},
{"calculate": "+datum.shelf", "as": "sh"}
],
mark:
{
type: "circle",
opacity: 0.8,
stroke: "black",
strokeWidth: 1
},
encoding: {
y: {
field: "Type",
type: "nominal",
},
x: {
field: "cal",
type: "quantitative"
},
color: {
field: "rat",
type: "quantitative",
scale: {domain: [0, 100], range: ['#8AB9ED','#FDB813']}
},
size: {
field: "sh",
type: "ordinal"
}
}
})
invalidCereals = simpleCereals.filter(function(cereal) {
return ((isNaN(cereal.rating) || (cereal.rating==0)));
})
md `Now let's look at that same scatter plot. Note we still have values at 0, but Vega-Lite has filtered out the \`\`\ NaN\`\`\` vallues.`
VegaLite({
data: {values: Cars},
mark: "tick",
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Cylinders", type: "ordinal"}
}
})
VegaLite({
data: {values: Stocks},
width: 600,
height: 400,
mark: {type: "line", opacity: 0.7, strokeWidth: 3},
encoding:{
x: {field: "date", type: "temporal"},
y: {field: "price", type: "quantitative"},
color: {field: "symbol", type: "nominal"}
}
})
VegaLite({
data: {values: Population},
transform: [
{filter: "datum.year == 2000"}
],
width: 20,
mark: "bar",
encoding: {
column: {field: "age", type: "ordinal", spacing: 10},
y: {aggregate: "sum", field: "people", type: "quantitative"},
x: {
field: "sex", type: "nominal",
},
color: {field: "sex", type: "nominal", scale: {range: ["#EA98D2", "#659CCA"]}},
},
})
md `Let's relabel our gender field to use M and F. I use a \`\`\`transform\`\`\` calculation in the data itself. Note that we have to do some tricky things with escaping string constants to make this work. I don't know how to turn off the \"gender\" label in the x axis.`
VegaLite({
data: {values: Population},
transform: [
{filter: "datum.year == 2000"},
{"calculate": "if(datum.sex==1,\"M\",\"F\")", "as": "gender"}
],
width: 20,
mark: "bar",
encoding: {
column: {field: "age", type: "ordinal", spacing: 10},
y: {aggregate: "sum", field: "people", type: "quantitative"},
x: {
field: "gender",
type: "nominal"
},
color: {field: "gender", type: "nominal", scale: {range: ["#EA98D2", "#659CCA"]}}
}
})
VegaLite({
data: {
values: [
{"task": "A", "start": 1, "end": 3},
{"task": "B", "start": 3, "end": 8},
{"task": "C", "start": 8, "end": 10}
]
},
mark: "bar",
encoding: {
y: {field: "task", type: "ordinal"},
x: {field: "start", type: "quantitative"},
x2: {field: "end", type: "quantitative"}
}
})
VegaLite({
data: {values: Gapminder},
width: 600,
height: 400,
mark: "circle",
encoding: {
y: {
field: "health",
type: "quantitative"
},
x: {
field: "income",
type: "quantitative",
scale: {type: "log"}
},
size: {field: "population", type: "quantitative"},
color: {value: "black"}
}
})
VegaLite({
data: {values: Weather},
mark: "rect",
encoding: {
x: {field: "date", timeUnit: "date", type: "ordinal", title: "Day", axis: {labelAngle: 0}},
y: {field: "date", timeUnit: "month", type: "ordinal", title: "Month"},
color: {field: "temp_max", aggregate: "max", type: "quantitative"}
}
})
Stocks = d3.csv("https://raw.githubusercontent.com/vega/vega-datasets/master/data/stocks.csv")
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.
