31:T59a,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, .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" } ] } ] })32:T5e1,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": "seqcolor", "type": "quantize", "domain": [0, uMax], "range": {"scheme": "greens", "count": 10} } ], "legends": [ { "fill": "seqcolor", "orient": "bottom-right", "title": "Unemployment", "format": "0.1%" } ], "marks": [ { "type": "shape", "from": {"data": "counties"}, "encode": { "enter": { "tooltip": {"signal": "{'county': datum.id,'rate': format(datum.rate, '0.1%')}"} }, "update": { "fill": {"scale": "seqcolor", "field": "rate"} }, "hover": { "fill": {"value": "red"} } }, "transform": [ { "type": "geoshape", "projection": "projection" } ] } ] })33:T5e5,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": "divcolor", "type": "quantize", "domain": [0, uMax], "range": {"scheme": "blueorange", "count": 10} } ], "legends": [ { "fill": "divcolor", "orient": "bottom-right", "title": "Unemployment", "format": "0.1%" } ], "marks": [ { "type": "shape", "from": {"data": "counties"}, "encode": { "enter": { "tooltip": {"signal": "{'county': datum.id,'rate': format(datum.rate, '0.1%')}"} }, "update": { "fill": {"scale": "divcolor", "field": "rate"} }, "hover": { "fill": {"value": "red"} } }, "transform": [ { "type": "geoshape", "projection": "projection" } ] } ] })34:T67f,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":"ue", "values": uArray3 }, { "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" }, { "type": "lookup", "from": "ue", "key": "id", "fields": ["id"], "values": ["name"] }, ] } ], "projections": [ { "name": "projection", "type": "albersUsa" } ], "scales": [ { "name": "divcolor", "type": "quantize", "domain": [0, uMax], "range": {"scheme": "blueorange", "count": 10} } ], "legends": [ { "fill": "divcolor", "orient": "bottom-right", "title": "Unemployment", "format": "0.1%" } ], "marks": [ { "type": "shape", "from": {"data": "counties"}, "encode": { "enter": { "tooltip": {"signal": "{'County': datum.name,'rate': format(datum.rate, '0.1%')}"} }, "update": { "fill": {"scale": "divcolor", "field": "rate"} }, "hover": { "fill": {"value": "red"} } }, "transform": [ { "type": "geoshape", "projection": "projection" } ] } ] })35:[] 2f:{"title":"IAT 355: Spatial Visualization Challenge","cells":[{"id":0,"value":"md`# IAT 355: Spatial Visualization Challenge`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`This is the simple Vega mapping example we gave IAT355.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md` ## Libraries and Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"embed = require(\"vega-embed@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md` ## Vega Choropleth Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"md `## Enriching the visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"html`Here were the challenges to extending the visualization\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"},{"id":83,"value":"md ` ## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"md` ### Find the appropriate values to change the colour scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md` To calculate the summary statistics we put the uneployment data into its own explicit array. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"uArray = d3.tsv(\"https://vega.github.io/vega-datasets/data/unemployment.tsv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"uArray[0].rate = +uArray[0].rate","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"uArray2 = {\n uArray.forEach(function(ud,i)\n {\n ud.rate = +ud.rate;\n console.log(i,ud.id,ud.rate);\n });\n return uArray;\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"md `First we need to change the rate field in the array to a number (all fields are default strings) using the +operator. \nWe can do this a couple of ways. WE can define a new array (uArray2) that sets the propert number for the \"rate\" field. WE did this above.\nOr, as you see in the following calculations, we can dynamically change the \"rate\" parameter. Note this only happens for the calculation: it does not reset the values in the array permanently`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"uMin = d3.min(uArray2, function(d) {return d.rate} )","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"uMax = d3.max(uArray, function(d) {return d.rate} )","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"uMed = d3.median(uArray, function(d) {return +d.rate} )","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md` Changed the colour to green,as i like it better, and added mpre steps. Also set the range from 0 to the uMax vallue, whiich is more flexible in case the data change. The new scale is called seqcolor. Note we have to now refer to it in the legend and the mark as well.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md` ## Marks`","pinned":false,"hidden":false,"mode":"ojs"},{"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\": \"seqcolor\", \"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"},{"id":65,"value":"md` I redefined the tooltip to show both the rate and the county ID.\n\nNext, the \"update\" encoding set makes sure that the color fill of each county corresponds to the scale named \"seqcolor\", which we defined earlier. Finally, we color each county red when hovering over it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"md `And here is the final product with a sequential scale. I also changed it to green because i like that better, and added more steps. The i put the county ID in the tooltip, which is not much use until i can look up the name.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"md `\"tooltip\": {\"signal\": \"{'title': 'Title','count': datum.Count, 'status': datum.Status}\"}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"Counties = d3.json(\"https://vega.github.io/vega-datasets/data/us-10m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"md `And here is the same map but now I am using a diverging color scale with the median as the neutral point. You can find many Vega scales at https://vega.github.io/vega/docs/schemes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"md `Now i want to actually add the name of the counties so I need to bring in another dataset and join the name field by looking up the datum.id and datum.Code fields.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"countylist = d3.csv(\"https://gist.githubusercontent.com/drlynb/c7a163a53964d6db632a125a21ae13dc/raw/3f5a52348344f0560bd293049292be0925e36619/uscounties.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"uArray3 = {\n uArray2.forEach(function(ud) {\n var result = countylist.filter(county => +(county.Code) === +(ud.id)) ; \n ud.name = (result[0] !== undefined) ? result[0].Name : null;\n }\n );\n return uArray2\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"md `And now i can put the name into the tooltip if I can just figure out how to reference and look up the value in the external array.\nYou can add a local array in the Vega specification by simply setting the source as \"values\".\n\n\\`\\`\\`\n{\n \"name\":\"ue\",\n \"values\": uArray3\n },\n\\`\\`\\`\n\nThen all I had to do was join it in the transform section so that the \"name\" field is added to the main data stream. \n\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 { \"type\": \"lookup\", \"from\": \"ue\", \"key\": \"id\", \"fields\": [\"id\"], \"values\": [\"name\"] },\n ]\n\\`\\`\\`\n\nThere are still some null values so clearly the dataset is not perfect yet.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"md `## Next Week`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md ` We will introduce leaflet and how to add various layers to it`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}