2a:Tcb1,embedWithSpecificVersions( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 900, "height": 560, "padding": {"top": 0, "left": 0, "right": 0, "bottom": 0}, "autosize": "none", "data": [ // { // "name": "vSquare", // "values": vanAreaValues, // "format": {"type": "json", "property": "features"}, // "transform": [ // { // "type": "geopath", // "projection": "projection" // }, // ]}, { "name": "vPop", "values": populations }, { "name": "areasV", "values": vanAreas, "format": {"type": "json", "property": "features"}, "transform": [ { "type": "geopath", "projection": "projection" }, { "type": "lookup", "from": "vPop", "key": "Area", "fields": ["properties.NAME"], "as": ["Population"] }//, //{ // "type": "lookup", // "from": "vSquare", "key": "properties.NAME", // "fields": ["properties.NAME"], "as": ["localArea"] // } ] } ], "projections": [ { name: "projection", type: "mercator", scale: 200000, center: d3.geoCentroid(vanAreas) //"translate": [{"signal": "width / 2"}, {"signal": "height / 2"}] } ], "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" }] } ], "scales": [ { "name": "color", "type": "quantize", "domain": [0,90000], "range": {"scheme": "blues", "count": 10} } ], "marks": [ { "type": "shape", "from": {"data": "areasV"}, "encode": { "enter": { "path": {"field": "layout_path"}, //"fill": {"value": "#aaaaaa"}, "fill": {"scale": "color", "field": "Population.Population"}, "stroke": {"value": "white"}, "tooltip": {"signal": "{'Local Area': datum.properties.NAME, 'Population': datum.Population.Population}"} }, "update": { "path": {"field": "path"}, "stroke": {"value": "white"}, //"fill": { "scale":"color", "value": "#aaaaaa"}, "fill": {"scale": "color", "field": "Population.Population"}, "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": "text", "interactive": false, "encode": { "enter": { "x": {"value": 895}, "y": {"value": 0}, "fill": {"value": "black"}, "fontSize": {"value": 20}, "align": {"value": "right"} }, "update": { "text": {"signal": "title"} } } } ] })2b:Tc16,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" } ] } ], "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" }] } ], "scales": [ { "name": "color", "type": "quantize", "domain": [0,500], "reverse": true, "range": {"scheme": "oranges", "count": 15} } ], "legends": [ { "fill": "color", "offset": 0, "type": "gradient", "gradientLength": { "signal": "clamp(height, 64, 200)" }, "title": "Square meters / person", "orient": "top-left" } ], "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"}, "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": "text", "interactive": false, "encode": { "enter": { "x": {"value": 895}, "y": {"value": 0}, "fill": {"value": "black"}, "fontSize": {"value": 20}, "align": {"value": "right"} }, "update": { "text": {"signal": "title"} } } } ] })2c:T686, vanCrimeLocationsGeo = embedWithSpecificVersions({ $schema: 'https://vega.github.io/schema/vega/v5.json', "width": 800, "height": 600, data:[{ name: "crime", values: vanCrime, format: { type: "json", property: "features" } }], 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"}}}} } ] })2d:T1526,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 } ] } ] })2e:T168b,vanCrimeGeoView2 = 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: vanCrimeGeo, 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", //"symbolStrokeColor": "colorCrime", "symbolFillColor": "colorCrime", "title": "Offense Type", "symbolType": "circle", //"symbolFillColor": "colorCrime", "gradientLength": {"signal": "clamp(height, 64, 200)"}, "encode": { "symbols": { "name": "legendSymbol", "stroke": "colorCrime", "interactive": true, "enter": { "fill": "colorCrime" }, "update": { //"fill": {"value": "transparent"}, "fill": "colorCrime", //"symbolFillColor": "colorCrime", "symbolStrokeColor": "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", "labelLimit": 200, "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: 1.5 } ] } ] })2f:Tbf5,viewof crimesNV = embedWithSpecificVersions({ "$schema": "https://vega.github.io/schema/vega/v5.json", "autosize": "pad", "padding": 5, "width": 500, "style": "cell", "data": [ { "name": "source_0", "values": vanCrimeFull }, { "name": "crimes", "source": "source_0", "transform": [ { "type": "aggregate", "groupby": ["Offense"], "ops": ["count"], "fields": [null], "as": ["__count"] } ] } ], selection: { barSelection: {fields: ["Offense"], on: "click", type: "multi"} }, "signals": [ {"name": "y_step", "value": 20}, { "name": "height", "update": "bandspace(domain('y').length, 0.1, 0.05) * y_step" } ], "marks": [ { "name": "marks", "type": "rect", "style": ["bar"], "from": {"data": "crimes"}, "encode": { "update": { "fill": [ { "test": "datum[\"__count\"] === null || isNaN(datum[\"__count\"])", "value": null }, {"scale": "color", "field": "Offense"} ], "tooltip": { "signal": "{\"Offense\": ''+datum[\"Offense\"], \"Count of Records\": format(datum[\"__count\"], \"\")}" }, "x": {"scale": "x", "field": "__count"}, "x2": {"scale": "x", "value": 0}, "y": {"scale": "y", "field": "Offense"}, "height": {"scale": "y", "band": true} } } } ], "scales": [ { "name": "x", "type": "linear", "domain": {"data": "crimes", "field": "__count"}, "range": [0, {"signal": "width"}], "nice": true, "zero": true }, { "name": "y", "type": "band", "domain": {"data": "crimes", "field": "Offense", "sort": true}, "range": {"step": {"signal": "y_step"}}, "paddingInner": 0.1, "paddingOuter": 0.05 }, { "name": "color", "type": "ordinal", "domain": {"data": "crimes", "field": "Offense", "sort": true}, "range": {"scheme": "category10"}, "interpolate": "hcl" } ], "axes": [ { "scale": "x", "orient": "bottom", "grid": false, "title": "Totals", "labelFlush": true, "labelOverlap": true, "tickCount": {"signal": "ceil(width/40)"}, "zindex": 1 }, { "scale": "x", "orient": "bottom", "gridScale": "y", "grid": true, "tickCount": {"signal": "ceil(width/40)"}, "domain": false, "labels": false, "maxExtent": 0, "minExtent": 0, "ticks": false, "zindex": 0 }, { "scale": "y", "orient": "left", "grid": false, "title": "Offense", "zindex": 1 } ], "legends": [ { "fill": "color", "gradientLength": {"signal": "clamp(height, 64, 200)"}, "symbolType": "circle", "title": "Offense", "encode": {"symbols": {"update": {"shape": {"value": "square"}}}} } ] } ) 30:Tefb,viewof CrimeBar2 = embedWithSpecificVersions( { "$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": selection }, { "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}} }) 31:T801,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"}}}} } ] })32:T7d4,streetview2 = embedWithSpecificVersions( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 900, "height": 560, "padding": {"top": 0, "left": 0, "right": 0, "bottom": 0}, "autosize": "none", data: [ { "name": "streetsCBD", "values": CBDStreets2, format: { "type": "topojson", "feature": "VancouverCBDStreets"}, transform: [ { type: "geopath", projection: "projection", property: "features" } ] }], "signals": [ { "name": "hover", "init": null, "streams": [ {"type": "path:mouseover", "expr": "datum"}, {"type": "path:mouseout", "expr": "null"} ] }], "scales": [ { "name": "color", "type": "ordinal", "domain": ["Arterial","Residential"], "range" : ["rgb(000,255,64)", "rgb(000,64,255)"] } ], "legends": [ { "offset": 0, "orient": "top-left", "stroke": "color", "gradientLength": {"signal": "clamp(height, 64, 200)"}, "symbolType": "circle", "encode": {"symbols": {"update": {"fill": {"value": "transparent"}}}} } ], projections: [ { name: "projection", type: "mercator", scale: 600000, center: d3.geoCentroid(CBDStreets) } ], marks: [ { type: "path", from: { data: "streetsCBD" }, "encode": { "enter": { "tooltip": { "signal": "{'Block': datum.properties.HBLOCK,'Use': datum.properties.USE}" }, }, "update": { "strokeWidth": {"value": 2}, "stroke": {"scale": "color", "field": "properties.USE"}, //"stroke": {"value": "#bbb"}, "zindex": {"value": 0}, "path": {"field": "path"} }, "hover": { "strokeWidth": {"value": 4}, "stroke": {"value": "firebrick"}, "zindex": {"value": 1} } } }] })33:T832,vanStreetView = embedWithSpecificVersions( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 900, "height": 560, "padding": {"top": 0, "left": 0, "right": 0, "bottom": 0}, "autosize": "none", data: [ { "name": "streetsVan", "values": VanStreets2, format: { "type": "topojson", "feature": "VancouverStreets"}, transform: [ { type: "geopath", projection: "projection", property: "features" } ] }], "signals": [ { "name": "hover", "init": null, "streams": [ {"type": "path:mouseover", "expr": "datum"}, {"type": "path:mouseout", "expr": "null"} ] }], "scales": [ { "name": "color", "type": "ordinal", "domain": ["Arterial","Residential"], "range" : ["rgb(000,255,64)", "rgb(100,100,180)"] } ], "legends": [ { "offset": 0, "type": "symbol", "orient": "top-left", "stroke": "color", "fill": "color", "gradientLength": {"signal": "clamp(height, 100, 200)"}, "symbolType": "circle"//, //"encode": {"symbols": {"update": {"fill": {"value": "transparent"}}}} } ], projections: [ { name: "projection", type: "mercator", scale: 200000, center: d3.geoCentroid(VanStreets) } ], marks: [ { type: "path", from: { data: "streetsVan" }, "encode": { "enter": { "tooltip": { "signal": "{'Block': datum.properties.HBLOCK,'Use': datum.properties.USE}" }, }, "update": { "strokeWidth": {"value": 2}, "stroke": {"scale": "color", "field": "properties.USE","strokeOpacity": 0.2}, //"stroke": {"value": "#bbb"}, "zindex": {"value": 0}, "path": {"field": "path"} }, "hover": { "strokeWidth": {"value": 4}, "stroke": {"value": "firebrick","strokeOpacity": 0.5}, "zindex": {"value": 1} } } }] })34:[] 29:{"title":"Vancouver mapping 102","cells":[{"id":0,"value":"md`# Vancouver mapping 102\n## More fun with Vancouver maps, Vega and geodata`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"md `In a previous workbook we started exploring mapping with Vega. A simple choropleth map blow uses census data from 2016 (StatsCanada) and shapefiles of 22 local neighbourhoods (City of Vancouver OpenData) to show population distribution by neighbourhood. Interesting - but limited if you are considering many issues in urban life. The problem with the data I use to make the map below is that it is POPULATION and not DENSITY. The choropleth map shows the population amounts of each local area, but we should be considering density. \n
Note that sometimes this file has problems rendering in Chrome and you need to flush the cache. I am going to try using the topoJSON format for the next map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"md `I took the Vancouver areas shapefile back into qGIS and calculated the area of each shape, and then reprocessed it back to WGS84 and JSON. Now I have a \"localArea\" property that I can use to calculate density. qGIS calculates the area in the projection units of the original data so this area is calculated in ellipsoid rather than Cartesian units (the units remain square meters). If you want to change this you do so in the conversion step of your area calculation in whatever GIS tool you use. I left them in ellipsoid units because the difference was very small and I was feeling lazy.
\nWhen I change to the topojson format I need to access the data at different levels of the hierarchy. Inspecting the data in the Vega editor is invaluable here.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"md `### Some areas have more space for their residents than others.\nNow here is the full file as a choropleth coded to density. Because density right now is calculated as the number of meters squared per person - a LOWER value is higher density overall, so I inverted the quantized color scale. Look at the space per resident in Shaughnessy compared with the West End.\n
The legend shows the inversion, but I would rather set another density measure. TBD.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"md `### Plotting point data on top\nLet's try plotting some point data. Going for the Vancouver non-violent crime data (City of Vancouver OpenData or VPD). in progress, it's a big dataset.\nI trimmed it down to 3000 points by selecting only June 2016 and turned the csv into geoJson. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"value":"md `Let's put these together and see if there seems to be a pattern between density and crime. What questions does this provoke?
\nWe don't have to join these data - but make sure the z-index of the crime points is set to 1.\nI set the opacity of the background fill to 50% but I can't seem to set the matching opacity in the legend. This is where we see the value of custom schemes.\nI also added an interactive legend (code borrowed from Vahid Zahednejad, https://observablehq.com/@zahednejad203) to enable filtering by crime type.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs"},{"id":1061,"value":"md `Clearly there seems to be something going on here. But the question it should provoke first is why? To begin with, density as we have defined it (inverse of #square meters per person) is probably a poor proxy for prosperity or other factors that can contribute to crime. Argues for more detail and more data!. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1129,"value":"md `So now the questions we might ask are:\n

Is crime volume and/or type related to density?\n
population?\n

\nWe need to pull the data together. I am tired of redoing all the data transforms so i am just going to make new data structures. vanDensity has the density of the local area (calculated from the populations array i imported and the vanAreasValues2 data.) Then we need to see how the 22 densities plot against the crimes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1332,"value":"function crimeDensityListCut(carray,num)\n{\n let i=0;\n let j=0;\n let ca = deepCopy(carray);\n let newtestcrime = [];\n for(i=0;i < num;i++)\n {\n //console.log(\"Crime: \",i);\n j=0;\n while (j < vanDensity.objects.VancouverAreaSize.geometries.length)\n {\n if (ca[i].NEIGHBOURHOOD == vanDensity.objects.VancouverAreaSize.geometries[j].properties.NAME)\n {\n //newtestcrime[i] = ca[i];\n ca[i].density = vanDensity.objects.VancouverAreaSize.geometries[j].properties.density;\n };\n j++;\n }\n //newtestcrime[i] = carray[i];\n //newtestcrime[i].density = vanDensity.objects.VancouverAreaSize.geometries[j].properties.density;\n //console.log (\"Found \", i, \": \",newtestcrime[i].Offense, \" \", newtestcrime[i].NEIGHBOURHOOD, \" \", newtestcrime[i].density);\n } \n //console.log(i,\": \",ca[i-1]);\n let shortA = ca.slice(0,num);\n // if (newtestcrime[i-1] == null) \n return(shortA);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"shorterTotal = crimeDensityListCut(vanCrime2,485);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"crimeDensityTotal = crimeDensityList(vanCrime2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1426,"value":"crimeDensityFull = crimeDensityList(vanCrimeFull);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1588,"value":"md `Let's try some scatterplots to check correlations. I have a new category in my crime data: Vehicular/nonVehicular. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1585,"value":"cBar=embedWithSpecificVersions({\n \"width\": 300,\n \"height\": 400, \n data: \n {\n values: crimeDensityFull,\n format: \"json\"\n },\n mark: \"point\",\n encoding: {\n \"facet\": {\n \"field\": \"Offense Type\",\n \"type\": \"ordinal\"\n },\n y:{\n aggregate: \"mean\", \n field: \"density\", \n type: \"quantitative\",\n \"axis\": {\"title\": \"SqMetres / person\"}\n },\n x:{\n aggregate: \"count\", \n field: \"Offense\", \n type: \"quantitative\",\n \"axis\": {\"title\": \"Number of crimes\"}\n },\n color:{ field: \"Offense\", type:\"nominal\",\"scale\": {\"scheme\": \"category10\"}},\n \"detail\": {\"field\": \"NEIGHBOURHOOD\",\"type\": \"nominal\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1295,"value":"md `The linear scale above doesn't show much. Here I used a log scale to tease out crime patterns. From this we can clearly see that vehicle fatalities are much less common and clump in medium desnity neighbourhoods. One might ask why?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1297,"value":"cBar2=embedWithSpecificVersions({\n \"width\": 300,\n \"height\": 400, \n data: \n {\n values: crimeDensityFull,\n format: \"json\"\n },\n mark: \"point\",\n encoding: {\n \"facet\": {\n \"field\": \"Offense Type\",\n \"type\": \"ordinal\"\n },\n y:{\n aggregate: \"mean\", \n field: \"density\", \n type: \"quantitative\",\n \"scale\": {\"type\": \"log\"},\n \"axis\": {\"title\": \"SqMetres / person\"}\n },\n x:{\n aggregate: \"count\", \n field: \"Offense\", \n type: \"quantitative\",\n \"scale\": {\"type\": \"log\"},\n \"axis\": {\"title\": \"Number of crimes\"}\n },\n color:{ field: \"Offense\", type:\"nominal\",\"scale\": {\"scheme\": \"category10\"}},\n \"detail\": {\"field\": \"NEIGHBOURHOOD\",\"type\": \"nominal\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1415,"value":"md `First glance shows that there is not really compelling relationships here even when i put in the entire 35K data set.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"function crimeDensityList(carray)\n{\n let i=0;\n let j=0;\n let ca = deepCopy(carray);\n let newtestcrime = [];\n for(i=0;i < ca.length;i++)\n {\n //console.log(\"Crime: \",i);\n j=0;\n while (j < vanDensity.objects.VancouverAreaSize.geometries.length)\n {\n if (ca[i].NEIGHBOURHOOD == vanDensity.objects.VancouverAreaSize.geometries[j].properties.NAME)\n {\n //newtestcrime[i] = ca[i];\n ca[i].density = vanDensity.objects.VancouverAreaSize.geometries[j].properties.density;\n };\n j++;\n }\n //newtestcrime[i] = carray[i];\n //newtestcrime[i].density = vanDensity.objects.VancouverAreaSize.geometries[j].properties.density;\n //console.log (\"Found \", i, \": \",newtestcrime[i].Offense, \" \", newtestcrime[i].NEIGHBOURHOOD, \" \", newtestcrime[i].density);\n } \n //console.log(i,\": \",ca[i-1]);\n //ca.slice(0,num);\n // if (newtestcrime[i-1] == null) \n return(ca);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1463,"value":"md `So let's try mapping the full crime dataset following the above map of points. The resulting visualization shows the limitations of maps with dense data sets. However, some patterns immediately emerge: the vehicle collisions are along the major arterial routes, so I will want to filter and brush these by type to inspect further.
\nSo one immediate observation: there's a bug here in the legend color mapping! It seems the fill color changes with the selection while the outline (stroke) color remains constant. hmmm.... it doesn't happed with the smaller data set, so I can only assume I have hit some limit in Vega's code. But I would rather throw a signal from the barcharts below and explore how I make an actual reactive set of linked cells. That's what I am working on now.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1714,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs"},{"id":1564,"value":"viewof crimes=embedWithSpecificVersions({\n data: {values: vanCrimeGeo.features},\n width: 500,\n mark: \"bar\",\n selection: {\n barSelection: {fields: [\"properties.Offense\"], on: \"click\", type: \"multi\"}\n },\n encoding: {\n y:{field: \"properties.Offense\", type: \"nominal\"},\n x:{aggregate: \"count\", field: \"*\", type: \"quantitative\"},\n color:{ field: \"properties.Offense\", type:\"nominal\",\"scale\": {\"scheme\": \"dark2\"}}\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1666,"value":"md `I'd like to make the above bar chart in vega-lite generate the selection for the map - but the issue seems to be that Vega and VEga-lite are not great with nested selections. I wonder if i can use the accompanying vanCrime array to generate the selection and then match it. First I will try this with the two bar charts: the top one in Vega-Lite using the geoJson data structure and the below one in Vega using the standard Object array.I have to use a much smaller dataset to test the signals between cells, so I will use the testcrime array to see how i can throw selections.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"md `This is the bar chart done in vanilla Vega. It appears Vega-lite and Vega don't mix in a single spec.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1594,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1691,"value":"md `Same data and view using Vega-Lite.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1659,"value":"viewof crimesTotal=embedWithSpecificVersions({\n data: {values: vanCrimeFull},\n width: 500,\n mark: \"bar\",\n selection: {\n barSelection: {fields: [\"Offense\"], on: \"click\", type: \"multi\"}\n },\n encoding: {\n y:{field: \"Offense\", type: \"nominal\"},\n x:{aggregate: \"count\", field: \"*\", type: \"quantitative\"},\n color:{ field: \"Offense\", type:\"nominal\",\"scale\": {\"scheme\": \"category10\"}}\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1649,"value":"barSelection = Generators.observe(notify => {\n const barSelection = (name, value) => notify(value);\n crimesTotal.addSignalListener(\"barSelection\", barSelection);\n notify(crimesTotal.signal(\"barSelection\"));\n return () => crimesTotal.removeSignalListener(\"barSelection\", barSelection);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1675,"value":"md `I need to extract the unique values from the array of crimes so I can check these against the selection. To do this I first map the array to a new array that only contains primitive values by using the javascript Set object and then the spread operation to construct a new array.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1678,"value":"function getDistinctOffenses(arr)\n{\n const distinctCats = [...new Set(arr.map(x => x.Offense))];\n return distinctCats;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1681,"value":"OffenseNames = getDistinctOffenses(vanCrimeFull)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1671,"value":"selection = {\n if(isEmpty(barSelection)){\n return OffenseNames\n } else {\n return barSelection.Offense\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1672,"value":" function isEmpty( obj ) { \n for ( var prop in obj ) { \n return false; \n } \n return true; \n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1793,"value":"md `Now let's put these togather and see if i can trap the signal selection in another view. To begin with, I am only setting the signal for selecting by crime type. Looks like I have to manage the color explicitly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1814,"value":"viewof crimeLine = embed({\n data: {values: testcrime},\n mark: \"bar\",\n transform: [\n {filter: {field: \"Offense\", oneOf: selection}}\n ],\n encoding: {\n x: {field: \"NEIGHBOURHOOD\", type: \"nominal\"},\n y: {aggregate: \"count\", field: \"*\", type: \"quantitative\"},\n color: {field: \"Offense\", type: \"nominal\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1822,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1803,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1557,"value":"viewof year = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":883,"value":"md `## Polylines: Vancouver streets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"md`Start with the smaller dataset of downtown streets. To see this we need to crank the mercator projection up to 600000.
\nChallenge: make a single street block selectable. They are defined as such in the data. While this works, this is a large dataset with all the streets. Let's try this same dataset with the topoJson format just to make sure I know what I am doing with streets coloured according to their use: Arterial or Residential.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"md `And finally with the entire Vancouver streets set using the topoJson format for efficiency.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"md `## Data Modules and Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"embed = require('vega-embed@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1699,"value":"mutable selectedMap = [\"warmgreys\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1755,"value":"vanPop = d3.csv(\"https://www.sfu.ca/~lyn/data/VanPop2011.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1757,"value":"vanPopCleaned = {\n let p1 = 0;\n let i=0;\n \n console.log (\"Starting\"); \n for (i=0;i {\n const div = document.createElement(\"div\");\n const view = new Vega.View(Vega.parse(VegaLite.compile(spec).spec));\n await view.initialize(div).runAsync();\n return div;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"function deepCopy(arr)\n{\n let newArr = JSON.parse(JSON.stringify(arr));\n return(newArr)\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1765,"value":"function calculatePop(neighbourhood)\n{\n let pop=0;\n let i=0;\n for (i=0; i < neighbourhood.length;i++)\n {\n pop += neighbourhood[i].Population;\n }\n return pop;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1768,"value":"vanPopCleaned2 = \n d3.csv(\"https://www.sfu.ca/~lyn/data/VanPop2011.csv\", function(d) {\n return {\n Area: d.Area,\n Age: d.Age,\n Gender : d.Gender,\n Population: +d.Population\n };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1763,"value":"function SumPops(areas)\n{\n let i=0;\n let j=0;\n let nPop=0;\n let name=\"\";\n let AreaPops = [];\n let currentArea = [];\n for(i=0;i