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