Published
Edited
Feb 13, 2020
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`## Load libraries, look at data`
Insert cell
md`Load in libraries`
Insert cell
import {vl} from '@vega/vega-lite-api'
Insert cell
d3 = require('d3')
Insert cell
import {printTable} from '@uwdata/data-utilities'
Insert cell
Insert cell
stats = d3.csvParse(await FileAttachment("cityfixitdata@2.csv").text(), d3.autoType)
Insert cell
md`Take a look at the first five records, using a nice formatter`
Insert cell
printTable(stats.slice(0,5))
Insert cell
md`Look at the end of the table with negative indexing`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
vl.markLine()
.data(stats)
.encode(
vl.x().fieldO('Year'),
vl.y().fieldQ('NumRequests'),
vl.color().fieldN('ProblemType'),
)
.render()
Insert cell
Insert cell
html`<figure>
${await FileAttachment("linechart2.png").image()}

</figure>`
Insert cell


{
const basic1 = vl.markLine({strokewidth:5,opacity:0.5,interpolate:'monotone'})
.data(stats)
.encode(
vl.y().fieldQ('NumRequests'),
vl.x().fieldO('Year'),
vl.color().fieldN('ProblemType'),
)
;
const basic2 = vl.markPoint({size:100,opacity:1,filled:true})
.data(stats)
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('NumRequests'),
vl.color().fieldN('ProblemType')
);

return vl.layer(basic1, basic2).height(600).width(300).render();
}


Insert cell
Insert cell
html`<figure>
${await FileAttachment("linechart3.png").image()}

</figure>`
Insert cell

{
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'),
)
;
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'),
vl.shape().fieldN('ProblemType')
);

return vl.layer(basic1, basic2).height(600).width(300).render();
}

Insert cell
Insert cell
html`<figure>
${await FileAttachment("linechart4.png").image()}

</figure>`
Insert cell
//Blue,DarkOrange,Crimson,CornflowerBlue,DarkSeaGreen,Gold,DarkMagenta,DeepPink,Peru,Silver


{
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),
);
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)
);

return vl.layer(basic1, basic2).height(600).width(300).render();
}


Insert cell
Insert cell
html`<figure>
${await FileAttachment("linechart5.png").image()}

</figure>`
Insert cell
//Blue,DarkOrange,Crimson,CornflowerBlue,DarkSeaGreen,Gold,DarkMagenta,DeepPink,Peru,Silver


{
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)
);

return vl.layer(basic1, basic2).title({text:'By Year', size:20, type:'Tahoma'}).height(600).width(300).render();
}



Insert cell
Insert cell
Insert cell
Insert cell
html`<figure>
${await FileAttachment("barchart3.png").image()}

</figure>`
Insert cell
vl.markBar()
.encode(
vl.y().fieldO('Year'),
vl.x().fieldQ('NumRequests'),
vl.color().fieldQ('Year').scale({scheme: 'greys'} )
)
.facet({row: vl.fieldN('ProblemType')})
.data(stats)
.render();
Insert cell
Insert cell
html`<figure>
${await FileAttachment("barchart4.png").image()}

</figure>`
Insert cell
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)
)
.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)
.render();
Insert cell
Insert cell
html`<figure>
${await FileAttachment("barchart5.png").image()}

</figure>`
Insert cell
{
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:10, baseline: 'middle'})
.encode(
vl.text().fieldQ('NumRequests'),
vl.x().fieldQ('NumRequests'),
vl.y().fieldO('Year')
)

return vl.layer(text, bars)
.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)
.render();

}
Insert cell
Insert cell
html`<figure>
${await FileAttachment("combined_chart1.png").image()}

</figure>`
Insert cell

//Blue,DarkOrange,Crimson,CornflowerBlue,DarkSeaGreen,Gold,DarkMagenta,DeepPink,Peru,Silver
{
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();

}
Insert cell
Insert cell
html`<figure>
${await FileAttachment("combined_withclickfix@1.png").image()}

</figure>`
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more