2d:null 2e:["$","title",null,{"children":"IAT 355 Exercise: Spatial Visualization | drlynb | Observable"}] 33:T59b,embed({ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 960, "height": 500, "autosize": "none", "data": [ { "name": "unemp", "url": "https://vega.github.io/vega-datasets/data/unemployment.tsv", "format": {"type": "tsv", "parse": "auto"} }, { "name": "counties", "url": "https://vega.github.io/vega-datasets/data/us-10m.json", "format": {"type": "topojson", "feature": "counties"}, "transform": [ { "type": "lookup", "from": "unemp", "key": "id", "fields": ["id"], "values": ["rate"] }, { "type": "filter", "expr": "datum.rate != null" } ] } ], "projections": [ { "name": "projection", "type": "albersUsa" } ], "scales": [ { "name": "color", "type": "quantize", "domain": [0, 0.15], "range": {"scheme": "blues", "count": 7} } ], "legends": [ { "fill": "color", "orient": "bottom-right", "title": "Unemployment", "format": "0.1%" } ], "marks": [ { "type": "shape", "from": {"data": "counties"}, "encode": { "enter": { "tooltip": {"signal": "format(datum.rate, '0.1%')"}}, "update": { "fill": {"scale": "color", "field": "rate"} }, "hover": { "fill": {"value": "red"} } }, "transform": [ { "type": "geoshape", "projection": "projection" } ] } ] })34:T553,md` Next we define the marks. We use the "Shape" mark, which is a shape geometry that is drawn at *render* time. This uses canvas to draw the shape instead of SVG, which for our purposes means that things will work a lot more smoothly and quickly. We can quickly alter shapes based on the projection (imagine panning around a mercator projection. Where the shape is will change its form based on the projection. Shape allows the computations to be performed much more efficiently). The shapes data will be pulled from our topojson file "counties" along with the unemployment data we appended. Before we get into encoding sets, you may notice that there is a transform happening based on the projection. This allows the "shape" mark to be transformed based on the "albersUSA" projection we defined earlier. We discussed the process above. In the encoding sets, we have defined the tooltip signal inline within the "enter" encoding set. This means a tooltip is created based on the underlying datum of unemployment rate and formated to a 1 decimal place percentage. This is a bit more efficient than what we saw last week and is a quick way to create tooltips. Next, the "update" encoding set makes sure that the color fill of each county corresponds to the scale named "color", which we defined earlier. Finally, we color each county red when hovering over it.`35:[] 31:{"id":"6d9734827770e900","slug":"iat-355-exercise-spatial-visualization","title":"IAT 355 Exercise: Spatial Visualization","thumbnail":"26de4e02bd19f123f6a6a27f5de60d2f89efaf9d2704f80c64568336fbfc420f","access_level":"public","create_time":"$D2019-03-06T15:05:19.000Z","update_time":"$D2019-03-06T18:10:48.740Z","view_time":null,"first_public_time":"$D2019-03-06T18:11:21.676Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4a0762a387ec748f","login":"drlynb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dd242441d5e4ed40bfe5b09336f04460a3a4974825e2a9cb9088ade14a49fc15","tier":"starter_2024"},"version":139,"publish_version":139,"role":null,"authored":false,"authors":[{"type":"individual","id":"90a5d909f6de8793","login":"drlynb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dd242441d5e4ed40bfe5b09336f04460a3a4974825e2a9cb9088ade14a49fc15","tier":null}],"members":[{"type":"individual","id":"90a5d909f6de8793","login":"drlynb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dd242441d5e4ed40bfe5b09336f04460a3a4974825e2a9cb9088ade14a49fc15","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":16,"collection":null,"type":"notebook","body":{"title":"IAT 355 Exercise: Spatial Visualization","cells":[{"id":0,"value":"md`# IAT 355 Exercise: Spatial Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`As a first step towards spatial visualization we will look at how to create a simple chloropleth map in Vega. The following weeks will be devoted to understanding Leaflet and how to bring Vega and Leaflet together. \n\n[Leaflet](http://leafletjs.com/) is a library for embedding maps on websites. It provides an interface that pulls map _data & tiles_ from providers like OpenStreetMap and Mapbox, and visualizing it as an interactive map. Including a Leaflet map as part of a notebook is fairly similar to using it anywhere else, but here are the not-so-gritty details.\n\nLeaflet is an open-sourced library that is constantly being expanded and developed. As a result, there are many plugins and extensions you can introduce as layers. One of these is a [Vega Layer](https://www.npmjs.com/package/leaflet-vega).\n\nBefore we [introduce leaflet](https://observablehq.com/@tmcw/leaflet) and ways of integrating other libraries with it, we will first go through a vega mapping example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md` ## Libraries and Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"embed = require(\"vega-embed@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"dfjs = require('https://bundle.run/dataframe-js@1.3.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md` ## Vega Choropleth Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md` ## Vega Specification`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md `\n\\`\\`\\`\n\"$schema\": \"https://vega.github.io/schema/vega/v5.json\",\n \"width\": 960,\n \"height\": 500,\n \"autosize\": \"none\",\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md `First we need to specify the Vega properties, including data, projections, marks and scales.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"md ` ## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"df = dfjs.DataFrame.fromTSV('https://vega.github.io/vega-datasets/data/unemployment.tsv')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md `\n\\`\\`\\`\n \"data\": [\n {\n \"name\": \"unemp\",\n \"url\": \"https://vega.github.io/vega-datasets/data/unemployment.tsv\",\n \"format\": {\"type\": \"tsv\", \"parse\": \"auto\"}\n },\n {\n \"name\": \"counties\",\n \"url\": \"https://vega.github.io/vega-datasets/data/us-10m.json\",\n \"format\": {\"type\": \"topojson\", \"feature\": \"counties\"},\n \"transform\": [\n { \"type\": \"lookup\", \"from\": \"unemp\", \"key\": \"id\", \"fields\": [\"id\"], \"values\": [\"rate\"] },\n { \"type\": \"filter\", \"expr\": \"datum.rate != null\" }\n ]\n }\n ],\n\\`\\`\\`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md` We are pulling data from two sources. A \"tsv\" file with unemployment values and a georgraphic dataset corresponding to counties. This spatial dataset is a topojson type which specifies polygon shapes using a JSON format. In this instance, we are pulling the \"Counties\" level out of the JSON file. \n\nFrom here, we extend this dataset using a lookup transformation. We lookup values that match \"id's\", in this case counties, and add the unemployment rate to the geospatial dataset. We first had to load both data in order to do this transformation. Next, we filter out \"null\" values by filtering **for** values which do not equal null. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md` ## Projections`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`\n\\`\\`\\`\n \"projections\": [\n {\n \"name\": \"projection\",\n \"type\": \"albersUsa\"\n }\n ],\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`Projections map how lat and lon coordinates pair with the view coordinates (x, y). Vega uses projections for both points and regions to represent maps. There are many projection types to use for various purposes. In this case, we are using the \"albersUsa\" projection because it is created to minimize mutation of the lower 48 united states. You can find a list of the different projections available https://vega.github.io/vega/docs/projections/. Try changing the projection and seeing the result.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`\n\\`\\`\\`\n \"scales\": [\n {\n \"name\": \"color\",\n \"type\": \"quantize\",\n \"domain\": [0, 0.15],\n \"range\": {\"scheme\": \"blues\", \"count\": 7}\n }\n ],\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md` Here we are using a quantize scale. These are similar to linear scales, but they use a discrete versus continuous range. The steps are uniformly spaced. You can determine how many steps using the \"count\" parameter in the range operator. You may notice the domain is between 0 and .15. This is based on the minimum and maximum values found in the unemployment data. Finally, the color scheme we are using is called \"blues\". There are preset color schemes you may employ that have been pre-designed for various purposes based on perceptual principles.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`## Legends`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`\n\\`\\`\\`\n \"legends\": [\n {\n \"fill\": \"color\",\n \"orient\": \"bottom-right\",\n \"title\": \"Unemployment\",\n \"format\": \"0.1%\"\n }\n ],\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md` Here we explcitly define a legend. The fill is based on the our scale that we named \"color\". We could have named it anything like \"unemploymentcolor\". Next we orient it to the bottom-right hand side of the view, give it a title, and set the number format. There are standard d3 number format conventions. In this instance, \"0.1%\", formats the legend numbers to convert the decimal values like \"0.121\" to percents to first decimal place \"12.1%\".`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md` ## Marks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`\n\\`\\`\\`\n \"marks\": [\n {\n \"type\": \"shape\",\n \"from\": {\"data\": \"counties\"},\n \"encode\": {\n \"enter\": { \"tooltip\": {\"signal\": \"format(datum.rate, '0.1%')\"}},\n \"update\": { \"fill\": {\"scale\": \"color\", \"field\": \"rate\"} },\n \"hover\": { \"fill\": {\"value\": \"red\"} }\n },\n \"transform\": [\n { \"type\": \"geoshape\", \"projection\": \"projection\" }\n ]\n }\n ]\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md` ## Challenge`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"html`Here are some approaches to making your data functions more effective\n

add county name to tooltip<\\li>\n
Hard coding the scales is not a good idea for the data. What if the data change? Set color scale by finding the min and max of the unemployment rate
try a diverging scale by setting the neutral point at the mediam (you can find different colour scales here https://vega.github.io/vega/docs/schemes/

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md `Challenge answers can be found in this workbook: https://observablehq.com/@drlynb/spatial-visualization-challenge`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md `## Next Week`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md ` We will introduce leaflet and how to add various layers to it`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"