Public
Edited
Mar 21
d3 = require("d3@6")
VegaLite = require("vega-embed@6")
//import {vanAreasComplete as VanAreas} from '@drlynb/exploring-the-vega-lite-api-for-mapping-vancouver-data'
import {vanCrim} from "@sfu-iat355/vancouver-crime-data"
//import {VanAreas} from '@sfu-iat355/introduction-to-leaflet-and-d3'
import {vanAreasComplete as VanAreas} from "@drlynb/exploring-the-vega-lite-api-for-mapping-vancouver-data"
CrimeMap = 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",
}
},
stroke: {value: "black"},
tooltip: [
{field: "properties.NAME", title: "Name"},
{field: "properties.density", title: "Population Density"}
]
}
},
{
data: {
values: vanCrime2
},
projection: {
type: "mercator']
},
mark: "circle",
encoding: {
longitude: {
field: "Ing",
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"
ふ
tooltip: [
(field: "Offense Type", title: "offense Type"}, (field: "offense", title: "offense"}, (field: "NEIGHBOURHOOD", title: "Neighbourhood"},
(field: "Date", title: "Date")
}
}
],
})
vanCrime2 = {
let i=vanCrime.features.length;
let j=0;
let k=0;
let temp = {};
let newCrime=[];
for (k=0;k<i; k++)
{
newCrime[k]= vanCrime.features[k].properties;
}
return (newCrime);
}
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.
