#Boxplot
#Basic Boxplot
A boxplot showing the distribution of data based on a five-number summary.
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
"chartType": "boxPlot",
"dataset": [
{
"Survived": 0,
"Sex": "male",
"Age": 55
},
{
"Survived": 1,
"Sex": "female",
"Age": 49
},
{
"Survived": 1,
"Sex": "female",
"Age": 36
},
{
"Survived": 0,
"Sex": "male",
"Age": 19
},
{
"Survived": 0,
"Sex": "male",
"Age": 14
},
{
"Survived": 1,
"Sex": "female",
"Age": 55
},
{
"Survived": 0,
"Sex": "female",
"Age": null
},
{
"Survived": 0,
"Sex": "male",
"Age": 28
},
{
"Survived": 0,
"Sex": "female",
"Age": 45
},
{
"Survived": 1,
"Sex": "male",
"Age": 6
},
{
"Survived": 1,
"Sex": "female",
"Age": 36
},
{
"Survived": 0,
"Sex": "male",
"Age": 28
},
{
"Survived": 0,
"Sex": "male",
"Age": 1
},
{
"Survived": 0,
"Sex": "male",
"Age": 18
},
{
"Survived": 0,
"Sex": "male",
"Age": 33
},
{
"Survived": 0,
"Sex": "male",
"Age": 52
},
{
"Survived": 1,
"Sex": "male",
"Age": 29
},
{
"Survived": 0,
"Sex": "male",
"Age": 17
},
{
"Survived": 0,
"Sex": "male",
"Age": 29
},
{
"Survived": 0,
"Sex": "male",
"Age": 28
},
{
"Survived": 1,
"Sex": "female",
"Age": 7
},
{
"Survived": 0,
"Sex": "male",
"Age": 19
},
{
"Survived": 0,
"Sex": "male",
"Age": 26
},
{
"Survived": 1,
"Sex": "female",
"Age": 36
},
{
"Survived": 1,
"Sex": "female",
"Age": 21
},
{
"Survived": 0,
"Sex": "male",
"Age": 28
},
{
"Survived": 0,
"Sex": "male",
"Age": 29
},
{
"Survived": 1,
"Sex": "male",
"Age": 21
},
{
"Survived": 0,
"Sex": "male",
"Age": 44
},
{
"Survived": 1,
"Sex": "male",
"Age": 0.42
},
{
"Survived": 0,
"Sex": "male",
"Age": 34
},
{
"Survived": 1,
"Sex": "male",
"Age": 16
},
{
"Survived": 1,
"Sex": "female",
"Age": 30
},
{
"Survived": 1,
"Sex": "male",
"Age": 28
},
{
"Survived": 0,
"Sex": "male",
"Age": 26
},
{
"Survived": 1,
"Sex": "female",
"Age": 36
},
{
"Survived": 0,
"Sex": "male",
"Age": 47
},
{
"Survived": 0,
"Sex": "male",
"Age": 31
},
{
"Survived": 1,
"Sex": "female",
"Age": 13
},
{
"Survived": 1,
"Sex": "female",
"Age": null
},
{
"Survived": 0,
"Sex": "male",
"Age": 19
},
{
"Survived": 0,
"Sex": "male",
"Age": 18
},
{
"Survived": 0,
"Sex": "male",
"Age": 22
},
{
"Survived": 1,
"Sex": "female",
"Age": 17
},
{
"Survived": 0,
"Sex": "male",
"Age": 40
},
{
"Survived": 0,
"Sex": "male",
"Age": 36
},
{
"Survived": 1,
"Sex": "male",
"Age": 1
},
{
"Survived": 0,
"Sex": "male",
"Age": 18
},
{
"Survived": 0,
"Sex": "male",
"Age": 28
},
{
"Survived": 1,
"Sex": "female",
"Age": 58
},
{
"Survived": 0,
"Sex": "male",
"Age": 28.5
},
{
"Survived": 0,
"Sex": "male",
"Age": 24
},
{
"Survived": 0,
"Sex": "male",
"Age": 36
},
{
"Survived": 1,
"Sex": "female",
"Age": 23
},
{
"Survived": 0,
"Sex": "male",
"Age": 65
},
{
"Survived": 0,
"Sex": "male",
"Age": 52
},
{
"Survived": 0,
"Sex": "male",
"Age": 32
},
{
"Survived": 1,
"Sex": "female",
"Age": 35
},
{
"Survived": 1,
"Sex": "female",
"Age": 27
},
{
"Survived": 1,
"Sex": "female",
"Age": 15
},
{
"Survived": 0,
"Sex": "male",
"Age": 20
},
{
"Survived": 1,
"Sex": "male",
"Age": 39
},
{
"Survived": 0,
"Sex": "male",
"Age": 71
},
{
"Survived": 1,
"Sex": "female",
"Age": 33
},
{
"Survived": 1,
"Sex": "female",
"Age": 36
},
{
"Survived": 1,
"Sex": "female",
"Age": 5
},
{
"Survived": 0,
"Sex": "male",
"Age": 17
},
{
"Survived": 0,
"Sex": "female",
"Age": 10
},
{
"Survived": 0,
"Sex": "male",
"Age": 60
},
{
"Survived": 0,
"Sex": "male",
"Age": 48
},
{
"Survived": 0,
"Sex": "male",
"Age": 22
},
{
"Survived": 0,
"Sex": "male",
"Age": 40.5
},
{
"Survived": 1,
"Sex": "male",
"Age": 36
},
{
"Survived": 1,
"Sex": "female",
"Age": 33
},
{
"Survived": 1,
"Sex": "female",
"Age": 30
},
{
"Survived": 0,
"Sex": "male",
"Age": 62
},
{
"Survived": 0,
"Sex": "male",
"Age": 25
},
{
"Survived": 1,
"Sex": "female",
"Age": 2
},
{
"Survived": 1,
"Sex": "female",
"Age": null
},
{
"Survived": 1,
"Sex": "female",
"Age": 34
},
{
"Survived": 1,
"Sex": "male",
"Age": 36
},
{
"Survived": 0,
"Sex": "male",
"Age": 35
},
{
"Survived": 0,
"Sex": "male",
"Age": 18
},
{
"Survived": 0,
"Sex": "male",
"Age": 45
},
{
"Survived": 1,
"Sex": "female",
"Age": 63
},
{
"Survived": 1,
"Sex": "male",
"Age": 30
},
{
"Survived": 1,
"Sex": "female",
"Age": 19
},
{
"Survived": 0,
"Sex": "male",
"Age": 18
},
{
"Survived": 1,
"Sex": "female",
"Age": null
},
{
"Survived": 1,
"Sex": "female",
"Age": 24
},
{
"Survived": 0,
"Sex": "male",
"Age": 30
},
{
"Survived": 0,
"Sex": "male",
"Age": 40.5
},
{
"Survived": 0,
"Sex": "female",
"Age": 24
},
{
"Survived": 0,
"Sex": "male",
"Age": null
},
{
"Survived": 0,
"Sex": "male",
"Age": 34
},
{
"Survived": 1,
"Sex": "male",
"Age": 32
},
{
"Survived": 1,
"Sex": "female",
"Age": 27
},
{
"Survived": 1,
"Sex": "male",
"Age": null
},
{
"Survived": 1,
"Sex": "female",
"Age": 42
},
{
"Survived": 0,
"Sex": "male",
"Age": 32
},
{
"Survived": 0,
"Sex": "male",
"Age": 22
},
{
"Survived": 1,
"Sex": "female",
"Age": 33
},
{
"Survived": 1,
"Sex": "female",
"Age": 48
},
{
"Survived": 0,
"Sex": "male",
"Age": 47
},
{
"Survived": 1,
"Sex": "female",
"Age": 30
},
{
"Survived": 0,
"Sex": "male",
"Age": 16
}
],
"dimensions": [
{
"id": "Survived",
"encoding": "xAxis"
},
{
"id": "Sex",
"encoding": "color"
}
],
"measures": [
{
"id": "Age",
"encoding": "value"
}
]
}
return <VSeedRender vseed={vseedConfig} />
}#Pivot Boxplot
Pivot Boxplot
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
"chartType": "boxPlot",
"dataset": [
{
"color": "red",
"shape": "circle",
"Sex": "male",
"v": 1
},
{
"color": "red",
"shape": "circle",
"Sex": "male",
"v": 1
},
{
"color": "red",
"shape": "circle",
"Sex": "male",
"v": 1
},
{
"color": "red",
"shape": "circle",
"Sex": "male",
"v": 2
},
{
"color": "red",
"shape": "circle",
"Sex": "female",
"v": 5
},
{
"color": "red",
"shape": "circle",
"Sex": "female",
"v": 7
},
{
"color": "red",
"shape": "circle",
"Sex": "female",
"v": 8
},
{
"color": "red",
"shape": "circle",
"Sex": "female",
"v": 9
},
{
"color": "red",
"shape": "circle",
"Sex": "female",
"v": 10
},
{
"color": "blue",
"shape": "circle",
"Sex": "male",
"v": 1
},
{
"color": "blue",
"shape": "circle",
"Sex": "male",
"v": 1
},
{
"color": "blue",
"shape": "circle",
"Sex": "male",
"v": 1
},
{
"color": "blue",
"shape": "circle",
"Sex": "male",
"v": 2
},
{
"color": "blue",
"shape": "circle",
"Sex": "female",
"v": 5
},
{
"color": "blue",
"shape": "circle",
"Sex": "female",
"v": 7
},
{
"color": "blue",
"shape": "circle",
"Sex": "female",
"v": 8
},
{
"color": "blue",
"shape": "circle",
"Sex": "female",
"v": 9
},
{
"color": "red",
"shape": "triangle",
"Sex": "male",
"v": 1
},
{
"color": "red",
"shape": "triangle",
"Sex": "male",
"v": 1
},
{
"color": "red",
"shape": "triangle",
"Sex": "male",
"v": 1
},
{
"color": "red",
"shape": "triangle",
"Sex": "male",
"v": 2
},
{
"color": "red",
"shape": "triangle",
"Sex": "female",
"v": 5
},
{
"color": "red",
"shape": "triangle",
"Sex": "female",
"v": 7
},
{
"color": "red",
"shape": "triangle",
"Sex": "female",
"v": 8
},
{
"color": "red",
"shape": "triangle",
"Sex": "female",
"v": 9
},
{
"color": "blue",
"shape": "triangle",
"Sex": "male",
"v": 1
},
{
"color": "blue",
"shape": "triangle",
"Sex": "male",
"v": 1
},
{
"color": "blue",
"shape": "triangle",
"Sex": "male",
"v": 1
},
{
"color": "blue",
"shape": "triangle",
"Sex": "male",
"v": 2
},
{
"color": "blue",
"shape": "triangle",
"Sex": "female",
"v": 5
},
{
"color": "blue",
"shape": "triangle",
"Sex": "female",
"v": 7
},
{
"color": "blue",
"shape": "triangle",
"Sex": "female",
"v": 8
},
{
"color": "blue",
"shape": "triangle",
"Sex": "female",
"v": 9
}
],
"dimensions": [
{
"id": "color",
"encoding": "row"
},
{
"id": "shape",
"encoding": "column"
},
{
"id": "Sex",
"encoding": "xAxis"
}
],
"measures": [
{
"id": "v",
"encoding": "value"
}
]
}
return <VSeedRender vseed={vseedConfig} />
}