Ph.D. Student in Computer Science and Engineering at UW | Research Assistant | Data Visualization TA
Published
Edited
Sep 26, 2022
1 star
md`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).`
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\`
Ordered
Lists,
and more. For reference, here is a guide to formatting using the Markdown syntaxhttps://observablehq.com/@jaynel/markdown-summary.
html`<h4>Here is some HTML</h4>`
<h4>Here is some HTML</h4>
{
const course = "CSE442";
const message = "Welcome to " + course;
return message;
}
currentWeek = 1
"There are " + (10 - currentWeek) + " weeks left in the quarter"
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(2, 2)
addMe('data', ' visualization')
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('Husky'); // 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 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@1.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@1.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)}))
datee = manual[1]['OH Date'].getDay()
FileAttachment("sample1.json").text() // here's what JSON data looks like as text
dataJSON = FileAttachment("sample1.json").json() // load and parse JSON from a file attached in Observable
json_url = FileAttachment("sample1.json").url() // we can also get a URL for a file attachment
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).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.
// to be filled -- filter and get the highest mpg in the USA.
// to be filled -- filter for cars only made from USA, sort in decending order, and select a subset of collumn to show for 5 rows only.
// to be filled -- find answer for each region
// to be filled -- change the unit for the weights
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
