{
const data =cityArray.filter(checkCountCity);
const color = d3.scaleSequential(d3.interpolateViridis).domain([0, data.length-1]);
const colors = {
domain: data.map(d=>d.group),
range: data.map( (i,j) => color(j) )
};
return vl.markArc({outerRadius: 150})
.data(data)
.encode(
vl.theta().fieldQ('count'),
vl.color().fieldN('name'),
vl.tooltip([
{ field: "name", type: "nominal" },
{ field: "count", type: "quantitative" }
])
)
.config({view: {stroke: null}})
.width(300)
.height(300)
.render();
}