vanCrime
VanAreas
VanAreas.objects.VancouverAreaSize.geometries[0].properties.population
PopMap = VegaLite({
width: 500,
height: 300,
data: {
values: VanAreas,
format: {
type: "topojson",
feature: "VancouverAreaSize"
}
},
projection: {
type: "mercator"
},
mark: "geoshape",
encoding: {
fill: {
field: "properties.density",
type: "quantitative",
scale: {"scheme": "greys"}
},
stroke: {
value: "black"
},
tooltip: [
{field: "properties.NAME", title: "Name"},
{field: "properties.density", title: "#persons/500sqft"}
]
}
})
CrimesMap = VegaLite({
width: 600,
height: 400,
layer: [{
data: {
values: VanAreas,
format: {
type: "topojson",
feature: "VancouverAreaSize"
}
},
projection: {
type: "mercator"
},
mark: "geoshape",
encoding: {
fill: {
field: "properties.density",
type: "quantitative",
title: "Density",
scale: {"scheme": "greys"}
},
stroke: {
value: "black"
},
tooltip: [
{field: "properties.NAME", title: "Name"},
{field: "properties.density", title: "#persons/500sqft"}
]
}
}, {
data: {
values: vanCrime,
format: {
type: "json",
property: "features",
}
},
projection: {
type: "mercator"
},
mark: "circle",
encoding: {
longitude: {
field: "properties.lng",
type: "quantitative"
},
latitude: {
field: "properties.lat",
type: "quantitative"
},
size: {value: 12},
color: {
scale: {
domain: ['Non-vehicular', 'Vehicular'],
range: ['#ff0000', '#00aaff']
},
field: "properties.Offense Type",
title: "Offense Type",
type: "nominal"
},
tooltip: [
{field: "properties.Offense Type", title: "Offense Type",type: "nominal"},
{field: "properties.Offense", title: "Offense",type: "nominal"},
{field: "properties.NEIGHBOURHOOD", title: "Neighbourhood", type: "nominal"}
]
}
}
]
})
TimeOfCrimes = VegaLite({
vconcat:[
{
width: 600,
height: 400,
layer: [{
data: {
values: VanAreas,
format: {
type: "topojson",
feature: "VancouverAreaSize"
}
},
projection: {
type: "mercator"
},
mark: "geoshape",
encoding: {
fill: {
field: "properties.density",
type: "quantitative",
title: "Density",
scale: {"scheme": "greys"}
},
stroke: {
value: "black"
},
tooltip: [
{field: "properties.NAME", title: "Name"},
{field: "properties.density", title: "#persons/500sqft"}
]
}
}, {
data: {
values: vanCrime2,
},
projection: {
type: "mercator"
},
mark: "circle",
transform: [
{filter: {selection: "brush"}}
],
encoding: {
longitude: {
field: "lng",
type: "quantitative",
},
latitude: {
field: "lat",
type: "quantitative"
},
size: {value: 12},
color: {
scale: {
domain: ['Non-vehicular', 'Vehicular'],
range: ['#ff0000', '#00aaff']
},
field: "Offense Type",
title: "Offense Type",
type: "nominal"
},
detail: {
field: "date",
type: "nominal"
},
tooltip: [
{field: "Offense Type", title: "Offense Type",type: "nominal"},
{field: "Offense", title: "Offense",type: "nominal"},
{field: "NEIGHBOURHOOD", title: "Neighbourhood", type: "nominal"},
{field: "Date", type: "nominal"}
]
}
}
]
}, {
width: 600,
height: 200,
data: {
values: vanCrime2,
},
selection: {
brush: { type: "interval", encodings: ["x"]}
},
mark: "line",
encoding: {
x: {timeunit: "monthday", field: "Date", type: "temporal"},
y: {aggregate: "count" , field: "*", type: "quantitative"},
color: {
field: "Offense Type",
title: "Offense Type",
scale: {
domain: ['Non-vehicular', 'Vehicular'],
range: ['#ff0000', '#00aaff']
}
}
}
}
]
})
Chimap = VegaLite({
width: 500,
height: 300,
data: {
values: ChicagoTopoJson,
format: {
type: "topojson",
feature: "chicago-community-areas"
}
},
projection: {
type: "mercator"
},
mark: "geoshape",
encoding: {
fill: {
field: "properties.shape_area",
type: "quantitative",
scale: {"scheme": "greys"}
},
stroke: {
value: "black"
},
}
})
ChicagoTopoJson = d3.json("https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/chicago-community-areas.topojson")
ChicagoGeoJson = d3.json("https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/chicago-community-areas.geojson")
crimes2 = Crimes.filter( d => d.Longitude < 0)
ChimaCrime = VegaLite({
width: 500,
height: 300,
layer: [
{
data: {
values: ChicagoTopoJson,
format: {
type: "topojson",
feature: "chicago-community-areas"
}
},
projection: {
type: "mercator"
},
mark: "geoshape",
encoding: {
fill: {
field: "properties.shape_area",
type: "quantitative",
scale: {"scheme": "greys"}
},
stroke: {
value: "black"
},
}
}, {
data: {
values: crimes2,
},
transform: [
// {filter: {field: "Longitude", grt: 0}}
],
projection: {
type: "mercator"
},
mark: {type: "circle", color: "black"},
encoding: {
longitude: {
field: "Longitude",
type: "quantitative",
},
latitude: {
field: "Latitude",
type: "quantitative"
},
size: {value: 12},
}
}
]
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
import {vanCrime as vanCrime} from '@sfu-iat355/vancouver-crime-data'
import {vanAreasComplete as VanAreas} from '@drlynb/exploring-the-vega-lite-api-for-mapping-vancouver-data'
VegaLite = require('vega-embed@6')
d3 = require('d3@5')
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.
