embedWithSpecificVersions(
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 800,
"height": 600,
"padding": {"top": 0, "left": 0, "right": 0, "bottom": 0},
"autosize": "none",
"data": [
{
"name": "vPop",
"values": populations
},
{
"name": "vanAreas2",
"values": vanAreaValues2,
"format": {"type": "topojson", "feature": "VancouverAreaSize"},
"transform": [
{
"type": "geopath",
"projection": "projection"
},
{
"type": "lookup",
"from": "vPop", "key": "Area",
"fields": ["properties.NAME"], "as": ["Population"]
},
{
"type": "formula",
"as": "density",
"expr": "datum.properties.localArea/datum.Population.Population"
}
]
},
{
name: "crime",
values: vanCrime,
format: {
type: "json",
property: "features"
}
},
{
name: "selected",
on: [
{trigger: "clear", remove: true},
{trigger: "clicked", insert: "clicked"}
]
}
],
"projections": [
{
name: "projection",
type: "mercator",
scale: 200000,
center: d3.geoCentroid(vanAreaValues)
}
],
"signals": [
{
"name": "hover", "init": null,
"streams": [
{"type": "shape:mouseover", "expr": "datum"},
{"type": "shape:mouseout", "expr": "null"}
]
},
{
"name": "title", "init":null,
"streams": [{
"type": "hover",
"expr": "hover ? hover.NAME"
}]
},
{
"name": "clear", "value": true,
"on": [
{
"events": "mouseup[!event.item]",
"update": "true",
"force": true
}
]
},
{
"name": "shift", "value": false,
"on": [
{
"events": "@legendSymbol:click, @legendLabel:click",
"update": "event.shiftKey",
"force": true
}
]
},
{
"name": "clicked", "value": null,
"on": [
{
"events": "@legendSymbol:click, @legendLabel:click",
"update": "{value: datum.value}",
"force": true
}
]
}
],
"scales": [
{
"name": "color",
"type": "quantize",
"domain": [0,500],
"reverse": true,
"range": {"scheme": selectedMap[0], "count": 10}
},
{
"name": "colorCrime",
"type": "ordinal",
"domain": {"data": "crime","field": "properties.Offense"},
"range": {"scheme": "dark2"}
}
],
"legends": [
{
"orient": "bottom-left",
"offset": 0,
"stroke": "colorCrime",
"fill": "colorCrime",
"title": "Offense Type",
"symbolType": "circle",
"gradientLength": {"signal": "clamp(height, 64, 200)"},
"encode": {
"symbols": {
"name": "legendSymbol",
"interactive": true,
"update": {
//"fill": {"value": "transparent"},
"symbolFillColor": "colorCrime",
"strokeWidth": {"value": 2},
"opacity": [
{"test": "!length(data('selected')) || indata('selected', 'value', datum.value)", "value": 0.7},
{"value": 0.15}
],
"size": {"value": 64}
}
},
"labels": {
"name": "legendLabel",
"interactive": true,
"update": {
"opacity": [
{"test": "!length(data('selected')) || indata('selected', 'value', datum.value)", "value": 1},
{"value": 0.25}
]
}
}
}
}
],
"marks": [
{
"type": "shape",
"from": {"data": "vanAreas2"},
"encode":
{
"enter":
{
"path": {"field": "layout_path"},
"fill": {"value": "#aaaaaa"},
"stroke": {"value": "black"},
"tooltip":
{
"signal": "{'Local Area': datum.properties.NAME, 'Population': datum.Population.Population,'Square meters/person': format(datum.density,'.2f')}"}
},
"update":
{
"path": {"field": "path"},
opacity: {value: 0.5},
"stroke": {"value": "black"},
"fill": {"scale": "color", "field": "density"},
"zindex": {"value": 0}
},
"hover": {
"strokeWidth": {"value": 1},
"stroke": {"value": "firebrick"},
"zindex": {"value": 1},
"fill": {"value": "red"}
},
"exit":
{
"stroke": {"value": "white"}
}
},
"transform":
[
{ "type": "geoshape", "projection": "projection" }
]
},
{
type: "shape",
from: {data: "crime"},
encode:
{
enter:
{
"tooltip":
{
"signal": "{'Crime': datum.properties.Offense,'Location': datum.properties.HUNDRED_BLOCK}"}
},
update:
{
"opacity": [
{"test": "(!length(data('selected')) || indata('selected', 'value', datum.properties.Offense))", "value": 0.7 },
{"value": 0.0}
],
fill: {"scale": "colorCrime", "field": "properties.Offense"},
"zindex": {"value": 1}
}
},
transform: [
{
type: "geoshape",
projection: "projection",
pointRadius: 3
}
]
}
]
})