32:T6da,md`# Data Journalism lab #1 This is the lab for week three of the University of Iowa's data journalism class. In it you will clean up the Excel project from class, write a function to import it and and create a series of graphs. ### Step 0 Log into Observable and "Fork" this. ### Step 1 The first step is to open the baseball spreadsheet you created in class then make sure all the teams are correctly identified by league and division. Remember, at least one team's was wrong in the spreadsheet. Please fix that. All you need to do is download the [baseball.csv](http://daniel.buzz/data-journalism/data/baseball.csv) spreadsheet and calculate the average annual pay per player, make sure it's formatted as a "general" and resave as a CSV. |Abbreviation|Name|Conference| |---|---|---| |ARI|Arizona Diamondbacks|NL West| |ATL|Atlanta Braves|NL East| |BAL|Baltimore Orioles|AL East| |BOS|Boston Red Sox|AL East| |CHC|Chicago Cubs|NL Central| |CWS|Chicago White Sox|AL Central| |CIN|Cincinatti Reds|NL Central| |CLE|Cleveland Indians|AL Central| |COL|Colorado Rockies|NL West| |DET|Detroit Tigers|AL Central| |HOU|Houston Astros|AL West| |KC|Kansas City Royals|AL Central| |LAA|Los Angeles Angels|AL West| |LAD|Los Angeles Dodgers|NL West| |MIA|Miami Marlins|NL East| |MIL|Milwaukee Brewers|NL Central| |MIN|Minnesota Twins|AL Central| |NYM|New York Mets|NL East| |NYY|New York Yankees|AL East| |OAK|Oakland A's|AL West| |PHI|Philadelpia Phillies|NL East| |PIT|Pittburgh Pirates|NL Central| |SD|San Diego Padres|NL West| |SF|San Francisco Giants|NL West| |SEA|Seattle Mariners|AL West| |STL|St. Louis Cardinals|NL Central| |TB|Tampa Bay Rays|AL East| |TEX|Texas Rangers|AL West| |TOR|Toronto Blue Jays|AL East| |WSH|Washington Nationals|NL East| `33:[] 31:{"title":"","cells":[{"id":240,"value":"chart","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"import {chart} with { salaries as data } from \"@lathropd/histogram\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`\n \n\n### Step 2\n\nCreate a *gist* the spreadsheet at [gist.github.com](https://gist.github.com).\n- select your data\n- copy it\n- go to [gist.github.com](\"https://gist.github.com\")\n- paste your data into the body\n- enter baseball.tsv under file name (A TSV is like a CSV, but tab delimited. That's how Excel puts things on the clip board.) \n- add \"Baseball salaries for Data Journalism lab 1\" under description\n- click \"Create secret gist\"\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"md`\n### Step 3\n\nCreate a variable\n\n- go back to your gist\n- click on \"Raw\" and copy the URL\n- in the cell below type \\`let url = \"URL\"\\` where URL is the URL of your raw data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"url = \"https://gist.githubusercontent.com/lathropd/0d63302f6c3c1014f2cd3846a23967a8/raw/9e7f666b7a2a83fb6d8e444215d7c46a0d60a62b/baseball.tsv\" // this is a comment","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`### Step 4\n- Select the cell above and click ► \n- The code you ran should appear above it\n- click the \"+\" below this text\n- in that box type d3 = require(\"d3@5\") to load the d3 library\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`### Step 4\n- click the \"+\" below this text\n- in that box type pay = d3.tsv(url) to load the data from the TSV in the url\n- run the cell\n- above the cell you should see \"pay = ►Array(877) [Object, Object, Object, Object ...\"\n- edit the cell above by adding \" // import the TSV salary data\" at the end of the line\n- click run\n- nothing should happen, but you just added a comment \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"pay = d3.tsv(url)","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"// code TK","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"md`### Step 5: Make a chart\n\nThing we're going to do is learn to import a graphic from another notebook. In particularly we're going to import [@d3/histogram](/@d3/histogram). So take a look at it in a new tab first.\n\nOK, so here's the trick. When you import something (including a graphic) from another notebook you follow the syntax: \n \n**import {*things*} with {*yourThings* as *theirThings*} from \"@user/sheet\"**\n\nIn this case, we want to import the *chart* but replace its data with our own data.\n\n#### Step 5.1: Process the data\nThe graphic we're importing is a *histogram*, a bar chart that shows the distribution of values in a data set.\n\n- we need to create data a list average pay amounts\n- this will come from our *pay* variable, which is an \"*array*\" (list) object\n- arrays have a *method* called *map* which lets you create a new list based on an old one\n- in the cell below create a new variable called *salaries* and set it equal to *pay.map(d => d[\"Average Pay\"])*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"salaries = pay.map(d => +d[\"Salary\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"md`#### Step 5.2: Import the chart\n- write a statement to *import* the *chart* from [@lathropd/histogram](/@lathropd/histogram)\n- the import should use your *salaries* variable in place of the histogram's data variable\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`#### Step 5.3: Display the chart\n- enter *chart* into the cell below and click run.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`That will initially give you a chart that seems wrong. That's because it's still treating the pay as text and sorting alphabetically. Add a '+' in front of the d[\"Average Pay\"] in the salaries function to force it to act as a number.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"md`\n### \n### Step 6: Submit it\n\n- go up to the top and select the \"...\" menu\n- choose \" Download code\"\n- save the .tgz file (don't open it)\n- upload it to the class [dropbox](https://www.dropbox.com/request/2MSDMFSDHR8ToKBs8xv9)\n\n\n\n\n![we did it](https://media.giphy.com/media/zE3bQcnh3V2ko/source.gif)\n\n\n

-30-

\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}