<p>Pie Chart Select - uses Vega Schema</p>
<cob-chart>
<script type="application/json" slot="config">
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"boston": {
"chartID": "pieChart",
"selectField": "Department",
"defaultSelection": "Election Department"
},
"width": 200,
"height": 200,
"autosize": {
"type": "pad",
"resize": true
},
"padding": 0,
"data": [{
"name": "table",
"url": "https://s3.amazonaws.com/public-budget-data/test-data/testData-pieChartSelect.csv",
"format": {
"type": "csv",
"parse": {
"Amount": "number"
}
},
"transform": [{
"type": "filter",
"expr": "datum.Year === 'FY19 Adopted'"
},
{
"type": "filter",
"expr": "if(select === 'All', datum.Department, datum.Department === select)"
},
{
"type": "pie",
"field": "Amount",
"sort": true
}
]
}],
"scales": [{
"name": "color",
"type": "ordinal",
"domain": {
"data": "table",
"field": "Expense Category"
},
"range": {
"scheme": "tableau10"
}
}],
"legends": [{
"fill": "color",
"orient": "bottom",
"labelFont": "Lora",
"labelLimit": 500,
"labelFontSize": 14,
"offset": 5
}],
"signals": [{
"name": "select",
"value": "All",
"bind": {
"input": "select",
"name": "Select a Department: ",
"options": [
"Election Department",
"Law Department",
"Property Management Department"
]
}
}],
"marks": [{
"type": "arc",
"from": {
"data": "table"
},
"encode": {
"enter": {
"fill": {
"scale": "color",
"field": "Expense Category"
},
"x": {
"signal": "width / 2"
},
"y": {
"signal": "height / 2"
},
"tooltip": {
"signal": "{title: datum.Source, 'Amount of Budget': format(datum.Amount,'$,'), 'Expense Category': datum['Expense Category'], 'Department': datum.Department}"
}
},
"update": {
"startAngle": {
"field": "startAngle"
},
"endAngle": {
"field": "endAngle"
},
"padAngle": 0,
"innerRadius": {
"signal": "width / 4"
},
"outerRadius": {
"signal": "width / 2"
},
"cornerRadius": 0
}
}
}]
}
</script>
</cob-chart>
This component uses Vega and VegaLite to render charts on a boston.gov page.
More documentation can be found in the Digital Team’s GitBook space.
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
config |
config |
any |
undefined |
Built with StencilJS