32:T4dd,streetview = 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": VanStreets, format: { type: "json", feature: "vanstreets" }, transform: [ { type: "geopath", projection: "projection" } ] }], "signals": [ { "name": "hover", "init": null, "streams": [ {"type": "path:mouseover", "expr": "datum"}, {"type": "path:mouseout", "expr": "null"} ] }], projections: [ { name: "projection", type: "mercator", scale: 200000, center: d3.geoCentroid(VanStreets) } ], marks: [ { type: "path", from: { data: "streetsVan" }, encode: { enter: { stroke: { value: "#bbbbbb" }, "tooltip": {"signal": "{'Block': datum}"} }, update: { path: { field: "path" }, stroke: { value: "#bbbbbb" } }, hover: { path: { field: "path" }, stroke: { value: "#dd0000" } } } }] })33:[] 31:{"title":"Vancouver Streets","cells":[{"id":0,"value":"md`# Vancouver Streets\nThe saga continues`","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"md `#### Test 2: Today's goal : Selecting individual streets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"md `#### Test 1: Vancouver Parking Spots mapped the easy way as geoshapes using the geoJson format.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"parking = embed({\n $schema: 'https://vega.github.io/schema/vega/v5.json',\n data:[{\n name: \"disabilities\",\n url: \"https://gist.githubusercontent.com/StanisNowak/7432a7e657f857e1e98d2f0f10015db7/raw/8a211fcffbea75f7caa8583736048e096679727b/disabilityParking.geojson\",\n format: {\n type: \"json\",\n property: \"features\"\n }\n }],\n projections: [{\n name: \"projection\",\n fit: {signal: \"data('disabilities')\"},\n size: {signal: \"[800, 600]\"},\n //scale: 190000,\n //center: [-123.149648,49.265815],\n type: \"mercator\"\n }],\n marks: [\n {\n type: \"shape\",\n from: {data: \"disabilities\"},\n encode: {\n update: {\n opacity: {value: 0.25},\n fill: {value: \"blue\"}\n }\n },\n transform: [\n {\n type: \"geoshape\",\n projection: \"projection\",\n pointRadius: 6\n }\n ]\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md `#### Test 4: selectable streets.\n Some things to notice here with these data:\n

I have to scale the map to the view. There seem to be a couple of ways to do this. \n
- I can use d3.geoCentroid(data) but then I need to have the data structure explicitly identified. In this current example I am not defining an explicit data structure for the street path. The previous examples do use this method, see above. \n
- I can use the d3 fitSize() function in a black preceding the code to set the projection parameters:
  \n\nd3 \n .geoMercator() \n .fitSize([100, 100], Streets) \n .scale()
- or I can use a signal that takes the data and fits to it:
  \n\nprojections: [{ \n name: \"projection\", \n fit: {signal: \"data('disabilities1')\"}, \n size: {signal: \"[800, 600]\"}, \n\n<\\li>\n
\n
I have added a tooltip that shows the NOTES and LOCATION fields of the point data on mouseover.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"VanStreets = d3.json(\"https://gist.githubusercontent.com/drlynb/234c622e2f98da7c61393cbb33573bf8/raw/8e8fa5ae3dc76d94dcca3a50e3dce41b89eb7185/vanstreets.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"$32","pinned":true,"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":190,"value":"dp2 = d3.json(\"https://gist.githubusercontent.com/StanisNowak/7432a7e657f857e1e98d2f0f10015db7/raw/8a211fcffbea75f7caa8583736048e096679727b/disabilityParking.geojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"dparking = d3.json(\"https://gist.githubusercontent.com/drlynb/6dffc7ccdaf774ee031dc46c909721b2/raw/8a8b8fb6b6b60e66980cbb9f897b198bac23dbf7/testparking.geojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"dparking1 = d3.csv(\"https://gist.githubusercontent.com/drlynb/2b4ac0221b8138ade06cd91886b95f69/raw/a45e5883da217c0c1b3237df307136b5ee86a7e9/disparking2.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"Streets = d3.json(\"https://www.sfu.ca/~lyn/data/Urban/VancouverStreets.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"embedWithSpecificVersions = require.alias({\n \"vega\": \"vega@5.3.1\",\n \"vega-lite\": \"vega-lite@3.0.0\"\n})(\"vega-embed@4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"vega_explicit = {\n const [Vega, VegaLite] = await Promise.all([\n require(\"vega@3/build/vega.min.js\"),\n require(\"vega-lite@3/build/vega-lite.min.js\")\n ]);\n return async spec => {\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"}],"files":"$W33","stdlib":"1","titling":"auto"}