Published
Edited
Sep 12, 2021
vegalite = require("vega-embed@6")
//Diamonds dataset
data = FileAttachment("diamonds-2.csv").csv()
//Flights dataset
flights = d3.csv("https://raw.githubusercontent.com/mwaskom/seaborn-data/master/flights.csv")
vegalite(
{
"data": {"values": data}, //passes on the diamond dataset we previously defined
"mark": {
"type": "bar",
"opacity": 0.6,
"strokeWidth": 1.5},
//indicates we are drawing a bar-chart, with overall opacity of bar color as 0.6 and the strokeWidth or marker_line width is 1.5
"height": 300,
"width": 400,
"title": "The number of diamonds for cut quality",
"encoding": {
"x": {
"field": "cut",
"title": "Cut→",
"type": "ordinal",
"axis": { "labelAngle": 0}, //makes the labels' text horizontal
//"sort":"y" //sorts the plot in ascending order of y; put "-y" for the descending order
},
"y": {
"aggregate": "count",
"field": "cut",
"type": "quantitative",
"title": "Count of Diamonds→",
}, //obtains the count of diamonds at each cut quality
"color": {"value": "rgb(158,158,225)"}, //sets the color of bars
"stroke": {"value": "rgb(8,48,107)"}, //sets the stroke color of bars
},
})
//Note that: The vegalite has many defaults so in the x,y encoding section, code runs even if you don't write "type" of x and y fields but it is a good practice to write it.
vegalite({
"data": {values: data},
"mark": "bar",
"height": 300,
"encoding": {
"column": {"field": "color", "type": "nominal", "spacing": 10, "title": false},
//seperates each color fieds columnwise
"y": {"aggregate": "count", "field": "cut", "title": "Cut of diamonds→", type: "quantitative"},
//obtains the count of the cut of diamonds
"x": {"field": "cut", "axis": false, "sort": "-y"},
//Setting ["axis": false] doesn't display any axis elements on x-axis
"color": {"field": "cut",
"scale": {"range": ["rgb(203, 203, 227)","rgb(160, 182, 215)","rgb(114, 162, 202)","rgb(65, 137, 186)","rgb(35, 89, 135)"]},
"legend": {"orient": "right", "title": "Cut Quality"} //Put the legend in the right position
}
}
})
vegalite({
"data": {"values": flights},
"mark": "rect", // represents an arbitrary rectangle
"encoding": {
"y": {"field": "month", "type": "ordinal", "sort": null, "title": "Month→"},
//sort: null helps to arrange the data in the original order (no-sort)
"x": {"field": "year", "type": "ordinal", "title": "Year→"},
"color": { "field": "passengers", "type": "quantitative",
"scale": { "type": "quantitative", "range": importedColor, /*reverse: true*/ },
//Putting "reverse: true" reverses the order of colors in the continous color label
"legend": {"type": "gradient"}
//"gradient" is used for continuous data and "symbol" is used for representing discrete ones
}
},
"config": {
"axis": {"grid": true, "tickBand": "extent"}
//setting grid true gives a fine white border of small rectangles, set grid to false to find difference
//tickBand as extent indicates the ticks and grid lines are at the band extents to indicate intervals. Set tickBand: "center" to observe the difference.
}
})
vegalite(
{
"data": {"values": data},
"mark":
{"type": "bar", "width": 18},
//here width means the width of the bars. Try changing its value to observe
"encoding": {
"x": {"bin": true, "field": "carat", "title": "Carat→"},
//When setting bin as true, default binning parameters are applied on carat
//Try ["bin": 50] to observe the difference
"y": {"aggregate": "count", "field": "carat", "title": "Count of Diamonds→"},
//counts the number of diamonds that falls under each binning group of carat
}
})
vegalite(
{
"width": 400,
"data": { "values": data },
"mark": {"type": "line", "fillOpacity": 0.5},
//or can use ("type": "area") too. Try to see what happens!
"transform": [
{
"density": "carat",
"groupby": ["color"], // means groups the density plots by field "color"
"extent": [0, 5],
//("extent": [min, max]) array indicates the range of domain values to display (extent is required to be written in most cases)
"as": ["value", "density"] //[The output fields for the sample value, associated probability]
},
{"filter" : {"field": "color", "oneOf": ['E', 'I', 'J']}} //only chooses 3 mentioned colors to display
],
encoding: {
"x": {"field": "value", "type": "quantitative", "title": "Value→"},
"y": {"field": "density", "type": "quantitative", "title": "Density→"},
"fill": {"field": "color"},
"stroke": {"field": "color"}
}
})
vegalite(
{
data: { values: data},
width: 500,
"transform": [
{
"quantile": "carat", //performs quantile estimation on "carat" field
// "quantile": "price", //substituting "carat" by "price" gives the q-q plot of price of diamonds. Try it!
"as": ["prob","value"] //["probability", "quantile value"] contains the output field names
},
{
"calculate": "quantileNormal(datum.prob)",
//estimates normal quantiles and store it to "norm"
"as": "norm"
}
],
"layer": [ //draws both qq-plot and regression line on the same plot
{
"mark": {type: "circle", size: 80},
"encoding": {
"x": {"field": "norm", "type": "quantitative", "title": "Theoretical Quantiles→"},
"y": { "field": "value", "type": "quantitative", "title": "Ordered Values→"}
}
},
{
mark: {type: "line", color: "red"},
transform: [
{
"regression" : "value", //takes dependent variable to predict
"on": "norm", //takes independent variable to use a predictor
//No need to write as:[] because the default values is the original field names of the x and y values i.e "norm" and "value"
}
],
"encoding": {
"x": {"field": "norm", "type": "quantitative"},
"y": { "field": "value", "type": "quantitative"}
}
},
]
})
vegalite(
{
data: { values: data },
"mark": {
"type": "line",
"fillOpacity": 0.5,
"strokeOpacity": 0.8,
"strokeWidth":1,
},
"width": 700,
"height": 40,
//we can alter the height to keep the desired amount of intersection between graphs
"transform": [
{
"density": "carat",
"groupby": ["color"],
"extent": [0, 4]
},
//{"filter" : {"field": "color", "oneOf": ['D', 'E', 'F', 'G', 'H', 'I', 'J']}} //Choose any color you want to display
],
encoding: {
"x": {
"field": "value",
"type": "quantitative",
"axis": {"grid": false, "title": "Carat of diamonds→"}
},
"y": {
"field": "density",
"type": "quantitative",
"scale": {"range": [40,-80]}, //scale({range: [step, -overlap * step]})
"axis": false
},
"row": {
"field": "color",
"type": "nominal",
"title": "Colors→",
"spacing": 0, //reduces the space between curves
"header": { //Puts the color-labels on y-axis in appropriate positions
"labelAngle": 0,
"labelAlign":"left",
"labelPadding":0
},
"axis": false,
"sort": {
"field": "color",
"op": "max",
"order": "ascending"
}
},
"fill": {
"field": "color",
"type": "nominal",
"legend": null
},
"stroke": {"field": "color"}
},
"bounds": "flush", //uses facet cell height for layout, not the full mark bounds
"view": {
"stroke": "transparent"
}
})
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.
