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
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.