{
const colors = {
domain: ['IllegalDumping', 'BuildingMaintenance', 'Electrical', 'StreetSweeping', 'RoadRepair','VegetationControl','Graffiti','Drainage','StreetLights','Survey'],
range: ['Blue','DarkOrange','Crimson','CornflowerBlue','DarkSeaGreen','Gold','DarkMagenta','DeepPink','Peru','Silver']
}
const shapes = {
domain: ['IllegalDumping', 'BuildingMaintenance', 'Electrical', 'StreetSweeping', 'RoadRepair','VegetationControl','Graffiti','Drainage','StreetLights','Survey'],
}
const basic1 = vl.markLine({strokewidth:5,opacity:0.5,interpolate:'monotone'})
.data(stats)
.encode(
vl.y().fieldQ('NumRequests')
.title("Number of Requests"),
vl.x().fieldO('Year')
.axis({ lableAngle: 0}),
vl.color().fieldN('ProblemType').scale(colors).legend({orient:"top-left"}),
);
const basic2 = vl.markPoint({size:100,opacity:1,filled:true})
.data(stats)
.encode(
vl.x().fieldT('Year')
.axis({ labelAngle: 0}),
vl.y().fieldQ('NumRequests'),
vl.color().fieldN('ProblemType').scale(colors),
vl.shape().fieldN('ProblemType').scale(shapes)
);
const leftone = vl.layer(basic1, basic2).title({text:'By Year', size:20, type:'Tahoma'}).height(600).width(300);
const bars= vl.markBar()
.encode(
vl.y().fieldO('Year').title(null)
.axis({labelAngle:0}),
vl.x().fieldQ('NumRequests').title(null).axis({labelAngle:0}),
vl.color().fieldQ('Year').scale({scheme: 'greys'} ).legend(null)
)
const text = vl.markText({align:'left', dx:3, baseline: 'middle'})
.encode(
vl.text().fieldQ('NumRequests'),
vl.x().fieldQ('NumRequests'),
vl.y().fieldO('Year')
)
const rightone= vl.layer(text, bars).width(300).height(32)
.facet({row: vl.row('ProblemType').title(null).header({labelAngle: 0,labelAlign: "left", labelFont: "Tahoma",labelFontStyle: "bold", labelFontSize: 10}).sort(['IllegalDumping', 'BuildingMaintenance', 'Electrical', 'StreetSweeping', 'Graffiti', 'RoadRepair', 'Drainage', 'StreetLights', 'VegetationControl', 'Survey'])})
.title({text:'By Problem Type', fontSize:20, anchor: 'middle'})
.data(stats);
return vl.hconcat(leftone,rightone).title({
text: 'City of Springfield Service Request Statistics (2009-2012)',
anchor: 'middle',
font: 'Tahoma',
fontSize: 20
})
.render();
}