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()
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.