Public
Edited
Oct 3, 2023
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).`
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 = "CS448B";
const message = "Welcome to " + course;
return message;
}
{
const course = "CS448B";
const message = "Welcome to " + course;
return message;
}
message = "I am taking " + course;
currentWeek = 3
"There are " + (10 - currentWeek) + " weeks left in the quarter"
442 // a number
"Data Visualization"// a string
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('data', ' visualization', 'CS448B') //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
result
object['key']['key2']
object['newKey'] = 'new value'
object
Object.keys(object) // return an array of property key strings
Object.values(object) // return an array of property values
csvText = FileAttachment("sample1-1@3.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@3.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@1.json").text() // here's what JSON data looks like as text
dataJSON = FileAttachment("sample1@1.json").json() // load and parse JSON from a file attached in Observable
json_url = FileAttachment("sample1@1.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
// .filter() ; .sort(+, 0, -)
data.filter(d => d['Job'] !== "Instructor").sort((a,b) => {
if (a['Name'] > b['Name']) {
return 1;
}
else if (a['Name'] < b['Name']) {
return -1;
}
else {
return 0;
}
})
// your code goes here
data.filter(d => d['Job'] === 'Course Assistant' && (d['OH Date'].getDay() === 2 || d['OH Date'].getDay() === 3))
// uncomment cell below to see the solution
data.filter(d => d['Job'] === 'Instructor' && d['OH Date'].getDay() === 1)
cars = (await require('vega-datasets@1'))['cars.json']()
printTable(cars.slice(0,10))
cars_table = aq.from(cars)
cars_table.view()
// Your code goes here:
// Hints:
// op.upper(): Returns the string value converted to upper case.
// op.includes(array, value): Determines whether an array includes a certain value among its entries,
// returning true or false as appropriate.
// Uncomment the code below to see the solution!
cars_table.filter(d => op.includes(d.Origin, "USA")).view()
// Your code goes here:
// Uncomment the code below to see the solution!
cars_table.filter(d => op.includes(d.Origin, "USA")).orderby('Miles_per_Gallon').view()
// Your code goes here:
// filter for cars only made from USA, sort in decending order, and select a subset of collumn to show for 5 rows only.
// Hint: Use aq.desc(field)!
cars_table.filter(d => op.includes(d.Origin, "USA")).orderby(aq.desc('Miles_per_Gallon')).view(5)
cars_table
.groupby('Origin')
.rollup({
count: d => op.count(),
med_cylinders: d => op.median(d.Cylinders),
min_year: d => op.min(op.year(d.Year)),
max_year: d => op.max(op.year(d.Year)),
avg_mpg: d => op.mean(d.Miles_per_Gallon),
avg_displacement: d => op.mean(d.Displacement)
/**
* Insert your code here!!
*/
})
.orderby(aq.desc('count'))
.view()
//Your code here
cars_table.derive({weight_in_kg: d => d.Weight_in_lbs * 0.453592}).view()
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.
