{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "Venn diagram with multiple arcs generated from a dataset.",
"width": 650,
"height": 200,
"data": [
{
"name": "vennData",
"values": [
{
"x": 120,
"y": 100,
"innerRadius": 0,
"outerRadius": 60,
"fill": "#00497666",
"opacity": 0.6
},
{
"x": 120,
"y": 100,
"innerRadius": 60,
"outerRadius": 60,
"stroke": "black",
"strokeWidth": 2
},
{
"x": 210,
"y": 100,
"innerRadius": 0,
"outerRadius": 60,
"fill": "#00497666",
"opacity": 0.6
},
{
"x": 210,
"y": 100,
"innerRadius": 60,
"outerRadius": 60,
"stroke": "black",
"strokeWidth": 2
},
{
"x": 400,
"y": 100,
"innerRadius": 60,
"outerRadius": 60,
"stroke": "black",
"strokeWidth": 2
},
{
"x": 490,
"y": 100,
"innerRadius": 0,
"outerRadius": 60,
"fill": "#00497699",
"opacity": 0.6
},
{
"x": 490,
"y": 100,
"innerRadius": 60,
"outerRadius": 60,
"stroke": "black",
"strokeWidth": 2
}
]
},
{
"name": "datarect",
"values": [
{
"x": 45,
"y": 5,
"width": 240,
"height": 185
},
{
"x": 325,
"y": 5,
"width": 240,
"height": 185
}
]
},
{
"name": "datatext",
"values": [
{
"x": 0,
"y": 105,
"text": "P(A|B) =",
"fontSize": 14,
"fontWeight": "bold"
},
{
"x": 165,
"y": 30,
"text": "P(A and B)",
"fontSize": 14,
"fontWeight": "bold"
},
{
"x": 100,
"y": 105,
"text": "A",
"fontSize": 14,
"fontWeight": "bold"
},
{
"x": 240,
"y": 105,
"text": "B",
"fontSize": 14,
"fontWeight": "bold"
},
{
"x": 305,
"y": 105,
"text": "÷",
"fontSize": 18,
"fontWeight": "bold"
},
{
"x": 485,
"y": 30,
"text": "P(B)",
"fontSize": 14,
"fontWeight": "bold"
},
{
"x": 380,
"y": 105,
"text": "A",
"fontSize": 14,
"fontWeight": "bold"
},
{
"x": 520,
"y": 105,
"text": "B",
"fontSize": 14,
"fontWeight": "bold"
}
]
},
{
"name": "arrowData",
"values": [
{
"x": 165,
"y": 35,
"y2": 85
},
{
"x": 485,
"y": 35,
"y2": 85
}
]
},
{
"name": "triangleData",
"values": [
{
"x": 165,
"y": 85
},
{
"x": 485,
"y": 85
}
]
}
],
"marks": [
{
"type": "rect",
"from": {
"data": "datarect"
},
"encode": {
"enter": {
"x": {
"field": "x"
},
"y": {
"field": "y"
},
"width": {
"field": "width"
},
"height": {
"field": "height"
},
"stroke": {
"value": "black"
},
"fill": {
"value": "transparent"
},
"strokeWidth": {
"value": 2
}
}
}
},
{
"type": "arc",
"from": {
"data": "vennData"
},
"encode": {
"enter": {
"x": {
"field": "x"
},
"y": {
"field": "y"
},
"innerRadius": {
"field": "innerRadius"
},
"outerRadius": {
"field": "outerRadius"
},
"startAngle": {
"value": 0
},
"endAngle": {
"value": 6.283185
},
"fill": {
"field": "fill"
},
"opacity": {
"field": "opacity"
},
"stroke": {
"field": "stroke"
},
"strokeWidth": {
"field": "strokeWidth"
}
}
}
},
{
"type": "text",
"from": {
"data": "datatext"
},
"encode": {
"enter": {
"x": {
"field": "x"
},
"y": {
"field": "y"
},
"text": {
"field": "text"
},
"fontSize": {
"field": "fontSize"
},
"fontWeight": {
"field": "fontWeight"
},
"align": {
"value": "center"
}
}
}
},
{
"type": "rule",
"from": {
"data": "arrowData"
},
"encode": {
"enter": {
"x": {
"field": "x"
},
"y": {
"field": "y"
},
"y2": {
"field": "y2"
},
"stroke": {
"value": "black"
},
"strokeWidth": {
"value": 2
}
}
}
},
{
"type": "symbol",
"from": {
"data": "triangleData"
},
"encode": {
"enter": {
"x": {
"field": "x"
},
"y": {
"field": "y"
},
"size": {
"value": 50
},
"fill": {
"value": "black"
},
"stroke": {
"value": "black"
},
"strokeWidth": {
"value": 2
},
"shape": {
"value": "triangle-down"
}
}
}
}
],
"config": {
"view": {
"stroke": "transparent"
},
"background": "white"
}
}