2b:[] 2a:{"title":"IAT355: Do you have all the data you need? Working with data in d3 and Vega","cells":[{"id":0,"value":"md`# IAT355: Do you have all the data you need? Working with data in d3 and Vega\nI am covering some of the basic in how we can work with data in the Observable/d3/Vega environment.\nYou should look at Mike Bostocks's Introduction to Data workbook before reading this. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md `## Modules, Libraries and Data Files\nImport the libraries and data files you need. In this workbook I will be using a number of datasets and showing you how to merge, join and/or reference them in the same visualizations.\nBecause the VPD file is large I am hosting it in my own webspace: the Census data is a gist.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"embed = require('vega-embed@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md `Data files are Vancouver Census DAta from 2011 by neighbourhood (source City of Vancouver Open Data) and non-violent crimes from 2008-2017 (source VPD).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"vanPop = d3.csv(\"https://gist.githubusercontent.com/drlynb/8a01ff9d1117e13220ba024ae43aca94/raw/008f0049e2b712f02407e57eede829e1fdf6eea7/VanPop2011.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"smallvanCrime = d3.csv(\"https://www.sfu.ca/~lyn/data/vpdcrime.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md `### Get the data into shape\nAll csv data are imported as text so I need to clean them. Thre are several ways:\n

iterate through and change text fields to appropriate formats;\n
change format while importing the d3.csv() function\n
use the d3.map() function\n

\nExamples follow of each.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"md ` ### 1. Iterate through and change text fields to appropriate formats`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md `

Use the + operator to iteratively change the text Population string in the VanPop array to a number. \n
use the same technique to change the year string in the smallVanCrime array to a number.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"vanPopCleaned = {\n let p1 = 0;\n let i=0;\n \n console.log (\"Starting\"); \n for (i=0;id3.csv function parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"vanPopCleaned2 = \n d3.csv(\"https://gist.githubusercontent.com/drlynb/8a01ff9d1117e13220ba024ae43aca94/raw/008f0049e2b712f02407e57eede829e1fdf6eea7/VanPop2011.csv\", function(d) {\n return {\n Area: d.Area,\n Age: d.Age,\n Gender : d.Gender,\n Population: +d.Population\n };\n })\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md `### Use the array.map() to change all types in the array`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"vanCrime2 = smallvanCrime.map( d => {\n var vc = d;\n vc.YEAR = +d.YEAR;\n return vc;\n})\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"popMax = {\n let i=0;\n let maxPop=0;\n for (i=0;i maxPop) maxPop = vanPopCleaned[i].Population;\n }\n return(maxPop)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"md `Now we have two arrays that have a field in common. First I am trying to set the crime data up in a trellis view.. I am trying to use the Vegalite wrapped facet to get a trellis display but so far am struggling.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"vegalite({\n data: {values: vanPopCleaned2},\n mark: \"tick\",\n encoding: {\n x: {field: \"Population\", \"type\": \"quantitative\"}\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"md `I copied the trellis code from the Bostock examples but it's not working yet. What is going on? `","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"vegalite({\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v3.json\",\n \"data\": {\"values\": vanCrime2},\n \"facet\": {\n \"row\": {\n \"field\": \"Offense\",\n \"type\": \"nominal\"\n }\n },\n \"width\": 100,\n \"spec\": {\n \"mark\": \"point\",\n \"encoding\": {\n y: { \n \"aggregate\": \"count\", \n \"type\": \"quantitative\"\n },\n x: {\n \"field\": \"NEIGHBOURHOOD\",\n \"type\": \"nominal\"\n },\n \"color\": {\"field\": \"Offense Type\", \"type\": \"nominal\"}\n }}}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"md `Now let's try the copied trellis code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"vega_explicit({\n \"name\": \"trellis_crime\",\n \"data\": {\"values\": vanCrime2},\n \"mark\": \"point\",\n \"columns\": 2,\n \"encoding\": {\n \"facet\": {\n \"field\": \"Offense Type\",\n \"type\": \"ordinal\",\n \"sort\": {\"op\": \"count\", \"field\": \"NEIGHBOURHOOD\"}\n },\n \"x\": {\n \"aggregate\": \"count\",\n \"field\": \"NEIGHBOURHOOD\",\n \"type\": \"quantitative\",\n \"scale\": {\"zero\": false}\n },\n \"y\": {\n \"field\": \"Offense\",\n \"type\": \"nominal\",\n \"scale\": {\"rangeStep\": 12}\n },\n \"color\": {\"field\": \"Offense Type\", \"type\": \"nominal\"}\n },\n \"resolve\": {\"axis\": {\"x\": \"independent\", \"y\": \"independent\"}}\n})\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"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":"$W2b","stdlib":"1","titling":"auto"}