Published
Edited
Jan 31, 2021
1 star
import {vl} from '@vega/vega-lite-api'
d3 = require('d3')
import {printTable} from '@uwdata/data-utilities'
1234132454+382479384732
Math.sqrt(121)
Math.random()
"hello "+"world"
"monkey"/4
"how long is this string?".length
"ALL LOWER CASE".toLowerCase()
num = 1
str = "1"
2<1
"a" < "b"
//== and != indicates implicit check while === and !== are explicit check. This way the operator compares the pure values.
1 == "1"
1==="1"
// AND operations
true && false
false && false
true && false
true || true
true || false
false || false
// putting the values in a bracket [] separated by commas create a datatype array
[1, 2, 3]
// arrays can consist of elements of different data types
arr = ["hello", 1, 4, 3, 2, "bye"]
// can index into the element in array
arr[1]
// -1 index doesn't work for javascript to access the last element
arr[-1]
arr[arr.length-1]
arr.indexOf(2)
//slicing from left, python equivalent of arr[2:]
arr.slice(2)
//slicing from right, python equivalent of arr[-2:]
arr.slice(-2)
//slicing from both sides, python equivalent of arr[2:4]
arr.slice(2,4)
//turn array into string
arr.join(' *** ')
//append new element at the end of the array
arr.concat('zzz')
//can also append a nested list
arr.concat([["a"], "b", "c"])
obj = ({key1: "apple", key2: "banana"})
obj.key1
//return an array of property values
Object.values(obj)
Object.keys(obj)
data = [
{fruit_name: "apple", calories_per_serving: 95, carb_amount_grams: 25},
{fruit_name: "banana", calories_per_serving: 105, carb_amount_grams: 27},
{fruit_name: "grape", calories_per_serving: 62, carb_amount_grams: 16}
]
data[0].fruit_name
//The map function above applies the function to each element in the array and returns the results as a new array.
data.map(rand => rand.calories_per_serving)
// The filter function evaluates a function for each element in the array, and returns only the element that satisfies the filtering criteria.
data.filter(d => d.fruit_name === "apple")
data.filter(d => d.calories_per_serving < 100 && d.carb_amount_grams < 25)
// => is an arrow function that shortens function exppressions
data.find(x => x.calories_per_serving < 100 && x.carb_amount_grams < 25).carb_amount_grams
function add_two(a, b) { // function signature: name and input arguments
return a + b // function body, with return statement for output
}
add_two(1, 2)
add_two("a", "b")
function add_carbs(a,b) {
var a_carb = data.find(x => x.fruit_name === a).carb_amount_grams
var b_carb = data.find(x => x.fruit_name === b).carb_amount_grams
return a_carb + b_carb
}
add_carbs("apple", "banana")
fileContents = FileAttachment("example-1.csv")
//Parsing data into array
df = d3.csvParse(await fileContents.text(), d3.autoType)
printTable(df.slice(0, 20))
function co2(route, weeksAhead){
var ticketPrice = df.filter(d => d.Mode==="Train")
.find(x => x.Route===route && x.WeeksAhead===weeksAhead).TicketPrice;
return ticketPrice;
}
co2("London-Amsterdam", 2)
vl.markPoint()
.data(df)
.render()
vl.markPoint()
.data(df)
.encode(
vl.x().fieldQ("WeeksAhead"),
vl.y().fieldQ("TicketPrice")
)
.width(400)
.height(200)
.render()
vl.markPoint()
.data(df)
.encode(
vl.x().fieldO("WeeksAhead"),
vl.y().fieldQ("TicketPrice"),
vl.color().fieldN("Route")
)
.width(400)
.height(200)
.render()
vl.markPoint()
.data(df)
.encode(
vl.x().fieldN("WeeksAhead"),
vl.y().average("TicketPrice"),
vl.color().fieldN("Route")
)
.width(400)
.height(200)
.render()
vl.markPoint()
.data(df.filter(d => d.Mode === "Plane"))
.encode(
vl.x().fieldN("WeeksAhead"),
vl.y().average("TicketPrice"),
vl.color().fieldN("Route")
)
.width(400)
.height(200)
.render()
vl.markLine()
.data(df.filter(d => d.Mode === "Plane"))
.encode(
vl.x().fieldN("WeeksAhead"),
vl.y().average("TicketPrice"),
vl.color().fieldN("Route")
)
.width(400)
.height(200)
.render()
vl.markLine()
.data(df.filter(d => (d.Mode === "Train" && d.Route === "Munich-Budapest")))
.encode(
vl.x().fieldN("WeeksAhead"),
vl.y().average("TicketPrice"),
vl.color().fieldN("Route")
)
.width(400)
.height(200)
.render()
vl.markBar()
.data(df)
.encode(
vl.y().fieldN("Mode"),
vl.x().fieldQ("EcoPassengerCO2"),
vl.color().fieldN("Mode")
)
.render()
df.forEach(function (element) {
element.co2_per_min = element.EcoPassengerCO2 / element.RawTravelTime;
})
vl.markBar()
.data(df)
.encode(
vl.y().fieldN("Mode"),
vl.x().fieldQ("co2_per_min"),
vl.color().fieldN("Mode")
)
.title({
text: 'CO2 released per minute',
anchor: 'middle',
fontSize: 15
})
.render()
FileAttachment("image-1.png").image()
vl.markPoint()
.data(df.filter(d => d.Mode==="Train"))
.encode(
vl.y().fieldN("Route"),
vl.x().average("TicketPrice").title("Average of Ticket Price"),
vl.color().fieldN("Route")
)
.title({
text:"Average Price of Ticket per Route",
anchor:'middle',
fontsize:15
})
.width(500)
.height(150)
.render()
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.
