Published
Edited
Oct 1, 2021
1 fork
2 stars
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
{
// you can push elements to array, this updates the array content
arr1.push('Husky'); // WARNING: this can have unintended side effects as arr1 is modified!
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)
cars_table
.filter(d => op.includes(op.upper(d.Origin), 'USA'))
.view()
cars_table
.filter(d => op.includes(op.upper(d.Origin), 'USA'))
.orderby('Miles_per_Gallon')
.view()
cars_table
.filter(d => op.includes(op.upper(d.Origin), 'USA'))
.orderby(aq.desc('Miles_per_Gallon'))
.select('Name', 'Miles_per_Gallon', 'Origin')
.view(5)
cars_table
.groupby('Origin')
.rollup({
count: d => op.count(),
med_cyl: d => op.median(d.Cylinders),
min_year: d => op.min(op.year(d.Year)),
max_year: d => op.max(op.year(d.Year)),
mean_mpg: d => op.mean(d.Miles_per_Gallon),
mean_disp: d => op.mean(d.Displacement),
mean_hpw: d => op.mean(d.Horsepower),
mean_weight: d => op.mean(d.Weight_in_lbs),
mean_acc: d => op.mean(d.Acceleration)
})
.orderby(aq.desc('count'))
.view()
cars_table
.derive({ Weight_in_kg: d => op.round(0.4536 * d.Weight_in_lbs) })
.view(10)
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.
