Remove Characters from Beginning of JavaScript String

Rainfall by State Part 1. The Code Cakes Project

Code

https://github.com/codetricity/codecakes-rainfall/tree/master/lessons/01

Start a new project

Create index.html

Create these sub-folders: js, data

Put d3.js into the js folder. Create main.js in the js folder

Add links in index.html to d3.js and main.js

Get the data

Copy the data from the site below and paste it into a Google Sheet.

Wettest and Driest US States

Organize data on the Google Sheet. Add column headers

Observe Problem with Data

Column A has the state name with a number in front of it. Although it’s possible to manually edit 50 cells in the spreadsheet, we’ll download the problem data and use JavaScript substring() to remove the characters ahead of the state name.

Download as Comma-Separated Values

We’ll export the data as a CSV file and process it with JavaScript.

Save into data/rainfall-by-state.csv

Load File

1. read in using d3.csv( Hint: put the file name in the parenthesis. Chain a promise with .then(). Put the successful callback anonymous function inside of the parenthesis for .then
2. use console.log to see contents

If there is a problem with CORS, run the Fenix web server or a small Python web server with python -m SimpleHTTPServer

Answer is below graphic.

Set up forEach loop

1. data is an array of objects. Loop through the array with data.forEach(...
2. Use the variable stateData to hold each object temporarily as the loop processes each element of the array. (Each element is an object).
3. You can access the value of the properties with stateData.rainfall and stateData.state
4. Convert the string value for property rainfall into a number using the + technique. Example: stateData.rainfall = +stateData.rainfall
5. Move the console.log(data line below the end of the forEach loop

Answer is below graphic.

Delete Numbers, Periods, and Spaces from state string

1. Look for characters that are not “A” through “Z”, starting at the first character and going through the first five characters
2. If the character is not A-Z, delete it from the front of the string
3. If the character is in A-Z, you’ve found the start of the state name. Break out of the for loop.

To check for A-Z characters, we’re using a weird type of matching syntax called, “regular expressions” or “regexp”.

The main points of this rather confusing syntax:

• the expression is between /
• ^ looks for a match at the beginning of a string
• [A-Z] looks for capital alphabets
• .test(string) is used to look for a match

Review JavaScript Concepts

• promise
• substring
• RegExp
• break
• forEach

for Statement Review

• for (let i = 0; i < array.length; i++)
• array.forEach() — break does not work
• for…in — only for objects
• for…of — can use break

Next Lesson

Divide Large Data Set into Smaller Data Sets

Code Cakes Project Information

• Introduction
• YouTube
• Publication