mattijn
5/11/2018 - 10:33 PM
vega3_grouped_piechart_jan.json
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 500,
"height": 500,
"config": {"padding": {"left": 5, "right": 5, "bottom": 5}},
"data": [
{
"name": "data_table",
"values": [
{"perc": 0, "sector": 22.5, "contribution": 78, "toestand": "Open"},
{"perc": 0.1, "sector": 45, "contribution": 78, "toestand": "Open"},
{"perc": 0.1, "sector": 67.5, "contribution": 78, "toestand": "Open"},
{"perc": 0.1, "sector": 90, "contribution": 78, "toestand": "Open"},
{"perc": 0.6, "sector": 112.5, "contribution": 78, "toestand": "Open"},
{"perc": 6, "sector": 135, "contribution": 78, "toestand": "Open"},
{"perc": 5.8, "sector": 157.5, "contribution": 78, "toestand": "Open"},
{"perc": 8.5, "sector": 180, "contribution": 78, "toestand": "Open"},
{"perc": 18.7, "sector": 202.5, "contribution": 78, "toestand": "Open"},
{"perc": 17.3, "sector": 225, "contribution": 78, "toestand": "Open"},
{"perc": 16.1, "sector": 247.5, "contribution": 78, "toestand": "Open"},
{"perc": 25.5, "sector": 270, "contribution": 78, "toestand": "Open"},
{"perc": 1, "sector": 292.5, "contribution": 78, "toestand": "Open"},
{"perc": 0, "sector": 315, "contribution": 78, "toestand": "Open"},
{"perc": 0, "sector": 337.5, "contribution": 78, "toestand": "Open"},
{"perc": 0, "sector": 360, "contribution": 78, "toestand": "Open"},
{"perc": 3, "sector": 22.5, "contribution": 22, "toestand": "Gesloten"},
{"perc": 4, "sector": 45, "contribution": 22, "toestand": "Gesloten"},
{
"perc": 5.9,
"sector": 67.5,
"contribution": 22,
"toestand": "Gesloten"
},
{"perc": 6.1, "sector": 90, "contribution": 22, "toestand": "Gesloten"},
{
"perc": 5.3,
"sector": 112.5,
"contribution": 22,
"toestand": "Gesloten"
},
{
"perc": 6.5,
"sector": 135,
"contribution": 22,
"toestand": "Gesloten"
},
{
"perc": 6.2,
"sector": 157.5,
"contribution": 22,
"toestand": "Gesloten"
},
{
"perc": 7.7,
"sector": 180,
"contribution": 22,
"toestand": "Gesloten"
},
{
"perc": 12.7,
"sector": 202.5,
"contribution": 22,
"toestand": "Gesloten"
},
{
"perc": 13.3,
"sector": 225,
"contribution": 22,
"toestand": "Gesloten"
},
{
"perc": 11.6,
"sector": 247.5,
"contribution": 22,
"toestand": "Gesloten"
},
{"perc": 6, "sector": 270, "contribution": 22, "toestand": "Gesloten"},
{
"perc": 4.1,
"sector": 292.5,
"contribution": 22,
"toestand": "Gesloten"
},
{
"perc": 3.2,
"sector": 315,
"contribution": 22,
"toestand": "Gesloten"
},
{
"perc": 2.7,
"sector": 337.5,
"contribution": 22,
"toestand": "Gesloten"
},
{"perc": 2.1, "sector": 360, "contribution": 22, "toestand": "Gesloten"}
],
"transform": [
{
"type": "collect",
"sort": {
"field": ["sector", "toestand"],
"order": ["ascending", "ascending"]
}
},
{"type": "identifier", "as": "id"},
{
"type": "formula",
"expr": "datum.perc * datum.contribution / 100",
"as": "gewogen_bijdrage"
},
{"type": "pie", "field": "gewogen_bijdrage"}
]
},
{
"name": "data_table_pie_outer",
"source": "data_table",
"transform": [
{
"type": "pie",
"field": "gewogen_bijdrage",
"as": ["startAngle", "endAngle"]
}
]
},
{
"name": "counts",
"source": "data_table",
"transform": [
{
"type": "aggregate",
"groupby": ["toestand"],
"fields": ["contribution"],
"ops": ["mean"],
"as": ["mean_contri"]
},
{"type": "filter", "expr": "datum.toestand === signal_hover_legend"}
]
}
],
"signals": [
{"name": "metricField", "value": "gewogen_bijdrage"},
{"name": "dimensionField", "value": "sector"},
{"name": "pieparts2pi", "update": "2*PI/length(data('data_table'))"},
{
"name": "piesectors2pi",
"update": "(2*PI)/(length(data('data_table'))/2)"
},
{"name": "groupingField", "value": "toestand"},
{
"name": "signal_hover_arc",
"value": null,
"on": [
{"events": "@piechart:mouseover", "update": "datum"},
{"events": "@piechart:mouseout", "update": "null"}
]
},
{
"name": "signal_hover_legend",
"value": null,
"on": [
{
"events": "@legendLabel:mouseover, @legendSymbol:mouseover",
"update": "datum.value"
},
{"events": "@legendLabel:click, @legendSymbol:click", "update": "null"}
]
},
{
"name": "signal_selected_myvalue",
"value": null,
"update": "signal_hover_arc ? signal_hover_arc['perc'] : (signal_hover_legend ? data('counts')[0].mean_contri : null)"
},
{
"name": "signal_selected_mylabel",
"value": null,
"update": "signal_hover_arc ? signal_hover_arc['perc'] : (signal_hover_legend ? data('counts')[0].mean_contri : null)"
}
],
"scales": [
{
"name": "scale_color",
"type": "ordinal",
"domain": {"data": "data_table", "field": "toestand", "sort": true},
"range": ["#9E0041", "#0099FF"]
},
{
"name": "r",
"type": "sqrt",
"domain": {"data": "data_table", "field": "gewogen_bijdrage"},
"range": [{"signal": "width / 15"}, {"signal": "width / 2.5"}]
},
{
"name": "scale_lookup_mylabel_myvalue",
"type": "ordinal",
"domain": {"data": "data_table", "field": "toestand"},
"range": {"data": "data_table", "field": "perc"}
}
],
"marks": [
{
"name": "grid",
"type": "arc",
"from": {"data": "data_table"},
"encode": {
"enter": {
"x": {"field": {"group": "width"}, "mult": 0.5},
"y": {"field": {"group": "height"}, "mult": 0.5},
"startAngle": {"signal": "(datum.id-1)*piesectors2pi + 11.25/180*PI"},
"endAngle": {"signal": "datum.id*piesectors2pi + 11.25/180*PI"},
"cornerRadius": {"value": 2},
"padAngle": {"value": 0.02},
"fill": {"value": "lightgrey"},
"fillOpacity": {"value": 0.12},
"innerRadius": {"signal": "width / 15"},
"outerRadius": {"signal": "width / 2.5"}
}
}
},
{
"name": "grid_label",
"type": "text",
"from": {"data": "data_table"},
"encode": {
"enter": {
"x": {"field": {"group": "width"}, "mult": 0.5},
"y": {"field": {"group": "height"}, "mult": 0.5},
"radius": {"signal": "width / 2.3"},
"theta": {"signal": "(datum.sector*(PI/180))"},
"fill": {"value": "#646464"},
"fillOpacity": {"value": 1},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fontSize": {"value": 12},
"text": {"field": "sector"}
}
}
},
{
"name": "piechart",
"type": "arc",
"from": {"data": "data_table"},
"encode": {
"update": {
"cornerRadius": {"value": 2},
"x": {"field": {"group": "width"}, "mult": 0.5},
"y": {"field": {"group": "height"}, "mult": 0.5},
"startAngle": {"signal": "(datum.id-1)*pieparts2pi + 11.25/180*PI"},
"endAngle": {"signal": "datum.id*pieparts2pi + 11.25/180*PI"},
"padAngle": {"value": 0.02},
"fill": {"scale": "scale_color", "field": "toestand"},
"stroke": {"value": "white"},
"strokeWidth": {"value": 0.5},
"innerRadius": {"signal": "width / 15"},
"outerRadius": {"scale": "r", "field": "gewogen_bijdrage"},
"tooltip": {
"signal": "{\"Percentage\": ''+datum['perc'] + ' %', \"Bijdrage\": format(datum['contribution'], \"\") + ' %',\"Sector\": format(datum['sector'], \"\") + ' graden'}"
}
},
"hover": {"fill": {"value": "#ffa31a"}}
}
},
{
"type": "text",
"from": {"data": "data_table"},
"encode": {
"update": {
"x": {"signal": "width / 1.98"},
"y": {"signal": "height / 1.99"},
"text": {"signal": "signal_selected_myvalue +'%'"},
"fillOpacity": {"value": 1},
"fontSize": {"value": 20},
"fill": {
"signal": "signal_selected_mylabel ? '#ffa31a' : 'transparent'"
},
"align": {"value": "center"},
"baseline": {"value": "middle"}
}
}
}
],
"legends": [
{
"fill": "scale_color",
"title": "Toestand v.d. kering",
"orient": "none",
"titlePadding": 10,
"entryPadding": 10,
"offset": 10,
"encode": {
"symbols": {
"name": "legendSymbol",
"interactive": true,
"update": {
"shape": {"value": "square"},
"size": {"value": 120}
},
"hover": {"size": {"value": 180}}
},
"title": {"update": {"fontSize": {"value": 14}}},
"labels": {
"name": "legendLabel",
"interactive": true,
"rowPadding": {"value": 80},
"update": {
"fontSize": {"value": 12},
"fill": {"value": "#000"},
"fillOpacity": {"value": 1}
},
"hover": {"fontSize": {"value": 14}, "fillOpacity": {"value": 1}}
},
"legend": {
"update": {
"x": {"signal": "width", "offset": -120},
"y": {"signal": "height", "offset": {"signal": "-height"}}
}
}
}
}
]
}