31:Ta6b,md `## Working with geodata We to load our geodata in formats and coordinate systems that d3 suppports. The format natively supported by D3 is [GeoJSON](http://geojson.org/), so I'll use a GeoJSON file containing the neighbourhood local areas in Vancouver (my hometown) I downloaded from the Vancouver Open Data catalogue. Geodata are coded using a geodetic coordinate system format as a spatial reference and a projection. Each oordinate system has a specific specification ID that you can find at http://spatialreference.org/. The standard longitude and latitude references we use in d3, as far as I can tell, are WGS84 format - EPSG:4326. HOwever, many geodata come in different coordinate systems: Census Canada, for example, uses Lambert Conformal Conic (NAD 83); the City of Vancouver uses EPSG:26910. The coordinate system used in the geodata you have should be listed in an accompanying file (in the .prj file if the original data format is a shapefile directory). So you need to find the coordinate system (there may or may not be an EPSG number), and then convert the coordinates from the original form to the standard (lat,long). There are a number of ways to do this. You can download the free qGIS tool (if you want to dive into the full spectrum of GIS and geodata) and export the layers to the apporpriate datum in the LAyers menu. You can also use the arcGIS tools if you have access to them (it's an expnsive license, but most universities have full access). Or if you only have a couple of coordinates you can use an online pair conversion tool like https://mygeodata.cloud/cs2cs/. Once you have your coordinate system set to [lat,long] you need to get it into the right file format. You can export geoJSON from either qGIS or arcGIS using the Layers menu. There are also online tools: I used [mapshaper](http://mapshaper.org). Mapshaper lets you load and inspect your geographic data and export it tp geoJSON or topoJSON formats. It does NOT however let you convert your coordinate system. Once you have the data, you can set it up as a gist or host it somewhere and load the file using the regular \`d3.json()\` function. The GeoJSON file contains a single \`FeatureCollection\` object that contains an array of \`features\`. Its \`features.geometry\` property contains the array of individual areas as polylines - explore the object hierarchy to get a feel for the structure of the data and the information it contains. Note that to be able to select the areas properly, ie. not select the entire path, you need to specify the feature: property in your data:
  { transform{ Property:features }} <\code>. `32:T90b,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": "areasV",
      "values": vanAreas,
      "format": {"type": "json", "property": "features"},
      "transform": [
        {
          "type": "geoshape",
          "projection": "projection"
        }
      ]
    }
  ],
  "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.properties.NAME"
    }]
  }
],
   "scales": [
    {
      "name": "color",
      "type": "quantize",
      "domain": [0, .15],
      "range": {"scheme": "blues", "count": 7}
    }
  ],
  "marks": [
  {
    "type": "shape",
    "from": {"data": "areasV"},
     "encode": 
     {
        "enter": 
        {
          "path": {"field": "path"},
          "fill": {"value": "#dedede"},
          "stroke": {"value": "white"},
          "tooltip": {"signal": "{'Local Area': datum.properties.NAME}"}
        },
        "update": 
        {
          "path": {"field": "path"},
          "stroke": {"value": "white"},
          "zindex": {"value": 0}
        },
       "hover": {
          "strokeWidth": {"value": 1},
          "stroke": {"value": "firebrick"},
          "zindex": {"value": 1}
        },
       "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:Ta58,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": "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"]
         }
      ]
    }
  ],
  "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, .15],
      "range": {"scheme": "blues", "count": 7}
    }
  ],
  "marks": [
  {
    "type": "shape",
    "from": {"data": "areasV"},
     "encode": 
     {
        "enter": 
        {
          "path": {"field": "layout_path"},
          "fill": {"value": "#aaaaaa"},
          "stroke": {"value": "white"},
          "tooltip": {"signal": "{'Local Area': datum.properties.NAME, 'Population': datum.properties.population}"}
        },
        "update": 
        {
          "path": {"field": "path"},
          "stroke": {"value": "white"},
          "fill": { "value": "#aaaaaa"},
          "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"}
      }
    }
   }
]
})34:Ta58,embedWithSpecificVersions(
 {
  "$schema": "https://vega.github.io/schema/vega/v5.json",
   "width": 650,
  "height": 450,
  "padding": {"top": 0, "left": 0, "right": 0, "bottom": 0},
  "autosize": "none",

  "data": [
     {
      "name": "vPop",
      "values": populations
     },
    {
      "name": "MP",
      "values": vanMP,
      "format": {"type": "json", "property": "features"},
      "transform": [
        {
          "type": "geopath",
          "projection": "projection"
        },
        {
          "type": "lookup", 
          "from": "vPop", "key": "Area",
          "fields": ["properties.NAME"], "as": ["Population"]
        }
      ]
    }
  ],
  "projections": [
    {
     name: "projection",
      type: "mercator",
      scale: 200000,
      center: d3.geoCentroid(vanMP)
      //"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, .15],
//      "range": {"scheme": "blues", "count": 7}
//    }
//  ],
  "marks": [
  {
    "type": "shape",
    "from": {"data": "MP"},
     "encode": 
     {
        "enter": 
        {
          "path": {"field": "layout_path"},
          "fill": {"value": "#aaaaaa"},
          "stroke": {"value": "black"},
         "tooltip": {"signal": "{'Local Area': datum.properties.NAME, 'Population': datum.Population.Population}"}
        },
        "update": 
        {
          "path": {"field": "path"},
          "stroke": {"value": "black"},
          "fill": { "value": "#aaaaaa"},
          "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"}
      }
    }
   }
]
})35:T573,md `#### Test 4: the final frontier.
That worked !! So the issue was how i accessed the data join. What the lookup function did was to join the entire vanPop data structure for each area to the main geoData, so i was not accessing the correct level of the new data structure. Here is where looking at the actual code in the Vega editor was really useful. 
When i accessed 
 
"tooltip": {"signal": "{'Local Area': datum.properties.NAME, 'Population': datum.properties.Population}"} 
 
I was actually pulling in the whole data structure in the vanPop element. So I needed to go one level deeper: 
 
"tooltip": {"signal": "{'Local Area': datum.properties.NAME, 'Population': datum.Population.Population}"} 
.
I also decided to colour the neighbourhoods based on a quantized color scale. This all works. There is some wierdness in accessing levels of the data structures: in the fill operation,  I set the field to use for the color scale as Population.Population and NOT properties.Population.Population, whereas in the tooltip i need to use datum.properties.NAME (from the original vanAreas Object) but datum.Population.Population (not in the properties subarray). It's all about how Vega does the join.
`36:Tbb1,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": "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"}
      }
    }
   }
]
})37:T7bf,embed({
  width: 900,
  height: 600,
  padding: { top: 0, left: 0, right: 0, bottom: 0 },
  data: [
    {
      name: "parkingVan",
      values: dparking1,
     //"format": {"type": "csv", "parse": "auto"},
      "transform": [
      {
      "type": "geopoint",
      "projection": "projection",
      "fields": ["longitude", "latitude"]
       },
      {
      "type": "filter",
       "expr": "datum.x != null && datum.y != null"
      }
      ]
    }],
  scales: [],
    "signals": [
  {
    "name": "hover",
    "value": null,
    "on": [
      {"events": "symbol:mouseover", "update": "datum"},
      {"events": "symbol:mouseout", "update": "null"}
    ]
  },
  {
    "name": "dparkspots",
    "value": "Vancouver Disabled PArking Spaces",
    "update": "hover ? hover.NOTES + ' (' + hover.DESCRIPTN + ')' + ': ' + hover.LOCATION: 'Vancouver Disabled Parking'"
  }
],
  projections: [
    {
      name: "projection",
      type: "mercator",
      scale: 200000,
      center: d3.geoCentroid(dparking)
      //"translate": [{"signal": "width / 2"}, {"signal": "height / 2"}]
    }
  ],
 "marks": [
   {
  "type": "symbol",
  "from": {"data": "parkingVan"},
  "encode": {
    "enter": {
      "size": {"value": 60},
      "fill": {"value": "green"},
      "fillOpacity": {"value": 0.8},
      "stroke": {"value": "black"},
      "strokeWidth": {"value": .5}
      },
    "update": {
      "x": {"field": "x"},
      "y": {"field": "y"},
      "fill": {"value": "green"}
    },
    "exit": {
       "x": {"field": "x"},
      "y": {"field": "y"},
      "fill": {"value": "green"}
    },
    "hover": 
    {
       "fill": {"value": "red"}
    }
  }
},
   {
  "type": "text",
  "interactive": false,
  "encode": {
    "enter": {
      "x": {"signal": "width", "offset": -5},
      "y": {"value": 0},
      "fill": {"value": "black"},
      "fontSize": {"value": 10},
      "align": {"value": "right"}
    },
    "update": {
      "text": {"signal": "dparkspots"}
    }
  }
}
  ]
})38:Ta00,embed({
  width: 900,
  height: 560,
  padding: { top: 0, left: 0, right: 0, bottom: 0 },
  data: [
    {
      name: "streetsVan",
      url:
        "https://gist.githubusercontent.com/drlynb/234c622e2f98da7c61393cbb33573bf8/raw/8e8fa5ae3dc76d94dcca3a50e3dce41b89eb7185/vanstreets.json",
      format: { type: "json", feature: "vanstreets" },
      transform: [
        {
          type: "geopath",
          projection: "projection"
        }
      ]
    },
  {
      name: "parkingVan",
      values: dparking1,
     //"format": {"type": "csv", "parse": "auto"},
      "transform": [
      {
      "type": "geopoint",
      "projection": "projection",
      "fields": ["longitude", "latitude"]
       },
      {
      "type": "filter",
       "expr": "datum.x != null && datum.y != null"
      }
      ]
    }],
  scales: [],
    "signals": [
  {
    "name": "hover",
    "value": null,
    "on": [
      {"events": "symbol:mouseover", "update": "datum"},
      {"events": "symbol:mouseout", "update": "null"}
    ]
  },
  {
    "name": "dparkspots",
    "value": "Vancouver Disabled PArking Spaces",
    "update": "hover ? hover.NOTES + ' (' + hover.DESCRIPTN + ')' + ': ' + hover.LOCATION: 'Vancouver Disabled Parking'"
  }
],
  projections: [
    {
      name: "projection",
      type: "mercator",
      scale: 200000,
      center: d3.geoCentroid(Streets)
      //"translate": [{"signal": "width / 2"}, {"signal": "height / 2"}]
    }
  ],
  marks: [

    {
      type: "path",
      from: { data: "streetsVan" },
      encode: {
        enter: {
          stroke: { value: "#bbbbbb" }
        },
        update: {
          path: { field: "path" }
        }
      }
    },
    {
  "type": "symbol",
  "from": {"data": "parkingVan"},
  "encode": {
    "enter": {
      "size": {"value": 60},
      "fill": {"value": "green"},
      "fillOpacity": {"value": 0.8},
      "stroke": {"value": "black"},
      "strokeWidth": {"value": .5}
      },
    "update": {
      "x": {"field": "x"},
      "y": {"field": "y"},
      "fill": {"value": "green"}
    },
    "exit": {
       "x": {"field": "x"},
      "y": {"field": "y"},
      "fill": {"value": "green"}
    },
    "hover": 
    {
       "fill": {"value": "red"}
    }}},
   {
  "type": "text",
  "interactive": false,
  "encode": {
    "enter": {
      "x": {"signal": "width", "offset": -5},
      "y": {"value": 0},
      "fill": {"value": "black"},
      "fontSize": {"value": 12},
      "align": {"value": "right"}
    },
    "update": {
      "text": {"signal": "dparkspots"}
    }
  }
}
  ]
})39:T44b,md `#### Test 4.
Finally I am going to do this using the geoshapes - they look much nicer! and they are not so gnarly. Some things to notice here with these data:

I have to scale the map to the view. There seem to be a couple of ways to do this. 

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. 
 I can use the d3 fitSize()  function in a black preceding the code to set the projection parameters: 
 

d3

  .geoMercator()

  .fitSize([100, 100], Streets)

  .scale()
 
or I can use a signal that takes the data and fits to it:


projections: [{

    name: "projection",

    fit: {signal: "data('disabilities1')"},

    size: {signal: "[800, 600]"},


<\li>


I have added a tooltip that shows the NOTES and LOCATION fields of the point data on mouseover.
`3a:T9e7,parking1 = embedWithSpecificVersions({
  $schema: 'https://vega.github.io/schema/vega/v5.json',
  data:[
    {
      name: "streetsVan1",
      url:
        "https://gist.githubusercontent.com/drlynb/234c622e2f98da7c61393cbb33573bf8/raw/8e8fa5ae3dc76d94dcca3a50e3dce41b89eb7185/vanstreets.json",
      format: { type: "json", feature: "vanstreets" },
      transform: [
        {
          type: "geopath",
          projection: "projection"
        }
      ]
    },
    {
    name: "disabilities1",
    url: "https://gist.githubusercontent.com/StanisNowak/7432a7e657f857e1e98d2f0f10015db7/raw/8a211fcffbea75f7caa8583736048e096679727b/disabilityParking.geojson",
    format: {
      type: "json",
      property: "features"
    }
  }],
  "signals": [
  {
    "name": "hover",
    "value": null,
    "on": [
      {"events": "symbol:mouseover", "update": "datum.properties"},
      {"events": "symbol:mouseout", "update": "null"}
    ]
  },
  {
    "name": "dparkspots",
    "value": "Vancouver Disabled Parking Spaces",
    "update": "hover ? hover.properties.NOTES + ' (' + hover + ')' + ': ' + hover: 'Vancouver Disabled Parking Spaces'"
  }
],
  projections: [{
    name: "projection",
    fit: {signal: "data('disabilities1')"},
    size: {signal: "[800, 600]"},
    //scale: 190000,
    //center: [-123.149648,49.265815],
    type: "mercator",
   center: d3.geoCentroid(Streets)
  }],
  marks: [
    {
      type: "shape",
      from: {data: "disabilities1"},
      encode: {
        enter: {
          opacity: {value: 0.50},
          fill: {value: "blue"},
          "tooltip": 
            {"signal": "{'Notes': datum.properties.NOTES, 'Location': datum.properties.LOCATION}"}
        },
        update: {
          opacity: {value: 0.50},
          fill: {value: "blue"}
        },
       hover: {"fill": {"value": "red"}}
      },
      transform: [
        {
          type: "geoshape",
          projection: "projection",
          pointRadius: 6
        }
      ]
    },
    {
      type: "path",
      from: { data: "streetsVan1" },
      encode: {
        enter: {
          stroke: { value: "#aaaaaa" }
        },
        update: {
          path: { field: "path" }
        }
      }
    },
  {
  "type": "text",
  "interactive": false,
  "encode": {
    "enter": {
      "x": {"signal": "width", "offset": -5},
      "y": {"value": 0},
      "fill": {"value": "black"},
      "fontSize": {"value": 14},
      "align": {"value": "right"}
    },
    "update": {
      "text": {"signal": "dparkspots"}
    }
  }
}
  ]
})3b:[]
2f:{"title":"Vancouver mapping 101","cells":[{"id":0,"value":"md`# Vancouver mapping 101\nIn which once again lyn comes head to head with geocoding`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"md `I now need to bring in my next data set - population density of Vancouver. I use an edited census data set from 2011. I wrote a function in another workbook  to calculate total populations by neighbourhood so I will just import it here. I also need to import the data set i was using, but all good, because any improvements  I make to the other code will automatically show up here.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"import {SumPops} from \"@drlynb/iat355-do-you-have-all-the-data-you-need-working-with-data-in-d/3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"populations = SumPops(vanPopCleaned)","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"md `#### Test 1: Selecting individual neighbourhoods\nHere I can select each shape. I used the geoshape rather than geopath object for performance. Either works as long as you use the right mark (shape, path) with it. Note that I manipulate the z-index of the selected areas because their borders overlap in the original geodata to x,y transformation. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"md `#### Test 2: Selecting individual neighbourhoods and using the tooltip\nSimply highlighting on hover the entire shape (red fill) as opposed to the border . I have joined the vanPop data with the geodata and  am also trying to get the population data into the tooltip. It keeps giving me \"undefined\".`","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"md `#### Test 3. Get one neighbourhood to work.\nI am having issues trying to join my census data. Let's try extracting one neighbourhood and see. As i have to keep it in the same format as the previous json-parsed file, i just have to remove the other neighbourhoods.\nOne note to observe is that we need to replicate and not just reference the original JSON data, so I have done the odd step of reformatting the vanAreas Object as JSON and then reparsing it into a new Object; finding one neighbourhood in the features array, and then extracting it into the new object. Ain't Javascript grand?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"vanMP = {\n  let newVanAreas = JSON.parse(JSON.stringify(vanAreas));\n  //let mpArea = {};\n   let mptemp =  newVanAreas.features.filter(function(nhood) {\n  return nhood.properties.NAME == \"Mount Pleasant\"});\n  newVanAreas.features = mptemp;\n  \n  return newVanAreas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":512,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"md `## Next Geo Objects: Vancouver disabled parking.\nAnd now we try this with the Vancouver disabled parking spot data.  These data come in two formats: a geojson file and a .csv file with (lat, long) already transformed as per above by  qGIS and mapshaper.`","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":113,"value":"md `#### Test 2: Vancouver Parking Spots Mapped the gnarlier way with csv and geopoint`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"md `Here because i have the properties associated with each point at the same level in the data structure I can easily access them using the \"hover\" event, so i can use the text mark to show them. Mouse over a point and see. There's an odd aspect that causes some of the points to disappear after they have been hovered, so I needed to add in the exit{} event to make sure that the points re-rendered.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md `#### Test 3: Overlay points on a street map.\nAnd now finally let's bring in the streets map and see if I can plot the spaces on top of the streets. Here I am NOT joining the data: I am simply overplotting the points on the map. 
\nI added the hover code to see the data associated with each point.
\nSomething to note about the street map is that it is defined as ONE compound path. I don't know how to select individual blocks, even though they are defined at some level in the data. Next project.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"$3a","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":357,"value":"vanAreas = d3.json(\"https://www.sfu.ca/~lyn/data/Urban/VancouverAreas.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"vanAreaValues  = d3.json(\"https://www.sfu.ca/~lyn/data/Urban/VancouverAreaValues.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"import {vanPopCleaned} from \"@drlynb/iat355-do-you-have-all-the-data-you-need-working-with-data-in-d/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":205,"value":"us10 = d3.json(\n  \"https://cors-anywhere.herokuapp.com/https://vega.github.io/vega/data/us-10m.json\"\n)","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://gist.githubusercontent.com/drlynb/234c622e2f98da7c61393cbb33573bf8/raw/8e8fa5ae3dc76d94dcca3a50e3dce41b89eb7185/vanstreets.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":"$W3b","stdlib":"1","titling":"auto"}