31:Tc9d,embed( { "$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"} } } } ] })32:Td9b,viewof mapSelect1 = 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" } ] } ], "selection": { "from": {"data": "vPop"}, "mapSelection": { "fields": "Area", "on": [ { "events": [{"source": "scope", "type": "click"}], "update": "event.shiftKey" } ] } }, "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": "mapSelection", "on": [ {"events": "shape:click", "update": "datum"} ] } ], "scales": [ { "name": "color", "type": "quantize", "domain": [0,500], "reverse": true, "range": {"scheme": "warmgreys", "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": "white"}, "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"} } } } ] })33:T168e, 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 } ] } ] })34: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 } ] } ] })35:Teeb,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}} }) 36: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"}}}} } ] })37: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(180,180,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} } } }] })38:[] 2f:{"title":"Vancouver mapping Again","cells":[{"id":0,"value":"md`# Vancouver mapping Again\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":"$31","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.\n Finally, this is a VEGA spec as opposed to VegaLite.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1659,"value":"viewof crimesTotal=embed({\n data: {\n values: vanCrime2},\n width: 500,\n mark: \"bar\",\n transform: [\n {filter: {field: \"NEIGHBOURHOOD\", oneOf: areaselection}}\n ],\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 scale: {\n \"domain\": [0,375]//,\n //\"type\": \"log\"\n },\n \"axis\": {\"title\": \"Number of crimes\"}\n },\n color:{ field: \"Offense\", type:\"nominal\",\"scale\": {\"scheme\": \"category10\"}}\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1912,"value":"mapSelection1 = Generators.observe(notify => {\n const mapSelection = (name, value) => notify(value);\n mapSelect1.addSignalListener(\"mapSelection\", mapSelection);\n notify(mapSelect1.signal(\"mapSelection\"));\n return () => mapSelect1.removeSignalListener(\"mapSelection\", mapSelection);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1909,"value":"viewof mapselected1 = {\n if(isEmpty(mapSelection1)){\n 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\"]\n } else {\n return mapSelection1.properties.NAME\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1939,"value":"areaselection = {\n let anames=[];\n if(isEmpty(mapSelection1)){\n 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\"]\n } else {\n anames.push(mapSelection1.properties.NAME);\n return anames;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1649,"value":"viewof 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":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.\nI combined it with the density map to see if there seems to be a pattern between density and crime. \nNOTE that now I have moved to Vega, as VegaLite seems to have issues with the map interaction.
\n 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.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"$33","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 `Commented out in the next code is a map of the full crime dataset following the above map of points. The resulting visualization shows the limitations of maps with dense data sets - VEGA and Observable have real trouble dealing with this volume of points. 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":"$34","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":1691,"value":"md `Same data and view using Vega-Lite.`","pinned":false,"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":1904,"value":"mapSelection2 = Generators.observe(notify => {\n const mapSelection2 = (name, value) => notify(value);\n mapSelect1.addSignalListener(\"mapSelection\", mapSelection2);\n notify(mapSelect1.signal(\"mapSelection\"));\n return () => mapSelect1.removeSignalListener(\"mapSelection\", mapSelection2);\n})","pinned":true,"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: vanCrime2},\n mark: \"bar\",\n // transform: [\n // {filter: {field: \"Offense\", oneOf: mapSelection2}}\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":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1803,"value":"$36","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`Here is the dataset of all streets using the topoJson format for efficiency coloured according to their use: Arterial or Residential.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"md `## Data Modules, Functions and Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1897,"value":" function isEmpty(obj) { \n for (var prop in obj) { \n return false; \n } \n return true; \n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"embed = require(\"vega-embed@6\")","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