Text and Strings

JavaScript objects, APIs, and data formats

1.31.2018 // DataViz for Arch, Urbanism, Humanities

Some inspiration

Colored by topic: satellite / moon / R&D / rockets / space shuttle / russia

Representing the same data two-ways

Dataset:�

• victim of a traffic accident in France in 1958

​

• Pedestrians 28,951
• Bicycles 17,247
• Motorcycles 74,887
• 4-Wheeled 63,071

String manipulation

String Operators

​

• Attach two strings together...

var fname = "Harry ";

var lname = "Potter";

console.log(fname + lname);

>> "Harry Potter"

• Get the length, in number of characters...

var name = "Snuffleupagus";

console.log(name.length);

>> 13

​

​

​

• Get the string between the nth characters...

var str = "Apple, Banana, Kiwi";

var res = str.substring(7, 13);

>> "Banana"

• Find the position of the first occurrence of a text...

var str = "Please locate where Waldo is!";

console.log(str.indexOf("Waldo"));

>> 20

• Replace one sequence of letters with another...

var str = "Let’s go to LA!";

console.log(str.replace("LA", "Chicago"));

>> "Let’s go to Chicago!"

​

​

​

• Split a string by a specific character in to an array...

var str = "Hello! How are you?";

console.log(split(str, "!");

>> ["Hello", " how are you?"]

var str = "Once upon a time";

console.log(split(str, " ");

>> ["Once", "upon", "a", "time"]

• Join an array into a single string...

var arr = ["Once", "upon", "a", "time"];

console.log(join(arr, "! "));

>> "Once! upon! a! time"

if-statements continued:

string comparison and logical operators

Relational operators, for strings

​

​

Logical operators allow you to combine boolean values.

​

Sometimes you need more complicated logic that combines multiple requirements, e.g.

​

If today is a weekday, and the student is Sally, send a PB&J sandwich for lunch.

! operator

• ! (pronounced "not") is a one-argument operator (applies to one thing) that negates a boolean value: (!true) is false and (!false) is true.

​

var hot = true;

var sunny = true;

if( !sunny ) {

console.log("bring an umbrella");

}

​

&& operator

• && (pronounced "and") is a two-argument operator that returns true only if both arguments are true; otherwise it returns false.

​

var hot = true;

var sunny = true;

if( sunny && hot ) {

console.log("wear a hat");

}

​

|| operator

• || (pronounced "or") is a two-argument operator that returns true if and only if one of the arguments is true; otherwise it returns false.

​

var cold = true;

var windy = false;

if( cold || windy ) {

console.log("wear a coat!");

}

​

​

Truth tables:

​

First input in orange

Second input in blue

Output in white

&& operator

|| operator

Examples of logical operators in action

​

​

One more data type: Objects

Objects are...

• Simply, grouping of different types of information.
• More complex, a representation of an “actor” with state and behavior: for example, you can program a real-world being with complex behaviors like so:

var bird = {

species: "bluejay",

color: "blue",

location: [34.23, 498.23],

fly: function() {...},

cry: function() {...}, ...

}

​

An object has two characteristics...

• State: this is the collection of information in the object, aka JavaScript properties. Different kinds of objects have different kinds of information in them: a Shape might have width, height, margins, color; a Date object might have year, month, day, hour, etc.
• Behavior, are described through functions. Methods allow you to operate on the object, extracting information and even modifying the information.

Object Syntax

​

var emptyObject = {};

​

​

var person = {

name: "Harry Potter",

age: 11,

gender: "Male",

currentLocation: "Surrey, England"

}

​

• The object is enclosed by squiggly brackets: {}.
• Each property is listed as key-value pairs: one pair looks like

{ name: "Harry" }, where key = name and value = Harry

• Reading a value:

person.name;

// returns "Harry"

• Changing a value:

person.name = "Agnes";

// person now stores "Agnes" as the name

​

• This syntax will be how we usually work with data in JavaScript. More on this later.

What’s an API?

API = Application Programming Interface

​

• APIs are basically an agreement between different software packages, or different computers, on how to communicate.

• Real-world analogy: electricity plugs in your house: “plug-and-play” when both sides have the same way of “connecting”, a certain shape with a certain voltage. Sometimes though, you’ll need converters.

How It Works

​

• You (the client) makes a request with specific parameters about what data you want, to an API endpoint.
• The server processes your request (usually pulls data from a database.)
• Server returns a response containing data according to the parameters you specified.
• You use the data to update your drawing.

Basic Components of working with an API

​

• Endpoints
• For the web, these are a bunch of URLs. You write code to talk to these, and different endpoints will give you different data back.
• Parameters
• You can customize what data you get back by specifying “settings” in your request, e.g. which user’s data, how many results to return, etc.
• Response
• Data, usually in the form of JSON (JavaScript Object Notation, a grammar for storing and exchanging data.)

APIs are everywhere

​

• Browser API
• Infrequently used, but you can write JS to open tabs, etc.
• Your own server
• Most commercial websites are built by engineering teams who write their own APIs to serve their own data to their pages.
• 3rd Party APIs
• Most large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users).

Security and Authentication with APIs

​

• Dangers
• Things you could theoretically do using an API (e.g. Facebook’s API): take down a server, misrepresent personal data or the site’s brand, cause 3rd party to lose traffic (and advertisement revenue), etc. etc.
• Control Mechanisms
• Sign-in
• Rate limiting
• App approval

Example Projects that Use 3rd Party APIs

​

• Every Noise at Once
• uses Echo Nest API to extract genre information and the Spotify Web API to play track previews.
• 10 Years of Tweets
• uses Twitter API to visualize one person’s activity on Twitter.

How to talk to APIs: HTTP Requests

HTTP(S) = Hypertext Transfer Protocol (Secure)

​

• Defines a format for how any two machines, or servers and clients, communicate.
• Specifies a set of:
• Request types
• GET “just reading data, not changing anything”
• POST “sending you data, plz update (do something with it!)”
• Response codes
• A series of numbers that tell you what’s happening with your request and the server...

Common HTTP Status Codes

• 200 OK� Server responded with what you wanted, Everything is great.
• 301 Moved Permanently

Usually invisible: URL automatically redirects to another URL.

• 400 Bad Request

Your request was invalid: typo, or bad format.

• 403 Forbidden

You’re not allowed to access this (not owner, or else sign in?)

• 404 Not Found

You’re asking for something that doesn’t exist.

• 500 Internal Server Error

Something broke in the server.

• 503 Service Unavailable

Can’t reach the server.

AJAX = Asynchronous Javascript And XML*

​

• “Asynchronous” is the key part: Ajax enables HTTP requests to happen at any time, without being tied to the page (re)load.
• *XML is actually a misnomer—these days JSON is the preferred format in which to exchange data.

​

• For example, Facebook: when you comment on a post, you’re filling out a small form and submitting it to FB’s servers using AJAX; once your submission is processed, only the relevant small section of the page updates, instead of refreshing the whole page.

Ajax for asynchronous client-server communication. From "Head First jQuery" book.

Helpful Reading (via Mozilla)

​

• Introduction to Web APIs
• Third Party APIs
• HTTP Overview
• Getting Started with AJAX
• List of HTTP request methods (e.g. GET, POST)
• List of HTTP response statuses (e.g. 404 not found)

Using NYTimes API

NYTimes API

​

• Get headlines, photos, links to articles
• Authentication is relatively easy
• Process:
• Go to https://developer.nytimes.com
• Sign up for API key (get email)
• Explore APIs via their tool
• Test out code (class demo)

Demo: JSON and Working with API Responses