Gallery
The 30 examples of the spec, ported from the documentation of Observable Plot: one for each family of marks, and every family of transforms. Each is a plot block that plotdown.js draws in your browser. They are the test fixtures of the renderer: each draws the same SVG as the hand-written Plot.plot() call.
Stacked areas
{
"title": "Unemployed workers by industry",
"data": {
"jobs": [
{"date": "2024-01-01", "industry": "Construction", "unemployed": 612},
{"date": "2024-02-01", "industry": "Construction", "unemployed": 640},
{"date": "2024-03-01", "industry": "Construction", "unemployed": 690},
{"date": "2024-04-01", "industry": "Construction", "unemployed": 720},
{"date": "2024-05-01", "industry": "Construction", "unemployed": 700},
{"date": "2024-06-01", "industry": "Construction", "unemployed": 650},
{"date": "2024-01-01", "industry": "Manufacturing", "unemployed": 830},
{"date": "2024-02-01", "industry": "Manufacturing", "unemployed": 810},
{"date": "2024-03-01", "industry": "Manufacturing", "unemployed": 800},
{"date": "2024-04-01", "industry": "Manufacturing", "unemployed": 790},
{"date": "2024-05-01", "industry": "Manufacturing", "unemployed": 770},
{"date": "2024-06-01", "industry": "Manufacturing", "unemployed": 760},
{"date": "2024-01-01", "industry": "Retail", "unemployed": 910},
{"date": "2024-02-01", "industry": "Retail", "unemployed": 880},
{"date": "2024-03-01", "industry": "Retail", "unemployed": 860},
{"date": "2024-04-01", "industry": "Retail", "unemployed": 900},
{"date": "2024-05-01", "industry": "Retail", "unemployed": 940},
{"date": "2024-06-01", "industry": "Retail", "unemployed": 920}
]
},
"y": {"grid": true, "label": "Unemployed (thousands)"},
"color": {"legend": true},
"marks": [
{
"mark": "areaY",
"data": "jobs",
"x": "date",
"y": "unemployed",
"fill": "industry",
"transform": [{"stackY": {"order": "appearance"}}]
},
{"mark": "ruleY", "data": [0]}
]
}areaY, ruleY; transform stackY. Edit in the playgroundArrows between two values
{
"x": {"type": "log", "label": "Population (millions)"},
"y": {"label": "Inequality", "grid": true},
"data": {
"metros": [
{"Metro": "New York", "POP_1980": 16, "POP_2015": 20.2, "R90_10_1980": 6.4, "R90_10_2015": 7.9},
{"Metro": "Los Angeles", "POP_1980": 11.5, "POP_2015": 13.3, "R90_10_1980": 5.6, "R90_10_2015": 7.4},
{"Metro": "Chicago", "POP_1980": 8, "POP_2015": 9.5, "R90_10_1980": 5, "R90_10_2015": 6.2},
{"Metro": "Houston", "POP_1980": 3.2, "POP_2015": 6.7, "R90_10_1980": 4.9, "R90_10_2015": 6},
{"Metro": "Phoenix", "POP_1980": 1.6, "POP_2015": 4.6, "R90_10_1980": 4.6, "R90_10_2015": 5.2}
]
},
"marks": [
{
"mark": "arrow",
"data": "metros",
"x1": "POP_1980",
"y1": "R90_10_1980",
"x2": "POP_2015",
"y2": "R90_10_2015",
"bend": true,
"stroke": "steelblue"
},
{
"mark": "text",
"data": "metros",
"x": "POP_2015",
"y": "R90_10_2015",
"text": "Metro",
"dy": -8,
"fontSize": 9
}
]
}arrow, text. Edit in the playgroundThe auto mark
{
"data": {
"penguins": [
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.1,
"flipper_length_mm": 181,
"body_mass_g": 3750,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.5,
"flipper_length_mm": 186,
"body_mass_g": 3800,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Biscoe",
"bill_length_mm": 37.8,
"flipper_length_mm": 174,
"body_mass_g": 3400,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 40.6,
"flipper_length_mm": 199,
"body_mass_g": 4250,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 36.5,
"flipper_length_mm": 182,
"body_mass_g": 3150,
"sex": null
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 46.5,
"flipper_length_mm": 192,
"body_mass_g": 3500,
"sex": "FEMALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 50,
"flipper_length_mm": 196,
"body_mass_g": 3900,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 51.3,
"flipper_length_mm": 197,
"body_mass_g": 3650,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 45.4,
"flipper_length_mm": 188,
"body_mass_g": 3525,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 46.1,
"flipper_length_mm": 211,
"body_mass_g": 4500,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 230,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 48.7,
"flipper_length_mm": 210,
"body_mass_g": 4450,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 218,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 47.6,
"flipper_length_mm": 215,
"body_mass_g": 5400,
"sex": null
}
]
},
"marks": [
{
"mark": "auto",
"data": "penguins",
"x": "species",
"y": {"value": "body_mass_g", "reduce": "mean"},
"autoMark": "bar"
}
]
}auto. Edit in the playgroundAxes as marks
{
"data": {
"aapl": [
{"date": "2024-03-01", "close": 129.6},
{"date": "2024-03-02", "close": 130.2},
{"date": "2024-03-03", "close": 128.9},
{"date": "2024-03-04", "close": 131.5},
{"date": "2024-03-05", "close": 133.1},
{"date": "2024-03-06", "close": 132.4},
{"date": "2024-03-07", "close": 134.8},
{"date": "2024-03-08", "close": 136},
{"date": "2024-03-09", "close": 135.2},
{"date": "2024-03-10", "close": 137.9},
{"date": "2024-03-11", "close": 139.4},
{"date": "2024-03-12", "close": 138.1},
{"date": "2024-03-13", "close": 140.6},
{"date": "2024-03-14", "close": 142.3},
{"date": "2024-03-15", "close": 141},
{"date": "2024-03-16", "close": 143.8},
{"date": "2024-03-17", "close": 145.2},
{"date": "2024-03-18", "close": 144.1},
{"date": "2024-03-19", "close": 146.7},
{"date": "2024-03-20", "close": 148}
]
},
"marginRight": 50,
"marks": [
{"mark": "gridY", "strokeDasharray": "2,3", "strokeOpacity": 0.3},
{"mark": "axisY", "anchor": "right", "label": "Close ($)", "tickFormat": "$.0f"},
{"mark": "axisX", "ticks": "week", "tickFormat": "%b %d", "label": null},
{"mark": "lineY", "data": "aapl", "x": "date", "y": "close"}
]
}gridY, axisY, axisX, lineY. Edit in the playgroundGrouped bars
{
"data": {
"penguins": [
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.1,
"flipper_length_mm": 181,
"body_mass_g": 3750,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.5,
"flipper_length_mm": 186,
"body_mass_g": 3800,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Biscoe",
"bill_length_mm": 37.8,
"flipper_length_mm": 174,
"body_mass_g": 3400,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 40.6,
"flipper_length_mm": 199,
"body_mass_g": 4250,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 36.5,
"flipper_length_mm": 182,
"body_mass_g": 3150,
"sex": null
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 46.5,
"flipper_length_mm": 192,
"body_mass_g": 3500,
"sex": "FEMALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 50,
"flipper_length_mm": 196,
"body_mass_g": 3900,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 51.3,
"flipper_length_mm": 197,
"body_mass_g": 3650,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 45.4,
"flipper_length_mm": 188,
"body_mass_g": 3525,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 46.1,
"flipper_length_mm": 211,
"body_mass_g": 4500,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 230,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 48.7,
"flipper_length_mm": 210,
"body_mass_g": 4450,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 218,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 47.6,
"flipper_length_mm": 215,
"body_mass_g": 5400,
"sex": null
}
]
},
"color": {"legend": true},
"marks": [
{
"mark": "barY",
"data": "penguins",
"x": "island",
"fill": "species",
"sort": {"x": "-y"},
"transform": [{"filter": "sex"}, {"groupX": {"y": "count"}}]
},
{"mark": "ruleY", "data": [0]}
]
}barY, ruleY; transforms filter, groupX. Edit in the playgroundBollinger bands
{
"data": {
"aapl": [
{"date": "2024-03-01", "close": 129.6},
{"date": "2024-03-02", "close": 130.2},
{"date": "2024-03-03", "close": 128.9},
{"date": "2024-03-04", "close": 131.5},
{"date": "2024-03-05", "close": 133.1},
{"date": "2024-03-06", "close": 132.4},
{"date": "2024-03-07", "close": 134.8},
{"date": "2024-03-08", "close": 136},
{"date": "2024-03-09", "close": 135.2},
{"date": "2024-03-10", "close": 137.9},
{"date": "2024-03-11", "close": 139.4},
{"date": "2024-03-12", "close": 138.1},
{"date": "2024-03-13", "close": 140.6},
{"date": "2024-03-14", "close": 142.3},
{"date": "2024-03-15", "close": 141},
{"date": "2024-03-16", "close": 143.8},
{"date": "2024-03-17", "close": 145.2},
{"date": "2024-03-18", "close": 144.1},
{"date": "2024-03-19", "close": 146.7},
{"date": "2024-03-20", "close": 148}
]
},
"y": {"grid": true},
"marks": [
{"mark": "bollingerY", "data": "aapl", "x": "date", "y": "close", "n": 5, "k": 2, "fill": "steelblue"},
{"mark": "lineY", "data": "aapl", "x": "date", "y": "close", "strokeWidth": 1}
]
}bollingerY, lineY. Edit in the playgroundBox plot from TSV
{
"data": {
"penguins": {
"tsv": "species\tisland\tbody_mass_g\nAdelie\tTorgersen\t3750\nAdelie\tTorgersen\t3800\nAdelie\tBiscoe\t3400\nAdelie\tDream\t4250\nAdelie\tDream\t3150\nChinstrap\tDream\t3500\nChinstrap\tDream\t3900\nChinstrap\tDream\t3650\nChinstrap\tDream\t3525\nGentoo\tBiscoe\t4500\nGentoo\tBiscoe\t5700\nGentoo\tBiscoe\t4450\nGentoo\tBiscoe\t5700\nGentoo\tBiscoe\t5400\n"
}
},
"y": {"grid": true},
"marks": [{"mark": "boxY", "data": "penguins", "x": "species", "y": "body_mass_g"}]
}boxY. Edit in the playgroundA heatmap of cells
{
"padding": 0,
"x": {"label": "Episode", "axis": "top"},
"y": {"label": "Season"},
"color": {"type": "linear", "scheme": "PiYG"},
"data": {
"ratings": [
{"season": 1, "episode": 1, "rating": 7.4, "title": "Simpsons Roasting on an Open Fire"},
{"season": 1, "episode": 2, "rating": 7.8, "title": "Bart the Genius"},
{"season": 1, "episode": 3, "rating": 7.6, "title": "Homer's Odyssey"},
{"season": 1, "episode": 4, "rating": 7.8, "title": "There's No Disgrace Like Home"},
{"season": 2, "episode": 1, "rating": 8.2, "title": "Bart Gets an F"},
{"season": 2, "episode": 2, "rating": 8.1, "title": "Simpson and Delilah"},
{"season": 2, "episode": 3, "rating": 8, "title": "Treehouse of Horror"},
{"season": 2, "episode": 4, "rating": 7.8, "title": "Two Cars in Every Garage"},
{"season": 3, "episode": 1, "rating": 8.3, "title": "Stark Raving Dad"},
{"season": 3, "episode": 2, "rating": 8, "title": "Mr. Lisa Goes to Washington"},
{"season": 3, "episode": 3, "rating": 7.5, "title": "When Flanders Failed"},
{"season": 3, "episode": 4, "rating": 8.3, "title": "Bart the Murderer"}
]
},
"marks": [
{"mark": "cell", "data": "ratings", "x": "episode", "y": "season", "fill": "rating", "inset": 0.5},
{
"mark": "text",
"data": "ratings",
"x": "episode",
"y": "season",
"text": "rating",
"fill": "black",
"title": "title"
}
]
}cell, text. Edit in the playgroundContours
{
"data": {
"grid": [
{"x": 0, "y": 0, "v": 0},
{"x": 0, "y": 1, "v": 0},
{"x": 0, "y": 2, "v": 0},
{"x": 0, "y": 3, "v": 0},
{"x": 0, "y": 4, "v": 0},
{"x": 1, "y": 0, "v": 0.58},
{"x": 1, "y": 1, "v": 0.52},
{"x": 1, "y": 2, "v": 0.36},
{"x": 1, "y": 3, "v": 0.13},
{"x": 1, "y": 4, "v": -0.1},
{"x": 2, "y": 0, "v": 1.04},
{"x": 2, "y": 1, "v": 0.94},
{"x": 2, "y": 2, "v": 0.65},
{"x": 2, "y": 3, "v": 0.26},
{"x": 2, "y": 4, "v": -0.15},
{"x": 3, "y": 0, "v": 1.3},
{"x": 3, "y": 1, "v": 1.18},
{"x": 3, "y": 2, "v": 0.84},
{"x": 3, "y": 3, "v": 0.37},
{"x": 3, "y": 4, "v": -0.12},
{"x": 4, "y": 0, "v": 1.31},
{"x": 4, "y": 1, "v": 1.2},
{"x": 4, "y": 2, "v": 0.89},
{"x": 4, "y": 3, "v": 0.46},
{"x": 4, "y": 4, "v": 0.02}
]
},
"color": {"type": "linear", "scheme": "viridis"},
"marks": [
{
"mark": "contour",
"data": "grid",
"x": "x",
"y": "y",
"fill": "v",
"stroke": "white",
"thresholds": 6,
"blur": 1
},
{"mark": "dot", "data": "grid", "x": "x", "y": "y", "r": 1.5, "fill": "black"}
]
}contour, dot. Edit in the playgroundVoronoi and Delaunay
{
"data": {
"penguins": [
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.1,
"flipper_length_mm": 181,
"body_mass_g": 3750,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.5,
"flipper_length_mm": 186,
"body_mass_g": 3800,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Biscoe",
"bill_length_mm": 37.8,
"flipper_length_mm": 174,
"body_mass_g": 3400,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 40.6,
"flipper_length_mm": 199,
"body_mass_g": 4250,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 36.5,
"flipper_length_mm": 182,
"body_mass_g": 3150,
"sex": null
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 46.5,
"flipper_length_mm": 192,
"body_mass_g": 3500,
"sex": "FEMALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 50,
"flipper_length_mm": 196,
"body_mass_g": 3900,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 51.3,
"flipper_length_mm": 197,
"body_mass_g": 3650,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 45.4,
"flipper_length_mm": 188,
"body_mass_g": 3525,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 46.1,
"flipper_length_mm": 211,
"body_mass_g": 4500,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 230,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 48.7,
"flipper_length_mm": 210,
"body_mass_g": 4450,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 218,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 47.6,
"flipper_length_mm": 215,
"body_mass_g": 5400,
"sex": null
}
]
},
"marks": [
{
"mark": "voronoi",
"data": "penguins",
"x": "flipper_length_mm",
"y": "body_mass_g",
"fill": "species",
"fillOpacity": 0.2,
"stroke": "white"
},
{
"mark": "hull",
"data": "penguins",
"x": "flipper_length_mm",
"y": "body_mass_g",
"stroke": "species",
"z": "species"
},
{"mark": "dot", "data": "penguins", "x": "flipper_length_mm", "y": "body_mass_g", "fill": "species"}
]
}voronoi, hull, dot. Edit in the playgroundDensity contours
{
"data": {
"penguins": [
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.1,
"flipper_length_mm": 181,
"body_mass_g": 3750,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.5,
"flipper_length_mm": 186,
"body_mass_g": 3800,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Biscoe",
"bill_length_mm": 37.8,
"flipper_length_mm": 174,
"body_mass_g": 3400,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 40.6,
"flipper_length_mm": 199,
"body_mass_g": 4250,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 36.5,
"flipper_length_mm": 182,
"body_mass_g": 3150,
"sex": null
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 46.5,
"flipper_length_mm": 192,
"body_mass_g": 3500,
"sex": "FEMALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 50,
"flipper_length_mm": 196,
"body_mass_g": 3900,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 51.3,
"flipper_length_mm": 197,
"body_mass_g": 3650,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 45.4,
"flipper_length_mm": 188,
"body_mass_g": 3525,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 46.1,
"flipper_length_mm": 211,
"body_mass_g": 4500,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 230,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 48.7,
"flipper_length_mm": 210,
"body_mass_g": 4450,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 218,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 47.6,
"flipper_length_mm": 215,
"body_mass_g": 5400,
"sex": null
}
]
},
"inset": 10,
"marks": [
{
"mark": "density",
"data": "penguins",
"x": "flipper_length_mm",
"y": "body_mass_g",
"stroke": "steelblue",
"bandwidth": 15,
"thresholds": 4
},
{"mark": "dot", "data": "penguins", "x": "flipper_length_mm", "y": "body_mass_g", "r": 2}
]
}density, dot. Edit in the playgroundDifference of a shifted series
{
"data": {
"aapl": [
{"date": "2024-03-01", "close": 129.6},
{"date": "2024-03-02", "close": 130.2},
{"date": "2024-03-03", "close": 128.9},
{"date": "2024-03-04", "close": 131.5},
{"date": "2024-03-05", "close": 133.1},
{"date": "2024-03-06", "close": 132.4},
{"date": "2024-03-07", "close": 134.8},
{"date": "2024-03-08", "close": 136},
{"date": "2024-03-09", "close": 135.2},
{"date": "2024-03-10", "close": 137.9},
{"date": "2024-03-11", "close": 139.4},
{"date": "2024-03-12", "close": 138.1},
{"date": "2024-03-13", "close": 140.6},
{"date": "2024-03-14", "close": 142.3},
{"date": "2024-03-15", "close": 141},
{"date": "2024-03-16", "close": 143.8},
{"date": "2024-03-17", "close": 145.2},
{"date": "2024-03-18", "close": 144.1},
{"date": "2024-03-19", "close": 146.7},
{"date": "2024-03-20", "close": 148}
]
},
"y": {"grid": true, "label": "Change over 5 days"},
"marks": [
{
"mark": "differenceY",
"data": "aapl",
"x": "date",
"y": "close",
"positiveFill": "green",
"negativeFill": "red",
"transform": [{"shiftX": "5 days"}]
}
]
}differenceY; transform shiftX. Edit in the playgroundBeeswarm
{
"height": 160,
"data": {
"cars": [
{"name": "car 1", "weight": 3504},
{"name": "car 2", "weight": 3693},
{"name": "car 3", "weight": 3436},
{"name": "car 4", "weight": 3433},
{"name": "car 5", "weight": 3449},
{"name": "car 6", "weight": 4341},
{"name": "car 7", "weight": 4354},
{"name": "car 8", "weight": 4312},
{"name": "car 9", "weight": 4425},
{"name": "car 10", "weight": 3850},
{"name": "car 11", "weight": 3563},
{"name": "car 12", "weight": 3609},
{"name": "car 13", "weight": 3761},
{"name": "car 14", "weight": 3086},
{"name": "car 15", "weight": 2372},
{"name": "car 16", "weight": 2833},
{"name": "car 17", "weight": 2774},
{"name": "car 18", "weight": 2587},
{"name": "car 19", "weight": 2130},
{"name": "car 20", "weight": 1835}
]
},
"marks": [
{
"mark": "dot",
"data": "cars",
"x": "weight",
"title": "name",
"fill": "currentColor",
"transform": [{"reverse": true}, {"dodgeY": {"anchor": "middle", "padding": 1}}]
}
]
}dot; transforms reverse, dodgeY. Edit in the playgroundScatter plot
{
"data": {
"penguins": [
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.1,
"flipper_length_mm": 181,
"body_mass_g": 3750,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.5,
"flipper_length_mm": 186,
"body_mass_g": 3800,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Biscoe",
"bill_length_mm": 37.8,
"flipper_length_mm": 174,
"body_mass_g": 3400,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 40.6,
"flipper_length_mm": 199,
"body_mass_g": 4250,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 36.5,
"flipper_length_mm": 182,
"body_mass_g": 3150,
"sex": null
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 46.5,
"flipper_length_mm": 192,
"body_mass_g": 3500,
"sex": "FEMALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 50,
"flipper_length_mm": 196,
"body_mass_g": 3900,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 51.3,
"flipper_length_mm": 197,
"body_mass_g": 3650,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 45.4,
"flipper_length_mm": 188,
"body_mass_g": 3525,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 46.1,
"flipper_length_mm": 211,
"body_mass_g": 4500,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 230,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 48.7,
"flipper_length_mm": 210,
"body_mass_g": 4450,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 218,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 47.6,
"flipper_length_mm": 215,
"body_mass_g": 5400,
"sex": null
}
]
},
"grid": true,
"symbol": {"legend": true},
"marks": [
{
"mark": "dot",
"data": "penguins",
"x": "flipper_length_mm",
"y": "body_mass_g",
"stroke": "species",
"symbol": "species",
"tip": true,
"transform": [{"shuffle": {"seed": 1}}]
},
{"mark": "crosshair", "data": "penguins", "x": "flipper_length_mm", "y": "body_mass_g"}
]
}dot, crosshair; transform shuffle. Edit in the playgroundFacets with frames
{
"data": {
"penguins": [
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.1,
"flipper_length_mm": 181,
"body_mass_g": 3750,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.5,
"flipper_length_mm": 186,
"body_mass_g": 3800,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Biscoe",
"bill_length_mm": 37.8,
"flipper_length_mm": 174,
"body_mass_g": 3400,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 40.6,
"flipper_length_mm": 199,
"body_mass_g": 4250,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 36.5,
"flipper_length_mm": 182,
"body_mass_g": 3150,
"sex": null
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 46.5,
"flipper_length_mm": 192,
"body_mass_g": 3500,
"sex": "FEMALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 50,
"flipper_length_mm": 196,
"body_mass_g": 3900,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 51.3,
"flipper_length_mm": 197,
"body_mass_g": 3650,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 45.4,
"flipper_length_mm": 188,
"body_mass_g": 3525,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 46.1,
"flipper_length_mm": 211,
"body_mass_g": 4500,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 230,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 48.7,
"flipper_length_mm": 210,
"body_mass_g": 4450,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 218,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 47.6,
"flipper_length_mm": 215,
"body_mass_g": 5400,
"sex": null
}
]
},
"facet": {"data": "penguins", "x": "sex", "label": null},
"marks": [
{"mark": "frame"},
{
"mark": "dot",
"data": "penguins",
"x": "flipper_length_mm",
"y": "body_mass_g",
"fill": "species",
"r": 3
}
]
}frame, dot. Edit in the playgroundA globe
{
"projection": {"type": "orthographic", "rotate": [20, -20]},
"data": {
"shapes": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {"name": "A"},
"geometry": {"type": "Polygon", "coordinates": [[[-10, 40], [-10, 55], [10, 55], [10, 40], [-10, 40]]]}
},
{
"type": "Feature",
"properties": {"name": "B"},
"geometry": {"type": "Polygon", "coordinates": [[[20, -10], [20, 10], [40, 10], [40, -10], [20, -10]]]}
},
{
"type": "Feature",
"properties": {"name": "C"},
"geometry": {"type": "Polygon", "coordinates": [[[-70, -30], [-70, -10], [-50, -10], [-50, -30], [-70, -30]]]}
}
]
}
},
"marks": [
{"mark": "sphere", "fill": "aliceblue"},
{"mark": "graticule"},
{"mark": "geo", "data": "shapes", "fill": "tan", "stroke": "brown"},
{"mark": "dot", "data": "shapes", "r": 3, "fill": "black", "transform": [{"centroid": true}]}
]
}sphere, graticule, geo, dot; transform centroid. Edit in the playgroundHexagonal bins
{
"data": {
"penguins": [
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.1,
"flipper_length_mm": 181,
"body_mass_g": 3750,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.5,
"flipper_length_mm": 186,
"body_mass_g": 3800,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Biscoe",
"bill_length_mm": 37.8,
"flipper_length_mm": 174,
"body_mass_g": 3400,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 40.6,
"flipper_length_mm": 199,
"body_mass_g": 4250,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 36.5,
"flipper_length_mm": 182,
"body_mass_g": 3150,
"sex": null
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 46.5,
"flipper_length_mm": 192,
"body_mass_g": 3500,
"sex": "FEMALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 50,
"flipper_length_mm": 196,
"body_mass_g": 3900,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 51.3,
"flipper_length_mm": 197,
"body_mass_g": 3650,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 45.4,
"flipper_length_mm": 188,
"body_mass_g": 3525,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 46.1,
"flipper_length_mm": 211,
"body_mass_g": 4500,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 230,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 48.7,
"flipper_length_mm": 210,
"body_mass_g": 4450,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 218,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 47.6,
"flipper_length_mm": 215,
"body_mass_g": 5400,
"sex": null
}
]
},
"color": {"scheme": "blues"},
"marks": [
{"mark": "hexgrid", "binWidth": 20},
{
"mark": "dot",
"data": "penguins",
"x": "flipper_length_mm",
"y": "body_mass_g",
"binWidth": 20,
"transform": [{"hexbin": {"r": "count", "fill": "count"}}]
}
]
}hexgrid, dot; transform hexbin. Edit in the playgroundImages
{
"data": {
"logos": [
{
"name": "Red",
"value": 3,
"logo": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOSIgZmlsbD0icmVkIi8+PC9zdmc+"
},
{
"name": "Green",
"value": 5,
"logo": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOSIgZmlsbD0iZ3JlZW4iLz48L3N2Zz4="
},
{
"name": "Blue",
"value": 4,
"logo": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOSIgZmlsbD0iYmx1ZSIvPjwvc3ZnPg=="
}
]
},
"y": {"domain": [0, 6], "grid": true},
"marks": [{"mark": "image", "data": "logos", "x": "name", "y": "value", "src": "logo", "width": 24}]
}image. Edit in the playgroundRunning total
{
"data": {
"sales": [
{"date": "2024-01-01", "units": 12},
{"date": "2024-02-01", "units": 7},
{"date": "2024-03-01", "units": 15},
{"date": "2024-04-01", "units": 9},
{"date": "2024-05-01", "units": 20},
{"date": "2024-06-01", "units": 11}
]
},
"y": {"grid": true, "label": "Units sold (cumulative)"},
"marks": [
{"mark": "lineY", "data": "sales", "x": "date", "y": "units", "transform": [{"mapY": "cumsum"}]},
{"mark": "dot", "data": "sales", "x": "date", "y": "units", "transform": [{"map": {"y": "cumsum"}}]}
]
}lineY, dot; transforms mapY, map. Edit in the playgroundNormalized lines
{
"data": {
"stocks": [
{"date": "2024-01-01", "symbol": "AAPL", "close": 185},
{"date": "2024-02-01", "symbol": "AAPL", "close": 181},
{"date": "2024-03-01", "symbol": "AAPL", "close": 171},
{"date": "2024-04-01", "symbol": "AAPL", "close": 170},
{"date": "2024-05-01", "symbol": "AAPL", "close": 192},
{"date": "2024-06-01", "symbol": "AAPL", "close": 210},
{"date": "2024-01-01", "symbol": "GOOG", "close": 140},
{"date": "2024-02-01", "symbol": "GOOG", "close": 141},
{"date": "2024-03-01", "symbol": "GOOG", "close": 152},
{"date": "2024-04-01", "symbol": "GOOG", "close": 163},
{"date": "2024-05-01", "symbol": "GOOG", "close": 173},
{"date": "2024-06-01", "symbol": "GOOG", "close": 183},
{"date": "2024-01-01", "symbol": "MSFT", "close": 376},
{"date": "2024-02-01", "symbol": "MSFT", "close": 397},
{"date": "2024-03-01", "symbol": "MSFT", "close": 420},
{"date": "2024-04-01", "symbol": "MSFT", "close": 389},
{"date": "2024-05-01", "symbol": "MSFT", "close": 415},
{"date": "2024-06-01", "symbol": "MSFT", "close": 446}
]
},
"y": {"type": "log", "grid": true, "label": "Change in price (×)"},
"marks": [
{"mark": "ruleY", "data": [1]},
{
"mark": "lineY",
"data": "stocks",
"x": "date",
"y": "close",
"stroke": "symbol",
"transform": [{"normalizeY": "first"}]
},
{
"mark": "text",
"data": "stocks",
"x": "date",
"y": "close",
"z": "symbol",
"text": "symbol",
"textAnchor": "start",
"dx": 3,
"transform": [{"normalizeY": "first"}, {"selectLast": true}]
}
]
}ruleY, lineY, text; transforms normalizeY, selectLast. Edit in the playgroundMoving average
{
"data": {
"aapl": [
{"date": "2024-03-01", "close": 129.6},
{"date": "2024-03-02", "close": 130.2},
{"date": "2024-03-03", "close": 128.9},
{"date": "2024-03-04", "close": 131.5},
{"date": "2024-03-05", "close": 133.1},
{"date": "2024-03-06", "close": 132.4},
{"date": "2024-03-07", "close": 134.8},
{"date": "2024-03-08", "close": 136},
{"date": "2024-03-09", "close": 135.2},
{"date": "2024-03-10", "close": 137.9},
{"date": "2024-03-11", "close": 139.4},
{"date": "2024-03-12", "close": 138.1},
{"date": "2024-03-13", "close": 140.6},
{"date": "2024-03-14", "close": 142.3},
{"date": "2024-03-15", "close": 141},
{"date": "2024-03-16", "close": 143.8},
{"date": "2024-03-17", "close": 145.2},
{"date": "2024-03-18", "close": 144.1},
{"date": "2024-03-19", "close": 146.7},
{"date": "2024-03-20", "close": 148}
]
},
"y": {"grid": true},
"marks": [
{"mark": "lineY", "data": "aapl", "x": "date", "y": "close", "strokeOpacity": 0.3},
{
"mark": "lineY",
"data": "aapl",
"x": "date",
"y": "close",
"stroke": "steelblue",
"transform": [{"sort": "date"}, {"windowY": {"k": 5, "reduce": "mean"}}]
},
{
"mark": "dot",
"data": "aapl",
"x": "date",
"y": "close",
"fill": "red",
"transform": [{"select": {"y": "max"}}]
},
{"mark": "tip", "data": "aapl", "x": "date", "y": "close", "transform": [{"pointerX": true}]}
]
}lineY, dot, tip; transforms sort, windowY, select, pointerX. Edit in the playgroundLinear regression
{
"data": {
"penguins": [
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.1,
"flipper_length_mm": 181,
"body_mass_g": 3750,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.5,
"flipper_length_mm": 186,
"body_mass_g": 3800,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Biscoe",
"bill_length_mm": 37.8,
"flipper_length_mm": 174,
"body_mass_g": 3400,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 40.6,
"flipper_length_mm": 199,
"body_mass_g": 4250,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 36.5,
"flipper_length_mm": 182,
"body_mass_g": 3150,
"sex": null
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 46.5,
"flipper_length_mm": 192,
"body_mass_g": 3500,
"sex": "FEMALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 50,
"flipper_length_mm": 196,
"body_mass_g": 3900,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 51.3,
"flipper_length_mm": 197,
"body_mass_g": 3650,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 45.4,
"flipper_length_mm": 188,
"body_mass_g": 3525,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 46.1,
"flipper_length_mm": 211,
"body_mass_g": 4500,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 230,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 48.7,
"flipper_length_mm": 210,
"body_mass_g": 4450,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 218,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 47.6,
"flipper_length_mm": 215,
"body_mass_g": 5400,
"sex": null
}
]
},
"grid": true,
"marks": [
{
"mark": "dot",
"data": "penguins",
"x": "flipper_length_mm",
"y": "body_mass_g",
"fill": "species",
"fillOpacity": 0.5
},
{
"mark": "linearRegressionY",
"data": "penguins",
"x": "flipper_length_mm",
"y": "body_mass_g",
"stroke": "species"
}
]
}dot, linearRegressionY. Edit in the playgroundLinks
{
"inset": 20,
"data": {
"edges": [
{
"source": "A",
"target": "B",
"x1": 0,
"y1": 0,
"x2": 1,
"y2": 1,
"kind": "depends",
"url": "https://example.com/a-b"
},
{
"source": "A",
"target": "C",
"x1": 0,
"y1": 0,
"x2": 1,
"y2": 2,
"kind": "uses",
"url": "https://example.com/a-c"
},
{
"source": "B",
"target": "D",
"x1": 1,
"y1": 1,
"x2": 2,
"y2": 1,
"kind": "depends",
"url": "/docs/b-d"
},
{
"source": "C",
"target": "D",
"x1": 1,
"y1": 2,
"x2": 2,
"y2": 1,
"kind": "uses",
"url": "mailto:team@example.com"
}
]
},
"marks": [
{
"mark": "link",
"data": "edges",
"x1": "x1",
"y1": "y1",
"x2": "x2",
"y2": "y2",
"stroke": "kind",
"curve": "bump-x",
"markerEnd": "arrow",
"href": "url",
"target": "_blank"
},
{"mark": "text", "data": "edges", "x": "x1", "y": "y1", "text": "source", "dy": -10}
]
}link, text. Edit in the playgroundRaster
{
"data": {
"grid": [
{"x": 0, "y": 0, "v": 0},
{"x": 0, "y": 1, "v": 0},
{"x": 0, "y": 2, "v": 0},
{"x": 0, "y": 3, "v": 0},
{"x": 0, "y": 4, "v": 0},
{"x": 1, "y": 0, "v": 0.58},
{"x": 1, "y": 1, "v": 0.52},
{"x": 1, "y": 2, "v": 0.36},
{"x": 1, "y": 3, "v": 0.13},
{"x": 1, "y": 4, "v": -0.1},
{"x": 2, "y": 0, "v": 1.04},
{"x": 2, "y": 1, "v": 0.94},
{"x": 2, "y": 2, "v": 0.65},
{"x": 2, "y": 3, "v": 0.26},
{"x": 2, "y": 4, "v": -0.15},
{"x": 3, "y": 0, "v": 1.3},
{"x": 3, "y": 1, "v": 1.18},
{"x": 3, "y": 2, "v": 0.84},
{"x": 3, "y": 3, "v": 0.37},
{"x": 3, "y": 4, "v": -0.12},
{"x": 4, "y": 0, "v": 1.31},
{"x": 4, "y": 1, "v": 1.2},
{"x": 4, "y": 2, "v": 0.89},
{"x": 4, "y": 3, "v": 0.46},
{"x": 4, "y": 4, "v": 0.02}
]
},
"color": {"scheme": "turbo"},
"marks": [
{
"mark": "raster",
"data": "grid",
"x": "x",
"y": "y",
"fill": "v",
"interpolate": "nearest",
"pixelSize": 4
}
]
}raster. Edit in the playgroundHistogram from CSV
{
"title": "Penguin body mass",
"data": {
"penguins": {
"csv": "species,island,body_mass_g,sex\nAdelie,Torgersen,3750,MALE\nAdelie,Torgersen,3800,FEMALE\nAdelie,Biscoe,3400,FEMALE\nAdelie,Dream,4250,MALE\nAdelie,Dream,3150,\nChinstrap,Dream,3500,FEMALE\nChinstrap,Dream,3900,MALE\nChinstrap,Dream,3650,MALE\nChinstrap,Dream,3525,FEMALE\nGentoo,Biscoe,4500,FEMALE\nGentoo,Biscoe,5700,MALE\nGentoo,Biscoe,4450,FEMALE\nGentoo,Biscoe,5700,MALE\nGentoo,Biscoe,5400,\n"
}
},
"color": {"legend": true},
"y": {"grid": true},
"marks": [
{
"mark": "rectY",
"data": "penguins",
"x": "body_mass_g",
"fill": "species",
"thresholds": 8,
"transform": [{"binX": {"y": "count"}}]
},
{"mark": "ruleY", "data": [0]}
]
}rectY, ruleY; transform binX. Edit in the playgroundRules and ticks
{
"data": {
"penguins": [
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.1,
"flipper_length_mm": 181,
"body_mass_g": 3750,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Torgersen",
"bill_length_mm": 39.5,
"flipper_length_mm": 186,
"body_mass_g": 3800,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Biscoe",
"bill_length_mm": 37.8,
"flipper_length_mm": 174,
"body_mass_g": 3400,
"sex": "FEMALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 40.6,
"flipper_length_mm": 199,
"body_mass_g": 4250,
"sex": "MALE"
},
{
"species": "Adelie",
"island": "Dream",
"bill_length_mm": 36.5,
"flipper_length_mm": 182,
"body_mass_g": 3150,
"sex": null
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 46.5,
"flipper_length_mm": 192,
"body_mass_g": 3500,
"sex": "FEMALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 50,
"flipper_length_mm": 196,
"body_mass_g": 3900,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 51.3,
"flipper_length_mm": 197,
"body_mass_g": 3650,
"sex": "MALE"
},
{
"species": "Chinstrap",
"island": "Dream",
"bill_length_mm": 45.4,
"flipper_length_mm": 188,
"body_mass_g": 3525,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 46.1,
"flipper_length_mm": 211,
"body_mass_g": 4500,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 230,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 48.7,
"flipper_length_mm": 210,
"body_mass_g": 4450,
"sex": "FEMALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 50,
"flipper_length_mm": 218,
"body_mass_g": 5700,
"sex": "MALE"
},
{
"species": "Gentoo",
"island": "Biscoe",
"bill_length_mm": 47.6,
"flipper_length_mm": 215,
"body_mass_g": 5400,
"sex": null
}
]
},
"marginLeft": 70,
"marks": [
{"mark": "ruleX", "data": [4000], "stroke": "red", "strokeDasharray": "4,2"},
{
"mark": "tickX",
"data": "penguins",
"x": "body_mass_g",
"y": "species",
"stroke": "sex",
"strokeWidth": 2
}
]
}ruleX, tickX. Edit in the playgroundTree transforms
{
"axis": null,
"height": 220,
"marginLeft": 40,
"marginRight": 110,
"data": {
"paths": [
"flare/analytics/cluster",
"flare/analytics/graph",
"flare/analytics/optimization",
"flare/animate/Easing",
"flare/animate/Tween",
"flare/data/DataField",
"flare/data/DataSchema",
"flare/display/DirtySprite"
]
},
"marks": [
{"mark": "link", "data": "paths", "stroke": "#999", "transform": [{"treeLink": true}]},
{"mark": "dot", "data": "paths", "fill": "node:internal", "transform": [{"treeNode": true}]},
{
"mark": "text",
"data": "paths",
"text": "node:name",
"dx": 6,
"textAnchor": "start",
"transform": [{"treeNode": {"treeAnchor": "left"}}]
}
]
}link, dot, text; transforms treeLink, treeNode. Edit in the playgroundTree
{
"axis": null,
"height": 220,
"margin": 10,
"marginLeft": 40,
"marginRight": 110,
"marks": [
{
"mark": "tree",
"data": [
"flare/analytics/cluster",
"flare/analytics/graph",
"flare/analytics/optimization",
"flare/animate/Easing",
"flare/animate/Tween",
"flare/data/DataField",
"flare/data/DataSchema",
"flare/display/DirtySprite"
],
"textStroke": "white"
}
]
}tree. Edit in the playgroundVectors
{
"inset": 10,
"data": {
"wind": [
{"lon": 0, "lat": 0, "dir": 0, "speed": 1.5},
{"lon": 0, "lat": 1, "dir": 0, "speed": 1.5},
{"lon": 0, "lat": 2, "dir": 0, "speed": 1.5},
{"lon": 0, "lat": 3, "dir": 0, "speed": 1.5},
{"lon": 0, "lat": 4, "dir": 0, "speed": 1.5},
{"lon": 1, "lat": 0, "dir": 104, "speed": 2.1},
{"lon": 1, "lat": 1, "dir": 94, "speed": 2},
{"lon": 1, "lat": 2, "dir": 65, "speed": 1.9},
{"lon": 1, "lat": 3, "dir": 23, "speed": 1.6},
{"lon": 1, "lat": 4, "dir": -18, "speed": 1.4},
{"lon": 2, "lat": 0, "dir": 187, "speed": 2.5},
{"lon": 2, "lat": 1, "dir": 169, "speed": 2.4},
{"lon": 2, "lat": 2, "dir": 117, "speed": 2.2},
{"lon": 2, "lat": 3, "dir": 47, "speed": 1.8},
{"lon": 2, "lat": 4, "dir": -27, "speed": 1.4},
{"lon": 3, "lat": 0, "dir": 234, "speed": 2.8},
{"lon": 3, "lat": 1, "dir": 212, "speed": 2.7},
{"lon": 3, "lat": 2, "dir": 151, "speed": 2.3},
{"lon": 3, "lat": 3, "dir": 67, "speed": 1.9},
{"lon": 3, "lat": 4, "dir": -22, "speed": 1.4},
{"lon": 4, "lat": 0, "dir": 236, "speed": 2.8},
{"lon": 4, "lat": 1, "dir": 216, "speed": 2.7},
{"lon": 4, "lat": 2, "dir": 160, "speed": 2.4},
{"lon": 4, "lat": 3, "dir": 83, "speed": 2},
{"lon": 4, "lat": 4, "dir": 4, "speed": 1.5}
]
},
"marks": [
{
"mark": "vector",
"data": "wind",
"x": "lon",
"y": "lat",
"rotate": "dir",
"length": "speed",
"stroke": "speed"
}
]
}vector. Edit in the playgroundWaffle
{
"data": {
"fruit": [{"fruit": "apples", "count": 23}, {"fruit": "bananas", "count": 15}, {"fruit": "cherries", "count": 31}]
},
"marks": [
{"mark": "waffleY", "data": "fruit", "x": "fruit", "y": "count", "fill": "fruit", "unit": 1, "gap": 2},
{"mark": "ruleY", "data": [0]}
]
}waffleY, ruleY. Edit in the playground