viewof crimesTotal=embed({
data: {
values: vanCrime2},
width: 500,
mark: "bar",
transform: [
{filter: {field: "NEIGHBOURHOOD", oneOf: areaselection}}
],
selection: {
barSelection: {fields: ["Offense"], on: "click", type: "multi"}
},
encoding: {
y:{field: "Offense", type: "nominal"},
x:{aggregate: "count", field: "*", type: "quantitative",
scale: {
"domain": [0,375]//,
//"type": "log"
},
"axis": {"title": "Number of crimes"}
},
color:{ field: "Offense", type:"nominal","scale": {"scheme": "category10"}}
}
})
mapSelection1 = Generators.observe(notify => {
const mapSelection = (name, value) => notify(value);
mapSelect1.addSignalListener("mapSelection", mapSelection);
notify(mapSelect1.signal("mapSelection"));
return () => mapSelect1.removeSignalListener("mapSelection", mapSelection);
})
viewof mapselected1 = {
if(isEmpty(mapSelection1)){
return ["Central Business District","West End","Strathcona","Grandview-Woodland","Mount Pleasant","Fairview","Kensington-Cedar Cottage","Stanley Park","Marpole","Kitsilano","Sunset","Oakridge","Kerrisdale","Hastings-Sunrise","Victoria-Fraserview","South Cambie","Killarney","Riley Park","Dunbar-Southlands","Renfrew-Collingwood", "Arbutus Ridge","Musqueam","West Point Grey","Shaughnessy"]
} else {
return mapSelection1.properties.NAME
}
}
areaselection = {
let anames=[];
if(isEmpty(mapSelection1)){
return ["Central Business District","West End","Strathcona","Grandview-Woodland","Mount Pleasant","Fairview","Kensington-Cedar Cottage","Stanley Park","Marpole","Kitsilano","Sunset","Oakridge","Kerrisdale","Hastings-Sunrise","Victoria-Fraserview","South Cambie","Killarney","Riley Park","Dunbar-Southlands","Renfrew-Collingwood", "Arbutus Ridge","Musqueam","West Point Grey","Shaughnessy"]
} else {
anames.push(mapSelection1.properties.NAME);
return anames;
}
}
viewof barSelection = Generators.observe(notify => {
const barSelection = (name, value) => notify(value);
crimesTotal.addSignalListener("barSelection", barSelection);
notify(crimesTotal.signal("barSelection"));
return () => crimesTotal.removeSignalListener("barSelection", barSelection);
})
VCrimeMap=embed(
{
"$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"
}//,
// transform: [
// {type: "filter", "expr": "(indata('barSelection', 'Offense',datum.properties.Offense))"}
// ]
},
{
// Here is where i want to add my signakl from the other cell
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}
// {"test": "(!length(data('selectedBar')) || indata('selectedBar', '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
}
]
}
]
})
mapSelection2 = Generators.observe(notify => {
const mapSelection2 = (name, value) => notify(value);
mapSelect1.addSignalListener("mapSelection", mapSelection2);
notify(mapSelect1.signal("mapSelection"));
return () => mapSelect1.removeSignalListener("mapSelection", mapSelection2);
})
viewof crimeLine = embed({
data: {values: vanCrime2},
mark: "bar",
// transform: [
// {filter: {field: "Offense", oneOf: mapSelection2}}
// ],
encoding: {
x: {field: "NEIGHBOURHOOD", type: "nominal"},
y: {aggregate: "count", field: "*", type: "quantitative"},
color: {field: "Offense", type: "nominal"}
}
})
viewof CrimeBar2 = embed(
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"autosize": "pad",
"padding": 5,
"height": 200,
"style": "cell",
"data": [
{
"name": "crimes",
"values": testcrime
},
{
"name": "sc",
"values": mapSelection2
},
{
"name": "data_0",
"source": "crimes",
"transform": [
{
"type": "formula",
"expr": "toString(datum[\"Offense\"])",
"as": "Offense"
},
// {
// "type": "filter",
// "expr": "data("selection", datum[\"Offense\"]) !== -1"
// "expr": "data("sc")",
// "as": "Offense"
// },
{
"type": "aggregate",
"groupby": ["NEIGHBOURHOOD", "Offense"],
"ops": ["count"],
"fields": ["*"],
"as": ["count_*"]
},
{
"type": "stack",
"groupby": ["NEIGHBOURHOOD"],
"field": "count_*",
"sort": {"field": ["Offense"], "order": ["descending"]},
"as": ["count_*_start", "count_*_end"],
"offset": "zero"
}
]
}
],
"signals": [
{"name": "x_step", "value": 20},
{
"name": "width",
"update": "bandspace(domain('x').length, 0.1, 0.05) * x_step"
},
{"name": "sc2",
"update": "expression(data(selection))"
}
],
"marks": [
{
"name": "marks",
"type": "rect",
"style": ["bar"],
"from": {"data": "data_0"},
"encode": {
"update": {
"fill": [
{
"test": "datum[\"count_*\"] === null || isNaN(datum[\"count_*\"])",
"value": null
},
{"scale": "color", "field": "Offense"}
],
"tooltip": {
"signal": "{\"NEIGHBOURHOOD\": ''+datum[\"NEIGHBOURHOOD\"], \"Count of Records\": format(datum[\"count_*\"], \"\"), \"Offense\": ''+datum[\"Offense\"]}"
},
"x": {"scale": "x", "field": "NEIGHBOURHOOD"},
"width": {"scale": "x", "band": true},
"y": {"scale": "y", "field": "count_*_end"},
"y2": {"scale": "y", "field": "count_*_start"}
}
}
}
],
"scales": [
{
"name": "x",
"type": "band",
"domain": {"data": "data_0", "field": "NEIGHBOURHOOD", "sort": true},
"range": {"step": {"signal": "x_step"}},
"paddingInner": 0.1,
"paddingOuter": 0.05
},
{
"name": "y",
"type": "linear",
"domain": {"data": "data_0", "fields": ["count_*_start", "count_*_end"]},
"range": [{"signal": "height"}, 0],
"nice": true,
"zero": true
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "data_0", "field": "Offense", "sort": true},
"range": "category"
}
],
"axes": [
{
"scale": "x",
"orient": "bottom",
"grid": false,
"title": "NEIGHBOURHOOD",
"labelAlign": "right",
"labelAngle": 270,
"labelBaseline": "middle",
"zindex": 1
},
{
"scale": "y",
"orient": "left",
"grid": false,
"title": "Count of Records",
"labelOverlap": true,
"tickCount": {"signal": "ceil(height/40)"},
"zindex": 1
},
{
"scale": "y",
"orient": "left",
"gridScale": "x",
"grid": true,
"tickCount": {"signal": "ceil(height/40)"},
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
}
],
"legends": [
{
"fill": "color",
"gradientLength": {"signal": "clamp(height, 64, 200)"},
"title": "Offense",
"encode": {"symbols": {"update": {"shape": {"value": "square"}}}}
}
],
"config": {"axisY": {"minExtent": 30}}
})
vanCrimeLocationsInteractive = embedWithSpecificVersions({
$schema: 'https://vega.github.io/schema/vega/v5.json',
"width": 800,
"height": 600,
data:[{
name: "crime",
values: vanCrime,
format: {
type: "json",
property: "features"
}
},
{
name: "offArr",
values: OffenseNames
},
{
name: "data_0",
"source": "crime",
"transform": [
{
"type": "formula",
"expr": "toString(datum[\"properties.Offense\"])",
"as": "offense"
},
{
"type": "filter",
"expr": "indexof(\"offArr\", datum[\"offense\"]) !== -1"
}
]
}
],
projections: [{
name: "projection",
fit: {signal: "data('crime')"},
size: {signal: "[800, 600]"},
//scale: 190000,
//center: [-123.149648,49.265815],
type: "mercator"
}],
"signals": [
{
"name": "hover", "init": null,
"streams": [
{"type": "shape:mouseover", "expr": "datum"},
{"type": "shape:mouseout", "expr": "null"}
]
}],
marks: [
{
type: "shape",
from: {data: "crime"},
encode:
{
enter:
{
"tooltip":
{
"signal": "{'Crime': datum.properties.Offense,'Location': datum.properties.HUNDRED_BLOCK}"}
},
update:
{
opacity: {value: 0.75},
fill: {"scale": "color", "field": "properties.Offense"}
}
},
transform: [
{
type: "geoshape",
projection: "projection",
pointRadius: 3
}
]
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {"data": "crime","field": "properties.Offense"},
"range": {"scheme": "category10"}
}
],
"legends": [
{
"offset": 0,
"orient": "top-left",
"fill": "color",
"gradientLength": {"signal": "clamp(height, 64, 200)"},
"symbolType": "circle"
//"encode": {"symbols": {"update": {"fill": {"value": "transparent"}}}}
}
]
})
viewof year = html`<input type="range" min=2003 max=2017 \>`
function isEmpty(obj) {
for (var prop in obj) {
return false;
}
return true;
}
mutable selectedMap = ["warmgreys"]
vanPop = d3.csv("https://www.sfu.ca/~lyn/data/VanPop2011.csv")
CBDStreets = d3.json("https://www.sfu.ca/~lyn/data/Urban/VancouverCBDStreets.json");
vanAreaValues = d3.json("https://www.sfu.ca/~lyn/data/Urban/VancouverAreaSize.json");
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.