CSE 442 Tutorial 1: Observable and Data Wrangling (student version) / Katherine Juarez

Katherine Juarez

Workspace

Public

Edited

Sep 29, 2023

Fork of CSE 442 Tutorial 1: Observable and Data Wrangling (student version)

•

23 forks

md`Here is some Markdown. Edit me! You can add... a new sentence

# Headers of

### different sizes,

* bullet

* points

\`fixed width font\`

1. Ordered

2. Lists,

and more. For reference, here is a [guide to formatting using the Markdown syntax](https://observablehq.com/@jaynel/markdown-summary).`

or using the new Markdown mode of Observable:

Here is some Markdown. Edit me! You can add...

# Headers of

### different sizes,

* bullet

* points

\`fixed width font\`

1. Ordered

2. Lists,

and more. For reference, here is a [guide to formatting using the Markdown syntax](https://observablehq.com/@jaynel/markdown-summary).

html`<h4>Here is some HTML</h4>`

{

const course = "CSE442";

const message = "Welcome to " + course;

return message;

}

currentWeek = 2

"There are " + (10 - currentWeek) + " weeks left in the quarter"

442

442 // a number

true // a boolean

isNaN(442) // you may use isNaN(a) to check if a is Not-A-Number

(1 + Math.sqrt(5)) / 2 // you can also do math

Math.random() // or generate 'random' numbers

2 < 1 // you can compare things

"A" < "a" // including string comparisons

2 + 2 === 4 // more comparison

2 + 2 !== "4" // and more

2 + 2 == "4" // double equals

2 + 2 === "4" // triple equals

date = new Date()

function addMe(a, b) { // function signature: name and input arguments

return a + b; // function body, with return statement for output

}

addMe(3, 2)

addMe('data', ' visualization is fun')

addMe('💕', 'U', '😍') // sorry heart-eyes, extra arguments are ignored

addMe('1') // something from nothing

addMe2 = (a, b) => a + b

arr1 = [1, 2, 3, 'hi'] // you can initialize an array like this

{

arr1.push('Katherine'); // you can push elements to array, this updates the array content

return arr1;

}

arr1.map(d => d * 2)

result = arr1.filter(d => !isNaN(d)).map(d => d * 2) // keep valid numbers only, then double them

result.slice().sort() // the default sort method is ascending

result

.slice() // you can first make a copy of an array, so we don't overwrite earlier values

.sort((a, b) => b - a) // you can define a custom sort comparator; here we sort numbers in descending order

object['key'] = 'new new Value'

object['newKey'] = 'new value'

Object.keys(object) // return an array of property key strings

Object.values(object) // return an array of property values

csvText = FileAttachment("sample1.csv").text() // loading a text file attached in Observable

dataCSV = d3.csvParse(csvText) // if we have the text loaded already, we can use d3.csvParse

csvURL = FileAttachment("sample1.csv").url() // you can get the url of a file you attached to Observable with .url()

dataCSV2 = d3.csv(csvURL) // if we have a URL to a CSV, we can use d3.csv to both load and parse

auto = d3.csv(csvURL, d3.autoType) // can handle numbers and booleans, but not all date formats

manual = d3.csv(csvURL, ({Name, Job, date}) => ({Name: Name, Job: Job, 'OH Date': new Date(date)}))

day = manual[1]['OH Date'].getDay()

FileAttachment("sample2.json").text()

dataJSON = FileAttachment("sample2.json").json() // load and parse JSON from a file attached in Observable

json_url = FileAttachment("sample2.json").url() // we can also get a URL for a file attachment

dataJSON2 = d3.json(json_url) // loading with url

strJson = JSON.stringify(dataJSON)

JSON.parse(strJson)

// your code goes here

// uncomment cell below to see the solution

// your code goes here

// uncomment cell below to see the solution

cars = (await require('vega-datasets@1'))['cars.json']()

printTable(cars.slice(0,10))

cars_table = aq.from(cars)

cars_table.view()

// to be filled -- filter only USA.

// op.upper(): Returns the string value converted to upper case.

// op.includes(array, value[, index]): Determines whether an array includes a certain value among its entries, returning true or false as appropriate.

cars_table