Published
Edited
Jan 27, 2021
1 fork
2 stars
md`## Imports
First, we need to import software libraries - vega-lite, d3, and printTable utility.
Remember that each cell supports only one executable statement, so you have to enter the two import lines into two separate cells.`
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.
num == str
num===str
// 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(d => d.fruit_name)
// The filter function evaluates a function for each element in the array, and removes an element when the return value is not truthy
data.filter(d => d.fruit_name === "apple")
// => is an arrow function that shortens function exppressions
data.find(d => d.fruit_name === "apple").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))
//Your code here
md`
In this exercise, we will learn how to create basic data visualizations using vega-lite. We will learn markPoint, markBar, and markLine on how each can be used to represent different aspects of information.
`
vl.markPoint()
.data(df)
.render()
vl.markPoint()
.data(df)
.encode(
vl.x().fieldQ("WeeksAhead"),
vl.y().fieldQ("TicketPrice")
)
.render()
vl.markPoint()
.data(df)
.encode(
vl.x().fieldQ("WeeksAhead"),
vl.y().fieldQ("TicketPrice"),
vl.color().fieldN("Route")
)
.render()
vl.markPoint()
.data(df)
.encode(
vl.x().fieldQ("WeeksAhead"),
vl.y().average("TicketPrice"),
vl.color().fieldN("Route")
)
.render()
vl.markPoint()
.data(df.filter(d => d.Mode === "Plane"))
.encode(
vl.x().fieldQ("WeeksAhead"),
vl.y().average("TicketPrice"),
vl.color().fieldN("Route")
)
.render()
vl.markLine()
.data(df.filter(d => d.Mode === "Plane"))
.encode(
vl.x().fieldQ("WeeksAhead"),
vl.y().average("TicketPrice"),
vl.color().fieldN("Route")
)
.render()
vl.markLine()
.data(df.filter(d => (d.Mode === "Plane" && d.Route === "Munich-Budapest")))
.encode(
vl.x().fieldQ("WeeksAhead"),
vl.y().average("TicketPrice"),
vl.color().fieldN("Route")
)
.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()
//Your code here
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.