Published
Edited
May 26, 2021
Importers
d3 = require('d3@5')
VT =d3.csvParse(await FileAttachment("test.csv").text(),d => {
if (d["Municipality"].includes("Total")) return undefined;
return {
//+d to convert string in to int
municipality:d.Municipality,
location: d.Location,
speedVTs:+d["Speed VTs"].replace(',',''),
redLightVTs:+d["Red Light VTs"].replace(',',''),
totalVTs:+d["Total VTs"].replace(',',''),
}
})
VTc = d3.VT,d => {
if (d["Red Light VTs"].includes("NaN")) return '0';
return {
//+d to convert string in to int
municipality:d.Municipality,
location: d.Location,
speedVTs:+d["Speed VTs"],
redLightVTs:+d["Red Light VTs"],
totalVTs:+d["Total VTs"],
}
}
Vancouver = VT.filter(x => x.municipality == "Vancouver");
VancouverSorted= Vancouver.sort((a,b) => d3.descending(a.redLightVTs, b.redLightVTs))
//top 5
{
let VancouverTopFive = [];
for (let i = 0; i <= 4; i++) {
VancouverTopFive[i]=VancouverSorted[i];
}
return VancouverTopFive;
}
totalRVTsVancouver = VT.filter(x => x.municipality == "Vancouver").reduce((sum,d)=> sum + (d.redLightVTs),0);
Burnaby = VT.filter(x => x.municipality == "Burnaby");
totalRVTsBurnaby = VT.filter(x => x.municipality == "Burnaby").reduce((sum,d)=> sum + (d.redLightVTs),0);
Coquitlam = VT.filter(x => x.municipality == "Coquitlam");
totalRVTsCoquitlam = VT.filter(x => x.municipality == "Coquitlam").reduce((sum,d)=> sum + (d.redLightVTs),0);
PortCoquitlam = VT.filter(x => x.municipality == "Port Coquitlam");
totalRVTsPortCoquitlam = VT.filter(x => x.municipality == "Port Coquitlam").reduce((sum,d)=> sum + (d.redLightVTs),0);
PortMoody = VT.filter(x => x.municipality == "Port Moody");
//PortMoody[1].location
totalRVTsPortMoody = VT.filter(x => x.municipality == "Port Moody").reduce((sum,d)=> sum + (d.redLightVTs),0);
cities = [
{"city":"Vancouver", "totalRVTs":totalRVTsVancouver },
{"city":"Burnaby", "totalRVTs":totalRVTsBurnaby },
{"city":"Coquitlam", "totalRVTs":totalRVTsCoquitlam },
{"city":"Port Coquitlam", "totalRVTs":totalRVTsPortCoquitlam },
{"city":"Port Moody", "totalRVTs":totalRVTsPortMoody },
]
VTPerCity = d3.nest()
.key(function(d) { return d.Municipality; })
.entries(VT);
VTPerCity2 = d3.nest()
.key(function(d) { return d3.sum(d3.values(d.Municipality)); })
.entries(VT);
VegaLite = require("vega-embed@5")
VegaLite ({
width: 600,
height:400,
data: {values: cities},
mark: "bar",
encoding: {
y:{field: "city", type: "nominal", title: "City"},
x:{aggregate: "totalRVTs", field: "totalRVTs", type: "quantitative", title: "Red Light Violation Tickets"},
tooltip: {
field: "totalRVTs", title: "Number of Tickets",type: "quantitative",
},
color: {
condition:{
field: "city",
type: "nominal",
selection: "offenseSelect",
//},
},
value: "lightgrey",
}
},
selection: {
offenseSelect: {fields: ["city"], on: "mouseover", type: "multi"}
},
})
VegaLite ({
width: 600,
height:400,
data: {values: VT},
mark: "circle",
encoding: {
y:{field: "municipality", type: "nominal", title: "City"},
x:{aggregate: "redLightVTs", field: "redLightVTs", type: "quantitative", title: "Red Light Violation Tickets"},
tooltip: [{
field: "redLightVTs", title: "Number of Tickets",type: "quantitative", },{
field: "location", title: "Location", type: "string",
}],
color: {
condition:{
field: "municipality",
type: "nominal",
selection: "offenseSelect",
//},
},
value: "lightgrey",
}
},
selection: {
offenseSelect: {fields: ["municipality"], on: "mouseover", type: "multi"}
},
})
VegaLite ({
width: 600,
height:400,
data: {values: VT},
mark: "point",
encoding: {
y:{field: "municipality", type: "nominal", title: "City"},
x:{aggregate: "redLightVTs", field: "redLightVTs", type: "quantitative", title: "Red Light Violation Tickets"},
size: {field: "redLightVTs", type: "quantitative", scale: {domain: [1, 3530]}},
tooltip: [{
field: "redLightVTs", title: "Number of Tickets",type: "quantitative", },{
field: "location", title: "Location", type: "string",
}],
color: {
condition:{
field: "municipality",
type: "nominal",
selection: "offenseSelect",
//},
},
value: "lightgrey",
}
},
selection: {
offenseSelect: {fields: ["municipality"], on: "mouseover", type: "multi"}
},
})
V = require("@observablehq/vega-lite@0.2")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.